Merge branch 'main' into bhagwan

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

.env

@@ -1,3 +1,3 @@
-# VITE_BASE_URI="https://officially-powerful-goat.ngrok-free.app"
+VITE_BASE_URI="https://officially-powerful-goat.ngrok-free.app"
 # VITE_BASE_URI="https://python-amused-adder.ngrok-free.app"
-VITE_BASE_URI="https://concrete-gladly-mullet.ngrok-free.app"
+# VITE_BASE_URI="https://concrete-gladly-mullet.ngrok-free.app"

.gitignore

@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+node
 dist
 dist-ssr
 *.local

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Sign Made Easy</title>
   </head>
   <body>
     <div id="root"></div>

src/App.tsx

@@ -22,7 +22,6 @@ import Templates from "./components/templates/Templates";
 import DocumentCompletionScreen from "./components/process/CompletionScreen/DocumentCompletionScreen";
 import JoyrideController from "./utlity/JoyRideTour";
 import Contacts from "./components/contacts/Contacts";
-
 const App = () => {
 
   return (
@@ -94,7 +93,8 @@ const App = () => {
           {/* Links work wothout Login */}
           <Route path="/login" element={<Login />} />
           <Route path="/register" element={<Register />} />
-          <Route path="/sign/:recipientId" element={<SignDocument />} />
+          <Route path="/sign/:recipientId/:signType" element={<SignDocument />} />
+          <Route path="/sign/:recipientId/" element={<SignDocument />} />
           <Route path="/view" element={<DocView />} />
 
           {/* Links work wothout Login */}

src/SigningOrderDiagram .tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { FaCheck, FaLock, FaClock, FaEnvelope, FaTimes } from "react-icons/fa";
+import { FaCheck, FaLock, FaClock, FaEnvelope, FaTimes, FaUserTimes } from "react-icons/fa";
 import { IoCloseOutline } from "react-icons/io5";
 
 type Signer = {
@@ -48,16 +48,16 @@ const groupByRoutingOrder = (data: Signer[]) => {
 };
 
 const getInitials = (name: string) => {
+    if (!name.trim()) return "";
     return name
         .split(" ")
+        .filter(n => n)  
         .map((n) => n[0].toUpperCase())
         .join("");
 };
 
 const SigningOrderDiagram : React.FC<Signer[]> = (signers) => {
 
-    console.log(signers, "Line 59")
-
     const grouped = groupByRoutingOrder(signers.signers);
     const sortedOrders = Object.keys(grouped)
         .map(Number)
@@ -109,14 +109,14 @@ const SigningOrderDiagram : React.FC<Signer[]> = (signers) => {
                                             <div key={signer.id} className="relative">
                                                 <div
                                                     className={`w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-semibold ${bgColor}`}
-                                                    title={signer.name}
+                                                    title={signer?.name}
                                                 >
-                                                    {getInitials(signer.name)}
+                                                    {(signer?.name !== '' || signer?.roleName) ? getInitials(signer?.name || signer?.roleName) : ""}
                                                     <span className="absolute bottom-[12px] right-[-12px] p-1 rounded-full bg-white shadow">
                                                         {icon}
                                                     </span>
                                                 </div>
-                                                <p className="mt-1 text-xs text-gray-600 text-center">{signer.name.split(" ")[0]}</p>
+                                                <p className="mt-1 text-xs text-gray-600 text-center">{(signer?.name?.split(" ")[0] || signer?.roleName)}</p>
                                             </div>
                                         );
                                     })}

src/components/CommonNav.tsx

@@ -1,12 +1,14 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
-import { FaSignOutAlt, FaUser, FaBuilding, FaChevronDown, FaCheck } from "react-icons/fa";
+import { FaSignOutAlt, FaUser, FaBuilding, FaChevronDown, FaCheck, FaBars } from "react-icons/fa";
 import api from '../config/api';
 
-
 interface AccountNavProps {
   accountName?: string | null;
   transactionName?: string | null;
+  showSideBar?: boolean;
+  setShowSideBar?: (show: boolean) => void;
+  isMobile?: boolean;
 }
 
 interface Account {
@@ -40,10 +42,13 @@ const dispatchSessionStorageChange = (key: string, newValue: any) => {
   }));
 };
 
-const CommonNav: React.FC<AccountNavProps> = () => {
+const CommonNav: React.FC<AccountNavProps> = ({
+  showSideBar,
+  setShowSideBar,
+  isMobile = false
+}) => {
   const activeAccountId = JSON.parse(sessionStorage.getItem('activeAccountId') || 'null');
   const userDetails = JSON.parse(sessionStorage.getItem('userDetails') || '{}');
-  console.log("activeAccountId", activeAccountId);
 
   const [open, setOpen] = useState(false);
   const [accountsOpen, setAccountsOpen] = useState(false);
@@ -64,12 +69,10 @@ const CommonNav: React.FC<AccountNavProps> = () => {
     },
   });
 
-  console.log("user", user)
   const getAccountDetails = async () => {
     try {
       let res = await api.get('/api/user/accounts');
       let items = res?.data;
-      console.log('items', items);
 
       const cleanedData: AccountDataArray[] = items.map((item: any) => ({
         userId: item.userId,
@@ -103,7 +106,6 @@ const CommonNav: React.FC<AccountNavProps> = () => {
   };
 
   const handleAccountSwitch = (account: any) => {
-    console.log("handleAccountSwitch", account);
 
     // Update sessionStorage
     sessionStorage.setItem('activeAccountId', JSON.stringify(account.accountId));
@@ -112,12 +114,11 @@ const CommonNav: React.FC<AccountNavProps> = () => {
     dispatchSessionStorageChange('activeAccountId', account.accountId);
 
     // Update user state
-
     setUser({
       id: account.userId,
       name: account.name,
       email: account.userEmail,
-      language: "", // set it if available
+      language: account.language, // set it if available
       account: {
         id: account.accountId,
         isDefault: false, // update as needed
@@ -129,7 +130,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
       id: account.userId,
       name: account.name,
       email: account.userEmail,
-      language: "", // set it if available
+      language: account.language, // set it if available
       account: {
         id: account.accountId,
         isDefault: false, // update as needed
@@ -141,20 +142,19 @@ const CommonNav: React.FC<AccountNavProps> = () => {
     setOpen(false);
   };
 
-
   const navigate = useNavigate();
 
   const getUserDetails = async () => {
     try {
       let res = await api.get(`/api/user/details`);
-      console.log("getuser", res);
+
       const item = res?.data;
       if (item) {
         const userData = {
           id: item?.id,
           name: item?.firstName + " " + item?.lastName,
           email: item?.email,
-          language: "",
+          language: item?.language,
           account: {
             id: item?.account.id,
             isDefault: false,
@@ -162,8 +162,6 @@ const CommonNav: React.FC<AccountNavProps> = () => {
           },
         };
 
-        console.log("userData", userData)
-
         setUser(userData);
         sessionStorage.setItem('userDetails', JSON.stringify(userData));
         sessionStorage.setItem('activeAccountId', JSON.stringify(userData.account.id));
@@ -171,10 +169,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
         // Dispatch event for initial load
         dispatchSessionStorageChange('activeAccountId', userData.account.id);
 
-        console.log("Data is saved in sessionStorage");
       }
-
-
     } catch (error) {
       console.error("Error fetching user details:", error);
     }
@@ -194,17 +189,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
     .split("/")
     .filter((x) => x && isNaN(Number(x)));
 
-  // Special case: if first segment is 's' and next is 'settings', remove 's'
-  const pathnames =
-    rawPathnames[0] === "s" && rawPathnames[1] === "settings"
-      ? rawPathnames.slice(1)
-      : rawPathnames;
 
-  const labelMap: Record<string, string> = {
-    accounts: "Accounts",
-    transactions: "Transactions",
-    templates: "Templates"
-  };
 
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
@@ -244,11 +229,39 @@ const CommonNav: React.FC<AccountNavProps> = () => {
     }
   };
 
+  const handleSidebarToggle = () => {
+    if (setShowSideBar) {
+      setShowSideBar(!showSideBar);
+    }
+  };
+
+  // Special case: if first segment is 's' and next is 'settings', remove 's'
+  const pathnames =
+    rawPathnames[0] === "s" && rawPathnames[1] === "settings"
+      ? rawPathnames.slice(1)
+      : rawPathnames;
+
+  const labelMap: Record<string, string> = {
+    accounts: "Accounts",
+    transactions: "Transactions",
+    templates: "Templates",
+  };
+
   const formatSegment = (segment: string) =>
     segment
       .replace(/[-_]/g, " ")
       .replace(/\b\w/g, (char) => char.toUpperCase());
 
+  //   If URL has accounts → transactions, only keep "transactions"
+  let filteredPathnames = [...pathnames];
+  const accIndex = pathnames.indexOf("accounts");
+  const txnIndex = pathnames.indexOf("transactions");
+
+  if (accIndex !== -1 && txnIndex !== -1 && txnIndex > accIndex) {
+    // keep only "transactions" and everything after it
+    filteredPathnames = pathnames.slice(txnIndex);
+  }
+
   const ShimmerRow = () => (
     <div className="animate-pulse px-4 py-3 border-b border-gray-100 last:border-b-0">
       <div className="flex items-center space-x-3">
@@ -263,34 +276,51 @@ const CommonNav: React.FC<AccountNavProps> = () => {
   );
 
   return (
-    <header className="w-full px-6 py-2 flex justify-between items-center bg-white border-b rounded-sm border-gray-200">
-      <nav className="text-md font-medium text-gray-800 capitalize flex items-center flex-wrap">
-        {pathnames.length === 0 ? (
-          <span className="text-gray-900 font-semibold">Home</span>
-        ) : (
-          pathnames.map((segment, index) => {
-            const label = labelMap[segment] || formatSegment(segment);
-            const to = "/" + pathnames.slice(0, index + 1).join("/");
-            const isLast = index === pathnames.length - 1;
-
-            return (
-              <span key={to} className="flex items-center">
-                {index > 0 && <span className="mx-2 text-gray-400">{">"}</span>}
-                {!isLast ? (
-                  <Link
-                    to={to}
-                    className="text-blue-600 hover:text-blue-700 hover:underline transition-colors"
-                  >
-                    {label}
-                  </Link>
-                ) : (
-                  <span className="text-gray-900 font-semibold">{label}</span>
-                )}
-              </span>
-            );
-          })
+    <header className="w-full px-3 py-1.5 flex justify-between items-center bg-white border-b border-gray-200">
+      <div className="flex items-center space-x-4">
+        {/* Mobile Hamburger Menu - Only show on mobile */}
+        {isMobile && (
+          <div className='flex items-center justify-start'>
+            <span className='text-[var(--primary)] text-xl text-center tracking-widest font-medium text-shadow-2xs'>SME</span>
+            <button
+              onClick={handleSidebarToggle}
+              className="p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200 text-gray-600 hover:text-gray-900"
+              aria-label="Toggle sidebar"
+            >
+              <FaBars className="text-lg" />
+            </button>
+          </div>
         )}
-      </nav>
+
+        {/* Breadcrumb Navigation */}
+        <nav className="text-md font-medium text-gray-800 capitalize flex items-center flex-wrap">
+          {filteredPathnames.length === 0 ? (
+            <span className="text-gray-900 font-semibold">Home</span>
+          ) : (
+            filteredPathnames.map((segment, index) => {
+              const label = labelMap[segment] || formatSegment(segment);
+              const to = "/" + filteredPathnames.slice(0, index + 1).join("/");
+              const isLast = index === filteredPathnames.length - 1;
+
+              return (
+                <span key={to} className="flex items-center">
+                  {index > 0 && <span className="mx-2 text-gray-400">{">"}</span>}
+                  {!isLast ? (
+                    <Link
+                      to={to}
+                      className="text-blue-600 hover:text-blue-700 hover:underline transition-colors"
+                    >
+                      {label}
+                    </Link>
+                  ) : (
+                    <span className="text-gray-900 font-semibold">{label}</span>
+                  )}
+                </span>
+              );
+            })
+          )}
+        </nav>
+      </div>
 
       <div className="flex items-center space-x-2">
         <div className="relative" ref={dropdownRef}>
@@ -301,7 +331,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
             aria-expanded={open}
             aria-haspopup="true"
           >
-            <div className="w-8 h-8 rounded-full overflow-hidden bg-[var(--primaryLight2)] flex items-center justify-center text-white font-semibold text-sm shadow-md">
+            <div className="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-br from-[var(--primary)] to-blue-600 flex items-center justify-center text-white font-semibold text-sm shadow-md">
               {user ? (
                 <span className="w-full h-full object-cover p-1.5 font-bold">
                   {(user?.name?.slice(0, 2)).toUpperCase()}
@@ -316,7 +346,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
             <div className="absolute right-0 mt-2 w-72 top-8 rounded-xl shadow-xl bg-white border border-gray-200 z-50 overflow-hidden">
               <div className="px-4 py-4 bg-gradient-to-r from-blue-50 to-purple-50 border-b border-gray-100">
                 <div className="flex items-center space-x-3">
-                  <div className="w-12 h-12 rounded-full overflow-hidden bg-gradient-to-br from-green-500 to-blue-600 flex items-center justify-center text-white font-semibold shadow-md">
+                  <div className="w-12 h-12 rounded-full overflow-hidden bg-gradient-to-br from-[var(--primary)] to-blue-600 flex items-center justify-center text-white font-semibold shadow-md">
                     {user ? (
                       <span className="w-full h-full object-cover px-3 text-xl py-2.5 font-bold">
                         {(user?.name?.slice(0, 2)).toUpperCase()}
@@ -407,6 +437,20 @@ const CommonNav: React.FC<AccountNavProps> = () => {
       </div>
     </header>
   );
-};
 
+  //   const ShimmerRow = () => (
+  //     <div className="animate-pulse px-4 py-3 border-b border-gray-100 last:border-b-0">
+  //       <div className="flex items-center space-x-3">
+  //         <div className="w-8 h-8 bg-gray-200 rounded-full"></div>
+  //         <div className="flex-1 space-y-2">
+  //           <div className="h-4 bg-gray-200 rounded w-3/4"></div>
+  //           <div className="h-3 bg-gray-200 rounded w-1/2"></div>
+  //         </div>
+  //         <div className="w-16 h-6 bg-gray-200 rounded"></div>
+  //       </div>
+  //     </div>
+  //   );
+  // };
+
+}
 export default CommonNav;

src/components/accounts/Account.tsx

@@ -3,21 +3,11 @@ import { PiDotsThreeOutlineVerticalFill } from "react-icons/pi";
 import AccountNav from "./AccountNav";
 import api from "../../config/api";
 import { useNavigate, useParams } from "react-router-dom";
-import { FaCheck } from "react-icons/fa";
+import { FaCheck, FaClock } from "react-icons/fa";
 import Cards from "../home/Cards";
 import AddInviteModal from "./AddInviteModal";
 import { Bounce, toast } from "react-toastify";
-import {
-    FaCheckCircle,
-    FaClock,
-    FaHourglassHalf,
-    FaTasks,
-    FaChevronDown,
-    FaPlus,
-    FaUserPlus,
-    FaFilter,
-    FaCalendarAlt
-} from 'react-icons/fa';
+import { FiFileText, FiClock, FiAlertTriangle, FiCheckCircle } from "react-icons/fi";
 import TransactionDataTable from "./TransactionDataTable";
 import { useSelector } from "react-redux";
 import { RootState } from "../../store/store";
@@ -35,34 +25,40 @@ const Account = () => {
     const mapApiDataToCards = (data: any): CardData[] => {
         return [
             {
-                title: 'Action Needed',
+                title: "Action Required",
                 count: data.actionNeeded || 0,
-                icon: <FaTasks size={18} className="text-indigo-600" />,
-                gradient: 'bg-gradient-to-br from-indigo-50 to-indigo-100',
-                shadowColor: 'shadow-indigo-200/50',
-                iconBg: 'bg-indigo-100 border-indigo-200',
-                textColor: 'text-indigo-700',
-                trend: 'up'
+                icon: <FiFileText className="w-5 h-5 text-sky-500" />,
+                iconBg: "bg-sky-100 border-sky-200",
+                textColor: "text-sky-600",
+                gradient: "bg-white",
+                shadowColor: "shadow-sky-100",
             },
             {
-                title: 'Expiring Soon',
+                title: "Waiting for Response",
+                count: data.waitingForOthers || 0,
+                icon: <FiClock className="w-5 h-5 text-yellow-500" />,
+                iconBg: "bg-yellow-100 border-yellow-200",
+                textColor: "text-yellow-600",
+                gradient: "bg-white",
+                shadowColor: "shadow-yellow-100",
+            },
+            {
+                title: "Expiring Soon",
                 count: data.expiring || 0,
-                icon: <FaHourglassHalf size={18} className="text-rose-600" />,
-                gradient: 'bg-gradient-to-br from-rose-50 to-rose-100',
-                shadowColor: 'shadow-rose-200/50',
-                iconBg: 'bg-rose-100 border-rose-200',
-                textColor: 'text-rose-700',
-                trend: 'up'
+                icon: <FiAlertTriangle className="w-5 h-5 text-red-500" />,
+                iconBg: "bg-red-100 border-red-200",
+                textColor: "text-red-600",
+                gradient: "bg-white",
+                shadowColor: "shadow-red-100",
             },
             {
-                title: 'Completed',
+                title: "Completed",
                 count: data.completed || 0,
-                icon: <FaCheckCircle size={18} className="text-teal-600" />,
-                gradient: 'bg-gradient-to-br from-teal-50 to-teal-100',
-                shadowColor: 'shadow-teal-200/50',
-                iconBg: 'bg-teal-100 border-teal-200',
-                textColor: 'text-teal-700',
-                trend: 'up'
+                icon: <FiCheckCircle className="w-5 h-5 text-green-500" />,
+                iconBg: "bg-green-100 border-green-200",
+                textColor: "text-green-600",
+                gradient: "bg-white",
+                shadowColor: "shadow-green-100",
             },
             // {
             //     title: 'Waiting for Others',
@@ -94,16 +90,16 @@ const Account = () => {
             //     textColor: 'text-green-700',
             //     trend: 'down'
             // },
-            {
-                title: 'draft',
-                count: data.draft || 0,
-                icon: <FaClock size={18} className="text-stone-600" />,
-                gradient: 'bg-gradient-to-br from-stone-50 to-stone-100',
-                shadowColor: 'shadow-stone-200/50',
-                iconBg: 'bg-stone-100 border-stone-200',
-                textColor: 'text-stone-700',
-                trend: 'down'
-            }
+            // {
+            //     title: 'draft',
+            //     count: data.draft || 0,
+            //     icon: <FaClock size={18} className="text-stone-600" />,
+            //     gradient: 'bg-gradient-to-br from-stone-50 to-stone-100',
+            //     shadowColor: 'shadow-stone-200/50',
+            //     iconBg: 'bg-stone-100 border-stone-200',
+            //     textColor: 'text-stone-700',
+            //     trend: 'down'
+            // }
             // Add more cards here if needed
         ];
     };
@@ -112,7 +108,6 @@ const Account = () => {
         JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
     );
 
-    console.log("activeAccountId Trans.", activeAccountId)
     // const { accountId } = useParams<{ accountId: string }>();
     const [transactions, setTransactions] = useState<Transaction[]>([]);
     const [accountsData, setAccountsData] = useState([])
@@ -252,8 +247,9 @@ const Account = () => {
 
             <Cards type="transactions" onOpenModal={handleOpenModal} cards={cards}
                 isLoading={isLoading} />
-
-            <TransactionDataTable />
+            <section className="my-4 mx-3">
+                <TransactionDataTable activeAccountId={activeAccountId}/>
+            </section>
 
             {isModalOpen && <AddInviteModal onClose={() => setIsModalOpen(false)} onInvite={handleInvite} inviteLoading={inviteLoading}
                 accountOptions={accountsData} />}

src/components/accounts/AccountNav.tsx

@@ -42,7 +42,6 @@ const dispatchSessionStorageChange = (key: string, newValue: any) => {
 const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transactionName = null }) => {
   const activeAccountId = JSON.parse(sessionStorage.getItem('activeAccountId') || 'null');
   const userDetails = JSON.parse(sessionStorage.getItem('userDetails') || '{}');
-  console.log("activeAccountId", activeAccountId);
 
   const [open, setOpen] = useState(false);
   const [accountsOpen, setAccountsOpen] = useState(false);
@@ -63,12 +62,10 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
     },
   });
 
-  console.log("user", user)
   const getAccountDetails = async () => {
     try {
       let res = await api.get('/api/user/accounts');
       let items = res?.data;
-      console.log('items', items);
 
       const cleanedData: AccountDataArray[] = items.map((item: any) => ({
         userId: item.userId,
@@ -102,7 +99,6 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
   };
 
   const handleAccountSwitch = (account: any) => {
-    console.log("handleAccountSwitch", account);
 
     // Update sessionStorage
     sessionStorage.setItem('activeAccountId', JSON.stringify(account.accountId));
@@ -146,7 +142,7 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
   const getUserDetails = async () => {
     try {
       let res = await api.get(`/api/user/details`);
-      console.log("getuser", res);
+
       const item = res?.data;
       if (item) {
         const userData = {
@@ -161,16 +157,12 @@ const AccountNav: React.FC<AccountNavProps> = ({ accountName = null, transaction
           },
         };
 
-        console.log("userData",userData)
-
         setUser(userData); 
         sessionStorage.setItem('userDetails', JSON.stringify(userData));
         sessionStorage.setItem('activeAccountId', JSON.stringify(userData.account.id));
   
         // Dispatch event for initial load
         dispatchSessionStorageChange('activeAccountId', userData.account.id);
-  
-        console.log("Data is saved in sessionStorage");
       }
 
 

src/components/accounts/Accounts.tsx

@@ -99,7 +99,6 @@ const Accounts = () => {
   const handleAction = async (accountId: string, action: 'accept' | 'reject') => {
     try {
       let response = await api.post(`/api/accounts/${accountId}/accept/invite`)
-      console.log(response)
       if (response.data.status === 202) {
         toast.success("Login Successful", {
           position: "top-center",

src/components/accounts/TransactionDataTable.tsx

@@ -2,9 +2,10 @@ 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 { useLocation, useNavigate } from 'react-router-dom';
 import { FaCheck } from 'react-icons/fa';
+import LoaderUi from '../../helper/LoaderUi';
+import logoRecord from '../../assets/record.svg';
 
 
 
@@ -13,21 +14,32 @@ const formatDate = (timestamp: number) => {
     return new Date(timestamp * 1000).toLocaleString();
 };
 
-const TransactionDataTable = () => {
+const statusColorMap = {
+    CREATED: "bg-blue-100 text-blue-600",
+    SENT: "bg-green-100 text-green-600",
+    COMPLETED: "bg-purple-100 text-purple-600",
+    EXPIRED: "bg-red-100 text-red-600",
+};
+
+
+const TransactionDataTable = ({activeAccountId}) => {
     const navigate = useNavigate()
+    const loaction = useLocation()
+
     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 [loading, setLoading] = useState(false)
 
     const fetchTransactions = async () => {
         console.log("fetchTransactions")
+        setLoading(true)
         try {
             const response = await api.get(`/api/accounts/${activeAccountId}/transactions?sortBy=lastModifiedAt desc`);
             setTransactions(response.data || []);
         } catch (error) {
             console.error("Error fetching transactions:", error);
+        } finally {
+            setLoading(false)
         }
     };
 
@@ -49,72 +61,159 @@ const TransactionDataTable = () => {
     }, []);
 
 
-    
+    function formatTimestamp(isoString, options = { timeZone: 'local' }) {
+        // Parse the ISO string to a Date object
+        const date = new Date(isoString);
+
+        if (isNaN(date)) {
+            return 'Invalid date';
+        }
+
+        // Return formatted date string
+        if (options.timeZone === 'UTC') {
+            return date.toUTCString(); // e.g. "Mon, 04 Aug 2025 13:46:46 GMT"
+        } else {
+            return date.toLocaleString(); // e.g. "8/4/2025, 9:46:46 AM" (based on local time zone)
+        }
+    }
+
+    function getStatusColorClass(status) {
+        return statusColorMap[status] || "bg-gray-100 text-gray-600";
+    }
+
+
 
     return (
         <>
-            {transactions.length > 0 && (
-                <div className="overflow-x-auto py-2">
-                    <table className="min-w-full text-sm border border-gray-200 rounded bg-white shadow-sm">
-                        <thead className="bg-gray-100 text-gray-700 uppercase text-xs tracking-wider">
-                            <tr>
-                                <th className="px-4 py-3 text-left"></th>
-                                <th className="px-4 py-3 text-center">Name</th>
-                                <th className="px-4 py-3 text-center">Status</th>
-                                <th className="px-4 py-3 text-center">Active</th>
-                                <th className="px-4 py-3 text-center">Last Change</th>
-                                <th className="px-4 py-3 text-center">Expire After (days)</th>
-                                <th className="px-4 py-3 text-center">Sign</th>
-                                <th className="px-4 py-3 text-center">Action</th>
+
+            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+                {/* Header */}
+                {location.pathname !== '/transactions' && 
+                <div className="flex justify-between items-center px-6 py-4 border-b border-gray-100">
+                    <h2 className="text-sm font-semibold text-gray-800">Recent Transactions</h2>
+                    <span className=' text-[var(--primary)] text-xs hover:underline cursor-pointer font-semibold'>View all</span>
+                </div>}
+
+                {/* Scrollable Table Container */}
+                <div className={`overflow-auto  no-scrollbar ${location.pathname === '/transactions' ? "min-h-[76vh] max-h-[76vh]" : "min-h-[70vh] max-h-[70vh]"}`}>
+                    <table className="w-full text-sm">
+                        {/* Sticky Header */}
+                        <thead className="bg-gray-50 sticky top-0 z-10">
+                            <tr className="text-gray-600 text-xs uppercase tracking-wider border-b border-gray-200">
+                                <th className="px-6 py-4 text-left font-semibold">Document</th>
+                                <th className="px-6 py-4 text-center font-semibold">Status</th>
+                                {location.pathname === '/transactions' && (
+                                    <>
+                                        <th className="px-6 py-4 text-center font-semibold">Signed By</th>
+                                        <th className="px-6 py-4 text-center font-semibold">Last Change</th>
+                                        <th className="px-6 py-4 text-center font-semibold">Expire After (Days)</th>
+                                        <th className="px-6 py-4 text-center font-semibold">Actions</th>
+                                    </>
+                                )}
+
                             </tr>
                         </thead>
-                        <tbody className="divide-y divide-gray-200">
-                            {transactions.map((tx) => {
-                                const lastModifiedAt = new Date(tx.lastModifiedAt, "DD/MM/YYYY");
-                                return (
-                                    <tr
-                                        key={tx.id}
-                                        onClick={() => handleTransactionClick(tx.id)}
-                                        className="hover:bg-gray-50 cursor-pointer"
-                                    >
-                                        <td className="px-4 py-3">
-                                            <div className="w-5 h-5 rounded border border-slate-300 flex justify-center items-center">
-                                                {selectedTransactions.includes(tx.id) && (
-                                                    <FaCheck className="text-purple-600 text-sm" />
-                                                )}
-                                            </div>
-                                        </td>
-                                        <td className="px-4 py-3 text-center">
-                                            {tx.subject || "Untitled"}
-                                        </td>
-                                        <td className="px-4 py-3 text-center">
-                                            <span className="px-2 py-0.5 rounded-xl text-xs font-medium bg-blue-100 text-blue-700">
-                                                {tx.status}
-                                            </span>
-                                        </td>
-                                        <td className="px-4 py-3 text-center">
-                                            {tx.active ? "Yes" : "No"}
-                                        </td>
+                        {loading ? (
+                            <tbody>
+                                <tr>
+                                    <td colSpan="6" className="relative h-100">
+                                        <LoaderUi />
+                                    </td>
+                                </tr>
+                            </tbody>
+                        ) : transactions.length > 0 ? (
+                            <>
+                                {/* Scrollable Body */}
+                                <tbody className="bg-white divide-y divide-gray-100">
+                                    {transactions.map((tx) => (
+                                        <tr
+                                            key={tx.id}
+                                            onClick={() => handleTransactionClick(tx.id)}
+                                            className="hover:bg-gray-50 transition-colors duration-150 cursor-pointer"
+                                        >
+                                            <td className="px-6 py-4 text-left">
+                                                <div className="text-gray-800 font-medium truncate max-w-xs">
+                                                    {tx?.subject || "Untitled"}
+                                                </div>
+                                            </td>
+                                            <td className="px-6 py-4 text-center">
+                                                <span
+                                                    className={`inline-block px-3 py-1 rounded-full text-xs font-medium ${getStatusColorClass(
+                                                        tx.status
+                                                    )}`}
+                                                >
+                                                    {tx.status}
+                                                </span>
+                                            </td>
 
-                                        <td className="px-4 py-3 text-center">
-                                            {formatDate(tx.lastModifiedAt)}
-                                        </td>
-                                        <td className="px-4 py-3 text-center">
-                                            {tx.expireAfter ?? "-"}
-                                        </td>
-                                        <td className="px-4 py-3 text-center ">
-                                            {tx?.createdBy?.email === currentEmailId ? <button className="px-2 py-0.5 rounded-xl text-xs font-medium bg-green-100 text-green-700 cursor-pointer">Sign now</button> : "-"}
-                                        </td>
-                                        <td className="px-4 py-3 text-center">
-                                            <PiDotsThreeOutlineVerticalFill className="text-lg text-slate-300 hover:text-black mx-auto" />
-                                        </td>
-                                    </tr>
-                                )
-                            })}
-                        </tbody>
+                                            {location.pathname === '/transactions' && (
+                                                <>
+                                                    <td className="px-6 py-4">
+                                                        <div className="flex items-center justify-center">
+                                                            {tx.signedBy ? (
+                                                                <div className="flex items-center gap-2">
+                                                                    <div
+                                                                        className="w-7 h-7 rounded-full flex items-center justify-center text-xs font-medium text-white flex-shrink-0"
+                                                                        style={{ backgroundColor: "#d8b4fe" }}
+                                                                    >
+                                                                        {tx.signedByInitials}
+                                                                    </div>
+                                                                    <span className="text-gray-700 truncate max-w-[120px]">
+                                                                        {tx.signedBy}
+                                                                    </span>
+                                                                </div>
+                                                            ) : (
+                                                                <span className="text-gray-400">-</span>
+                                                            )}
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-6 py-4 text-center">
+                                                        <span className="text-gray-600 whitespace-nowrap">
+                                                            {formatTimestamp(tx.lastModifiedAt)}
+                                                        </span>
+                                                    </td>
+                                                    <td className="px-6 py-4 text-center">
+                                                        <span className="text-gray-700">
+                                                            {tx.expireAfter ?? "-"}
+                                                        </span>
+                                                    </td>
+                                                    <td className="px-6 py-4 text-center">
+                                                        <button
+                                                            className="text-gray-400 hover:text-gray-600 transition-colors duration-150 p-1 rounded-md hover:bg-gray-100"
+                                                            onClick={(e) => {
+                                                                e.stopPropagation();
+                                                                // Handle actions menu
+                                                            }}
+                                                        >
+                                                            <PiDotsThreeOutlineVerticalFill className="text-lg" />
+                                                        </button>
+                                                    </td>
+                                                </>
+                                            )}
+
+
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </>) : (
+                            <tbody>
+                                <tr>
+                                    <td colSpan="6" className="text-center py-10 text-gray-500">
+                                        <div className="flex flex-col items-center justify-center">
+                                            <img
+                                                src={logoRecord}
+                                                alt="Record Not Found"
+                                                className="w-70 h-70 mb-4 opacity-70"
+                                            />
+                                        </div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        )}
                     </table>
                 </div>
-            )}
+            </div>
+
         </>
     )
 }

src/components/auth/LoginForm.tsx

@@ -6,7 +6,6 @@ import { Link, useNavigate } from "react-router-dom";
 import OAuthGoogle from "./OAuthGoogle";
 import { Bounce, toast } from "react-toastify";
 // import Cookies from "js-cookie";
-import { updateUser } from "../../store/slices/userSlice";
 import { useDispatch } from "react-redux";
 import { AppDispatch } from "../../store/store";
 // import api from "../../config/api";
@@ -27,18 +26,15 @@ function LoginForm() {
 
 
     const handleNextClick = () => {
-        console.log('Next Button Clicked');
 
         // Validation Starts
         if (formData.email === "") {
-            console.log('All Fields are Required');
             return;
         }
 
         // Validate Email Format
         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         if (!emailRegex.test(formData.email)) {
-            console.log("Invalid email format");
             return;
         }
         // Validation Ends
@@ -47,18 +43,14 @@ function LoginForm() {
         axios.get(`${import.meta.env.VITE_BASE_URI}/api/auth/user?email=${formData.email}`, { headers: { "ngrok-skip-browser-warning": "69420" } })
             .then((res) => {
 
-                console.log(res, "Cache Key res", formData.email)
-                console.log(res.data, "Cache Key res 2", formData.email)
 
                 if (res.status === 200) {
                     toast.dismiss();
-                    console.log('User Exists');
                     setCacheKey(res.data);
                     setNextClick(true);
                 }
             })
             .catch((err) => {
-                console.log('User Does Not Exists');
                 toast.dismiss();
                 toast.error("User Does Not Exists", {
                     position: "top-center",
@@ -76,25 +68,20 @@ function LoginForm() {
     }
 
     const handleFormLoginClick = () => {
-        console.log('Login Function Called Line 7 LoginForm.tsx');
 
         // Validation Starts
         if (formData.email === "" || formData.password === "") {
-            console.log('All Fields are Required');
             return;
         }
 
         // Validate Email Format
         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         if (!emailRegex.test(formData.email)) {
-            console.log("Invalid email format");
             return;
         }
         // Validation Ends
 
         // Login API Call
-        console.log('Login API Call');
-        console.log(formData, "Submitting Data :", { cacheKey: cacheKey, password: formData.password });
         axios.post(`${import.meta.env.VITE_BASE_URI}/api/auth/login`,
             { cacheKey: cacheKey, password: formData.password },
             {
@@ -106,10 +93,9 @@ function LoginForm() {
             }
         )
             .then((res) => {
-                console.log(res.status, "Response Status Line 42 LoginForm.tsx", res);
                 if (res.status === 200) {
+                    
                     toast.dismiss();
-                    // console.log('User Logined Successfully Line 45 LoginForm.tsx headerCookie:', res.headers.authorization);
                     // Cookies.set("authorization", res.headers.authorization, {
                     //     path: "/",
                     //     secure: true, // Required for HTTPS
@@ -132,9 +118,7 @@ function LoginForm() {
                 }
             })
             .catch((err) => {
-                console.log(err, "ERROR")
                 if (err.status === 401) {
-                    console.log('Unauthorized');
                     toast.dismiss();
                     toast.error("Credentials Not Match", {
                         position: "top-center",
@@ -148,7 +132,6 @@ function LoginForm() {
                         transition: Bounce,
                     });
                 } else {
-                    console.log('Some Error Occurred');
                     toast.dismiss();
                     toast.error("Some Error Occurred", {
                         position: "top-center",
@@ -206,7 +189,7 @@ function LoginForm() {
             <p>or login with social platforms</p>
 
             <div className="social-icons">
-                <OAuthGoogle />
+                <OAuthGoogle isLogin={true} />
             </div>
 
             <div>

src/components/auth/OAuthGoogle.tsx

@@ -19,16 +19,14 @@ interface OAuthGoogleProps {
     isLogin: boolean
 }
 
-const OAuthGoogle: React.FC<OAuthGoogleProps> = ({isLogin}) => {
+const OAuthGoogle: React.FC<OAuthGoogleProps> = ({ isLogin }) => {
     const dispatch = useDispatch<AppDispatch>();
     const navigate = useNavigate();
 
     // Define the success handler type (based on the Google login response)
     const responseMessage = (response: GoogleResponse) => {
-        console.log(response, "OAuthGoogle .tsx Line 23 Response from Google");
         const token = response.credential;
 
-        console.log(token, 'token');
 
         axios.get(`${import.meta.env.VITE_BASE_URI}/api/oauth2/authorization/google?token=${token}`, {
             headers: {
@@ -38,7 +36,6 @@ const OAuthGoogle: React.FC<OAuthGoogleProps> = ({isLogin}) => {
             .then((res) => {
                 if (res.status === 200 || res.status === 201) {
                     toast.dismiss();
-                    console.log('User Logined Successfully Line 45 LoginForm.tsx headerCookie:', res.headers.authorization);
 
                     dispatch(updateUser({ ...res.data, authorized: true, accessToken: res.headers.authorization }));
 
@@ -52,8 +49,6 @@ const OAuthGoogle: React.FC<OAuthGoogleProps> = ({isLogin}) => {
 
 
         const decoded = jwtDecode(token);
-
-        console.log(decoded, 'decoded');
     };
 
     // Define the error handler type (error can be of any type)

src/components/auth/RegisterForm.tsx

@@ -22,14 +22,12 @@ interface FormDataState {
 
 
 function RegisterForm() {
-    console.log("RegisterForm Component Rendered");
     const [formData, setForm] = useState<FormDataState>({ email: "", password: "", confirmPassword: "", firstName: "", lastName: "" });
 
     const dispatch = useDispatch<AppDispatch>();
     const navigate = useNavigate();
 
     const handleFormRegisterClick = () => {
-        console.log('Register Function Called Line 7 RegisterForm.tsx');
         formData.firstName = formData.firstName.trim();
         formData.lastName = formData.lastName.trim();
         // Validation Starts
@@ -48,7 +46,6 @@ function RegisterForm() {
 
 
         // Register API Call
-        console.log('Register API Call');
         console.dir(formData);
 
         axios.post(`${import.meta.env.VITE_BASE_URI}/api/auth/signup`, { firstName: formData.firstName, lastName: formData.lastName, email: formData.email, password: formData.password }, {
@@ -59,10 +56,8 @@ function RegisterForm() {
             }
         })
             .then((res) => {
-                console.log(res.status, "Response Status Line 42 RegisterForm.tsx");
                 if (res.status === 201) {
 
-                    console.log(res, "line 58");
                     toast.dismiss();
                     // dispatch(updateUser({ ...res.data, authorized: true, accessToken: res.headers.authorization }));
                     // dispatch(updateUser({ ...res.data, authorized: true }));
@@ -71,7 +66,6 @@ function RegisterForm() {
             })
             .catch((err) => {
                 if (err.status === 409) {
-                    console.log('User Already Exists');
                     toast.dismiss();
                     toast.error("User Already Exists", {
                         position: "top-center",
@@ -85,7 +79,6 @@ function RegisterForm() {
                         transition: Bounce,
                     });
                 } else {
-                    console.log('Some Error Occurred');
                     toast.dismiss();
                     toast.error("Some Error Occurred", {
                         position: "top-center",

src/components/client/DocumentPages.tsx

@@ -1,32 +1,40 @@
-import React from 'react'
-import { MdKeyboardArrowDown } from 'react-icons/md';
+import React, { useState } from 'react'
+import { MdKeyboardArrowDown, MdOutlineNavigateNext } from 'react-icons/md';
+import { DocumentType } from './SignDocument';
+import { GrFormPrevious } from 'react-icons/gr';
 
 interface DocumentPagesInterface {
-    selectedDocuments: DocumentType[];
+    selectedDocuments: DocumentType[] | null;
     setDropDownTogglePage: React.Dispatch<React.SetStateAction<string>>;
     dropDownTogglePage: string;
 }
 
 const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownTogglePage }: DocumentPagesInterface) => {
+
+    const [currentPage, setCurrentPage] = useState(0);
+
     return (
-        <div className='bg-white h-full p-4 overflow-y-auto'>
+        <div className='p-4'>
 
             <div className="flex flex-col gap-2">
                 {selectedDocuments && selectedDocuments.length && selectedDocuments.map((document, indx) => {
-                    return (
+                   return (
                         <div
                             key={indx}
                         // tabIndex={1}
                         // onBlur={() => setDropDownTogglePage('')}
                         >
                             <div
-                                onClick={() => (`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)}
+                                onClick={() => {
+                                    setDropDownTogglePage(`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)
+                                }
+                                }
                                 className={`p-2 ${(dropDownTogglePage === 'pageDropDown' + indx) ? "bg-[var(--primary)]" : "bg-slate-200"} flex flex-col justify-center items-center gap-2 rounded`}>
                                 {
                                     document.pages != undefined && <img
                                         key={indx}
                                         className='rounded-sm shadow'
-                                        src={document.pages[0].src}
+                                        src={"data:image/png;base64," + document.thumbnail}
                                         alt="" />
                                 }
 
@@ -40,15 +48,53 @@ const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownToggl
 
                             {
                                 dropDownTogglePage === 'pageDropDown' + indx &&
-                                <div className='my-1 flex justify-center items-center gap-1 flex-wrap'>
-                                    {document.pages != undefined && document.pages.map((img, indx) => (
-                                        <a
-                                            href={"#" + document.documentId + indx}
-                                            className='max-w-max px-4 py-2 shadow cursor-pointer border-1 rounded-sm border-slate-200 hover:border-[var(--primary)] transition-all duration-300 bg-slate-300'
-                                        >
-                                            <p className='text-center text-xs text-slate-600'>{indx + 1}</p>
-                                        </a>
-                                    ))}
+                                <div className="my-1 flex justify-center items-center gap-2 flex-wrap">
+                                    {/* Prev Button */}
+                                    <a
+                                        href={"#" + document.documentId + (currentPage - 1)}
+                                        className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === 0 ? "pointer-events-none opacity-50" : ""
+                                            }`}
+                                        onClick={(e) => {
+                                            if (currentPage === 0) e.preventDefault();
+                                            else setCurrentPage(currentPage - 1);
+                                        }}
+                                    >
+                                        <GrFormPrevious />
+                                    </a>
+
+                                    {/* Page Selector */}
+                                    <select
+                                        className="w-[58px] py-1 text-xs text-slate-400 outline-none"
+                                        value={currentPage}
+                                        onChange={(e) => {
+                                            const newPage = Number(e.target.value);
+                                            setCurrentPage(newPage);
+                                            window.location.hash = document.documentId + "" + newPage;
+                                        }}
+                                    >
+                                        {document.pages != undefined && document.pages.map((_, pageIndex) => (
+                                            <option key={pageIndex} value={pageIndex}>
+                                                {pageIndex + 1}
+                                            </option>
+                                        ))}
+                                    </select>
+
+                                    <span className="text-xs text-slate-600">
+                                        / {document.pages?.length}
+                                    </span>
+
+                                    {/* Next Button */}
+                                    <a
+                                        href={"#" + document.documentId + (currentPage + 1)}
+                                        className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === document.pages?.length - 1 ? "pointer-events-none opacity-50" : ""
+                                            }`}
+                                        onClick={(e) => {
+                                            if (currentPage === document.pages?.length - 1) e.preventDefault();
+                                            else setCurrentPage(currentPage + 1);
+                                        }}
+                                    >
+                                        <MdOutlineNavigateNext />
+                                    </a>
                                 </div>
                             }
 

src/components/client/SignCompletionScreen.tsx

@@ -0,0 +1,406 @@
+import React, { useState, useEffect } from 'react';
+import {
+    FiDownload,
+    FiCheckCircle,
+    FiZap,
+    FiShield,
+    FiClock,
+    FiFileText,
+    FiX,
+} from 'react-icons/fi';
+import { IoMdArrowRoundBack } from 'react-icons/io';
+import { useParams } from 'react-router-dom';
+import { SignTypeEnum } from '../../utlity/types';
+
+const SignCompletionScreen: React.FC = () => {
+    const { signType } = useParams();
+    const [showDownloadModal, setShowDownloadModal] = useState(false);
+    const [animationPhase, setAnimationPhase] = useState(0);
+
+
+    useEffect(() => {
+        const currentPath = window.location.pathname;
+
+        const handlePopState = (event) => {
+            // Show warning
+            //   alert("Back navigation is blocked on this screen.");
+
+            // Push the current URL back to prevent navigating away
+            window.history.pushState(null, "", currentPath);
+        };
+
+        // Push extra states to build history buffer
+        for (let i = 0; i < 50; i++) {
+            window.history.pushState(null, "", currentPath);
+        }
+
+        // Add popstate listener
+        window.addEventListener("popstate", handlePopState);
+
+        // Cleanup on unmount
+        return () => {
+            window.removeEventListener("popstate", handlePopState);
+        };
+    }, []);
+
+    useEffect(() => {
+        // Trigger animation phases sequentially
+        const timers = [
+            setTimeout(() => setAnimationPhase(1), 200),
+            setTimeout(() => setAnimationPhase(2), 800),
+            setTimeout(() => setAnimationPhase(3), 1400),
+            setTimeout(() => setAnimationPhase(4), 2000),
+        ];
+
+        return () => timers.forEach(clearTimeout);
+    }, []);
+
+    const handleDownload = (format: string) => {
+        console.log(`Downloading document in ${format} format`);
+        const content = `Signed document - ${new Date().toISOString()}`;
+        const blob = new Blob([content], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `signed-document.${format.toLowerCase()}`;
+        a.click();
+        URL.revokeObjectURL(url);
+    };
+
+    return (
+        <div className="min-h-screen w-screen z-1000 bg-gradient-to-br from-slate-100/50 via-blue-100/50 to-slate-300/50 flex items-center justify-center p-4 overflow-hidden absolute top-0 left-0">
+            <style jsx>{`
+        :root {
+          --primary: #3D74B6;
+          --primaryLight: #ffffff;
+          --primaryLight2: #6a92c2;
+          --primaryLight3: #dae9de;
+          --dashBoardBg: #ffffff;
+          --mainViewBg: #edeaeb;
+          --highlightBg1: #edeaeb;
+          --menuTextCol: #98a0a8;
+          --menuTextColActive: #3D74B6;
+          --menuBgColActive: #edeaeb;
+          --menuTextHoverCol: #e7e7e7;
+          --greyTextCol: #98a0a8;
+          --lightGreyCol: #e1e1e1;
+          --compBgCol: #ffffff;
+          --avatarBgCol: #3D74B6;
+          --avatarTextCol: #ffffff;
+          --profileMenuModalBg: #ffffff;
+          --profileMenuModalTextCol: #98a0a8;
+          --profileMenuModalTextColActive: #2d2d2d;
+          --profileMenuModalBgColActive: #edeaeb;
+          --sendForSignTextCol: #ffffff;
+          --sendForSignBgCol: #d02f56;
+          --sendForSignDropDownText: #000000;
+          --sendForSignDropDownBg: #ffffff;
+          --sendForSignDropDownHover: #e7e7e7;
+          --loaderBg: #ffffff;
+          --modalBg: #ffffff;
+          --hideModalBg: #2d2d2d;
+          --processStepOneTextHead: #000000;
+          --modalSubmitBG: #1919d7;
+          --modalSubmitBGHover: #395ee1;
+        }
+
+        .completion-container {
+          animation: fadeInScale 1.2s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        .success-icon {
+          animation: successPulse 2s ease-out infinite;
+        }
+
+        .floating-particles {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+          pointer-events: none;
+        }
+
+        .particle {
+          position: absolute;
+          width: 8px;
+          height: 8px;
+          background: linear-gradient(45deg, var(--primary), var(--primaryLight2));
+          border-radius: 50%;
+          animation: float 6s ease-in-out infinite;
+          opacity: 0.6;
+        }
+
+        .particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 1s; }
+        .particle:nth-child(2) { top: 60%; left: 20%; animation-delay: 2s; }
+        .particle:nth-child(3) { top: 30%; left: 80%; animation-delay: 3s; }
+        .particle:nth-child(4) { top: 80%; left: 70%; animation-delay: 2.5s; }
+        .particle:nth-child(5) { top: 10%; left: 60%; animation-delay: 1.5s; }
+        .particle:nth-child(6) { top: 70%; left: 40%; animation-delay: 3.5s; }
+
+        .premium-glow {
+          box-shadow: 
+            0 0 0 1px rgba(255, 255, 255, 0.1),
+            0 4px 32px rgba(61, 116, 182, 0.15),
+            0 16px 64px rgba(61, 116, 182, 0.1),
+            inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        }
+
+        .premium-card {
+          background: linear-gradient(135deg, 
+            rgba(255, 255, 255, 0.95) 0%, 
+            rgba(255, 255, 255, 0.9) 100%);
+          backdrop-filter: blur(20px);
+          border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+
+        .status-badge {
+          background: linear-gradient(135deg, #10b981, #059669);
+          box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
+        }
+
+        .download-btn-primary {
+          background: linear-gradient(135deg, var(--primary), var(--primaryLight2));
+          box-shadow: 0 8px 24px rgba(61, 116, 182, 0.3);
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .download-btn-primary:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 12px 32px rgba(61, 116, 182, 0.4);
+        }
+
+        .download-btn-secondary {
+          background: rgba(255, 255, 255, 0.8);
+          border: 2px solid rgba(61, 116, 182, 0.2);
+          backdrop-filter: blur(10px);
+          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        .download-btn-secondary:hover {
+          transform: translateY(-2px);
+          background: rgba(255, 255, 255, 0.95);
+          border-color: var(--primary);
+        }
+
+        .modal-backdrop {
+          background: rgba(0, 0, 0, 0.6);
+          backdrop-filter: blur(8px);
+          animation: fadeIn 0.3s ease-out;
+        }
+
+        .modal-content {
+          animation: modalSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+        }
+
+        @keyframes fadeInScale {
+          0% {
+            opacity: 0;
+            transform: scale(0.9) translateY(20px);
+          }
+          100% {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+          }
+        }
+
+       @keyframes successPulse {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 var(--primary);
+  }
+  50% {
+    transform: scale(1.05);
+    box-shadow: 0 0 0 20px rgba(61, 116, 182, 0); /* var(--primary) with 0 alpha */
+  }
+}
+
+
+        @keyframes float {
+          0%, 100% {
+            transform: translateY(0px) rotate(0deg);
+            opacity: 0.6;
+          }
+          50% {
+            transform: translateY(-20px) rotate(180deg);
+            opacity: 1;
+          }
+        }
+
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+
+        @keyframes modalSlideUp {
+          0% {
+            opacity: 0;
+            transform: translateY(50px) scale(0.9);
+          }
+          100% {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+          }
+        }
+
+        .fade-in-up {
+          animation: fadeInUp 0.8s ease-out forwards;
+          opacity: 0;
+        }
+
+        .fade-in-up-delay-1 {
+          animation: fadeInUp 0.8s ease-out 0.3s forwards;
+          opacity: 0;
+        }
+
+        .fade-in-up-delay-2 {
+          animation: fadeInUp 0.8s ease-out 0.6s forwards;
+          opacity: 0;
+        }
+
+        .fade-in-up-delay-3 {
+          animation: fadeInUp 0.8s ease-out 0.9s forwards;
+          opacity: 0;
+        }
+
+        @keyframes fadeInUp {
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+
+        .fade-in-up,
+        .fade-in-up-delay-1,
+        .fade-in-up-delay-2,
+        .fade-in-up-delay-3 {
+          transform: translateY(30px);
+        }
+      `}</style>
+
+            {/* Floating Particles Background */}
+            <div className="floating-particles">
+                <div className="particle"></div>
+                <div className="particle"></div>
+                <div className="particle"></div>
+                <div className="particle"></div>
+                <div className="particle"></div>
+                <div className="particle"></div>
+            </div>
+
+            {/* Main Completion Screen */}
+            <div className="completion-container w-full max-w-[50vw]">
+                <div className="premium-card premium-glow rounded-3xl p-8 text-center relative overflow-hidden">
+
+                    {/* Success Icon */}
+                    <div className="relative mb-4">
+                        <div className="success-icon inline-flex items-center justify-center w-20 h-20 bg-[var(--primary)] rounded-full mb-6">
+                            <FiCheckCircle className="w-12 h-12 text-white" />
+                        </div>
+                        <FiZap className="absolute top-0 right-1/3 w-6 h-6 text-yellow-400 animate-pulse" />
+                        <FiZap className="absolute bottom-2 left-1/3 w-4 h-4 text-yellow-400 animate-pulse" style={{ animationDelay: '0.5s' }} />
+                    </div>
+
+                    {/* Main Success Message */}
+                    <div className={`mb-2 ${animationPhase >= 1 ? 'fade-in-up' : ''}`}>
+                        <h1 className="text-xl font-bold text-gray-900 mb-2">
+                            Signature Complete!
+                        </h1>
+                        <p className="text-md text-gray-600 mb-3">
+                            Your document has been successfully signed.
+                        </p>
+                    </div>
+
+                    {/* Action Buttons */}
+                    <div className='flex justify-between items-center gap-2'>
+                        <button
+                            //   onClick={() => setShowDownloadModal(true)}
+                            className="w-full download-btn-secondary text-gray-400 py-2 px-2 rounded-xl font-medium flex items-center justify-center"
+                        >
+                            <FiDownload className="w-5 h-5 mr-3" />
+                            Download Signed Document
+                        </button>
+                        {signType === SignTypeEnum.selfSign ? <a
+                            href="http://localhost:5173/"
+                            // target="_blank"
+                            rel="noopener noreferrer"
+                            className="w-full download-btn-secondary text-gray-400 py-2 px-2 rounded-xl font-medium flex items-center justify-center"
+                        >
+                            {/* <a> */}
+                            <IoMdArrowRoundBack className="w-5 h-5 mr-3" />
+                            Back to Sign Made Easy
+                            {/* </a> */}
+                        </a> :
+                            <a
+                                href="https://signmadeasy.com/"
+                                // target="_blank"
+                                rel="noopener noreferrer"
+                                className="w-full download-btn-secondary text-gray-400 py-2 px-2 rounded-xl font-medium flex items-center justify-center"
+                            >
+                                {/* <a> */}
+                                <IoMdArrowRoundBack className="w-5 h-5 mr-3" />
+                                Visit Sign Made Easy
+                                {/* </a> */}
+                            </a>
+                        }
+                    </div>
+
+                    {/* Additional Info */}
+                    <div className={`mt-8 pt-3 border-t border-gray-200 border-opacity-50`}>
+                        <p className="text-sm text-gray-500">
+                            Your document is signed and saved. Download it or return to Sign Made Easy to continue — navigation is paused until an action is taken.
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            {/* Premium Download Modal */}
+            {/* {showDownloadModal && (
+        <div className="fixed inset-0 bg-white/60 backdrop-blur-sm bg-opacity-50 flex items-center justify-center p-4 z-50">
+          <div className="modal-content premium-card premium-glow rounded-3xl p-8 w-full max-w-md relative">
+            <button
+              onClick={() => setShowDownloadModal(false)}
+              className="absolute top-6 right-6 p-2 hover:bg-gray-100 rounded-full transition-colors duration-200"
+            >
+              <FiX className="w-5 h-5 text-gray-500" />
+            </button>
+
+            <div className="text-center mb-4">
+              <div className="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full mb-4">
+                <FiDownload className="w-8 h-8 text-white" />
+              </div>
+              <h2 className="text-2xl font-bold text-gray-900 mb-2">Choose Download Format</h2>
+              <p className="text-gray-600">Select your preferred file format</p>
+            </div>
+
+            <div className="space-y-4">
+              <button
+                onClick={() => handleDownload('PDF')}
+                className="w-full download-btn-primary text-white py-4 px-6 rounded-xl font-semibold flex items-center justify-center"
+              >
+                <FiFileText className="w-5 h-5 mr-3" />
+                Download as PDF
+                <span className="ml-auto text-sm opacity-80">Recommended</span>
+              </button>
+              
+              <button
+                onClick={() => handleDownload('DOCX')}
+                className="w-full download-btn-secondary text-gray-700 py-4 px-6 rounded-xl font-semibold flex items-center justify-center"
+              >
+                <FiFileText className="w-5 h-5 mr-3" />
+                Download as DOCX
+              </button>
+            </div>
+
+            <div className="mt-6 pt-6 border-t border-gray-200 border-opacity-50 text-center">
+              <p className="text-xs text-gray-500">
+                Files are automatically encrypted and timestamped
+              </p>
+            </div>
+          </div>
+        </div>
+      )} */}
+        </div>
+    );
+};
+
+export default SignCompletionScreen;

src/components/contacts/Contacts.tsx

@@ -5,12 +5,14 @@ import ContactFormModal, { ContactData } from './ContactsFormModal';
 import { Bounce, toast } from 'react-toastify';
 import { IoMdAdd } from 'react-icons/io';
 import LoaderUi from '../../helper/LoaderUi';
+import logoRecord from '../../assets/record.svg'
 
 type ContactSchema = [{
     id: number,
     firstName: string
     lastName: string
     email: string
+    phone: string
 }]
 
 const Contacts = () => {
@@ -23,7 +25,6 @@ const Contacts = () => {
     const [showModal, setShowModal] = useState(false)
     const [editJsonData, setEditJsonData] = useState({})
     const [actionStatus, setActionStatus] = useState("")
-    console.log("editJsonData", editJsonData)
 
     const fetchContacts = async () => {
         setLoading(true)
@@ -44,7 +45,6 @@ const Contacts = () => {
     }, [activeAccountId]);
 
     const handleEdit = (contactId) => {
-        console.log('Edit contact:', contactId);
         let jsonEditData = contacts.find((prev) => prev.id === contactId)
         setEditJsonData(jsonEditData)
         setActionStatus("Edit")
@@ -53,7 +53,6 @@ const Contacts = () => {
     };
 
     const handleDelete = async (contactId) => {
-        console.log('Delete contact:', contactId);
 
         try {
             let res = await api.delete(`/api/accounts/${activeAccountId}/contacts/${contactId}`)
@@ -120,8 +119,11 @@ const Contacts = () => {
             <div className='px-1.5'>
                 <div className='flex justify-end my-2 cursor-pointer'>
                     <div
-                        onClick={() => setShowModal((prev) => !prev)}
-                        className="flex items-center gap-2 bg-[var(--primary)] px-3 py-1.5 rounded-sm  hover:opacity-90 ">
+                        onClick={() => {
+                            setShowModal((prev) => !prev);
+                            setActionStatus("Add")
+                        }}
+                        className="flex items-center gap-1 bg-gradient-to-br from-[var(--primary)] to-blue-600 px-3 py-1.5 rounded-sm  hover:opacity-90 ">
                         <IoMdAdd className="text-white" />
                         <button
                             className="text-white rounded text-sm hover:opacity-90 cursor-pointer">
@@ -129,46 +131,64 @@ const Contacts = () => {
                         </button>
                     </div>
                 </div>
-                <div className="overflow-y-auto max-h-[79vh] border border-gray-200 rounded shadow-sm  no-scrollbar">
-                    <table className="min-w-full text-sm bg-white">
-                        <thead className="bg-gray-100 text-gray-700 uppercase text-xs tracking-wider sticky top-0 z-10">
+                <div className="overflow-y-auto mx-2 min-h-[76vh] max-h-[76vh] rounded-xl shadow-sm border bg-white border-gray-100 no-scrollbar">
+                    <table className="min-w-full text-sm bg-gray-50">
+                        <thead className="text-gray-600 text-xs uppercase tracking-wider border-b border-gray-200">
                             <tr>
-                                <th className="px-4 py-3 text-left">First Name</th>
-                                <th className="px-4 py-3 text-left">Last Name</th>
-                                <th className="px-4 py-3 text-left">Email</th>
-                                <th className="px-4 py-3 text-center">Actions</th>
+                                <th className="px-6 py-4 font-medium text-left">First Name</th>
+                                <th className="px-6 py-4 font-medium text-left">Last Name</th>
+                                <th className="px-6 py-4 font-medium text-left">Email</th>
+                                <th className="px-6 py-4 font-medium text-center">Actions</th>
                             </tr>
                         </thead>
-                        <tbody className="divide-y divide-gray-200">
+                        <tbody className="divide-y divide-gray-100 bg-white">
                             {loading ? (
                                 <tr>
-                                    <td colSpan="4" className="relative h-100"><LoaderUi/></td>
+                                    <td colSpan="4" className="relative h-100">
+                                        <LoaderUi />
+                                    </td>
                                 </tr>
                             ) : contacts.length === 0 ? (
                                 <tr>
-                                    <td colSpan="4" className="text-center py-4">No contacts found.</td>
+                                    <td colSpan="4" className="text-center py-10 text-gray-500">
+                                        <div className="flex flex-col items-center justify-center">
+                                            <img
+                                                src={logoRecord}
+                                                alt="Record Not Found"
+                                                className="w-70 h-70 mb-4 opacity-70"
+                                            />
+                                        </div>
+                                    </td>
                                 </tr>
                             ) : (
-                                contacts.map((contact) => (
-                                    <tr key={contact.id} className="hover:bg-gray-50">
-                                        <td className="px-4 py-3">{contact.firstName}</td>
-                                        <td className="px-4 py-3">{contact.lastName}</td>
-                                        <td className="px-4 py-3">{contact.email}</td>
-                                        <td className="px-4 py-3 text-center">
+                                contacts.map((contact, index) => (
+                                    <tr
+                                        key={contact.id}
+                                        className="hover:bg-gray-50 transition-colors"
+                                    >
+                                        <td className="px-6 py-4 text-gray-800">{contact.firstName}</td>
+                                        <td className="px-6 py-4 text-gray-800">{contact.lastName}</td>
+                                        <td className="px-6 py-4 text-gray-800">{contact.email}</td>
+                                        <td className="px-6 py-4 text-center">
                                             <div
                                                 className="relative inline-block"
                                                 tabIndex={0}
                                                 onBlur={handleBlur}
                                             >
                                                 <button
-                                                    className="text-gray-600 hover:text-black p-1 focus:outline-none"
+                                                    className="text-gray-400 hover:text-gray-600 p-1 focus:outline-none"
                                                     onClick={() => toggleMenu(contact.id)}
                                                 >
                                                     <FaEllipsisV />
                                                 </button>
 
                                                 {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]">
+                                                    <div
+                                                        className={`absolute mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-20 min-w-[100px] ${contacts.length - 1 === index
+                                                                ? "bottom-1 right-4"
+                                                                : "bottom-0 right-5"
+                                                            }`}
+                                                    >
                                                         <button
                                                             onMouseDown={() => handleEdit(contact.id)}
                                                             className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600"
@@ -190,11 +210,18 @@ const Contacts = () => {
                             )}
                         </tbody>
                     </table>
-                    {showModal &&
-                        <ContactFormModal onSubmit={handleContactSubmit}
-                            loading={createAndInviteLoader} setShowModal={setShowModal} actionStatus={actionStatus} editJsonData={editJsonData} />
-                    }
+
+                    {showModal && (
+                        <ContactFormModal
+                            onSubmit={handleContactSubmit}
+                            loading={createAndInviteLoader}
+                            setShowModal={setShowModal}
+                            actionStatus={actionStatus}
+                            editJsonData={editJsonData}
+                        />
+                    )}
                 </div>
+
             </div>
         </>
     );

src/components/contacts/ContactsFormModal.tsx

@@ -1,272 +1,239 @@
 // ContactForm.tsx
-import React, { useEffect, useState } from 'react';
-import { FaSpinner } from 'react-icons/fa';
+import React, { useEffect, useState } from "react";
+import { FaSpinner } from "react-icons/fa";
 
 export interface ContactData {
-    contactId?: number;
-    email: string;
-    firstName: string;
-    lastName: string;
-    title: string;
-    company: string;
-    website: string;
-    phones: string[];
+  contactId?: number;
+  email: string;
+  firstName: string;
+  lastName: string;
+  title: string;
+  company: string;
+  website: string;
+  phone: string;
 }
 
 interface Props {
-    onSubmit: (data: ContactData) => void;
-    loading: boolean;
-    setShowModal: () => React.Dispatch<React.SetStateAction<boolean>>
-    actionStatus: string,
-    editJsonData: any
+  onSubmit: (data: ContactData) => void;
+  loading: boolean;
+  setShowModal: () => React.Dispatch<React.SetStateAction<boolean>>;
+  actionStatus: string;
+  editJsonData: any;
 }
 
-const ContactFormModal = ({ onSubmit, loading, setShowModal, actionStatus, editJsonData }: Props) => {
-    const [formData, setFormData] = useState<ContactData>({
-        email: '',
-        firstName: '',
-        lastName: '',
-        title: '',
-        company: '',
-        website: '',
-        phones: [''],
-    });
+const ContactFormModal = ({
+  onSubmit,
+  loading,
+  setShowModal,
+  actionStatus,
+  editJsonData,
+}: Props) => {
+  const [formData, setFormData] = useState<ContactData>({
+    email: "",
+    firstName: "",
+    lastName: "",
+    title: "",
+    company: "",
+    website: "",
+    phone: "",
+  });
 
-    const [errors, setErrors] = useState<{ [key: string]: string }>({});
+  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])
+  useEffect(() => {
+    if (actionStatus === "Edit" && editJsonData) {
+      setFormData({
+        email: editJsonData.email,
+        firstName: editJsonData.firstName,
+        lastName: editJsonData.lastName,
+        title: editJsonData.title,
+        company: editJsonData.company,
+        website: editJsonData.website,
+        phone: editJsonData.phone,
+      });
+    }
+  }, [actionStatus, editJsonData]);
 
+  const handleChange = (field: keyof ContactData, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    if (errors[field]) {
+      setErrors((prev) => ({ ...prev, [field]: "" }));
+    }
+  };
 
-    const handleChange = (field: keyof ContactData, value: string) => {
-        setFormData((prev) => ({ ...prev, [field]: value }));
-        if (errors[field]) {
-            setErrors((prev) => ({ ...prev, [field]: '' }));
-        }
-    };
+//   const handlePhoneChange = (index: number, value: string) => {
+//     const numericValue = value.replace(/\D/g, ""); // Remove non-numeric
+//     const updatedPhones = [...formData.phone];
+//     updatedPhones[index] = numericValue;
+//     setFormData((prev) => ({ ...prev, phones: updatedPhones }));
 
-    const handlePhoneChange = (index: number, value: string) => {
-        const numericValue = value.replace(/\D/g, ''); // Remove non-numeric
-        const updatedPhones = [...formData.phones];
-        updatedPhones[index] = numericValue;
-        setFormData((prev) => ({ ...prev, phones: updatedPhones }));
+//     const errorKey = `phones_${index}`;
+//     if (errors[errorKey]) {
+//       setErrors((prev) => ({ ...prev, [errorKey]: "" }));
+//     }
+//   };
 
-        const errorKey = `phones_${index}`;
-        if (errors[errorKey]) {
-            setErrors((prev) => ({ ...prev, [errorKey]: '' }));
-        }
-    };
+  // const addPhoneField = () => {
+  //     setFormData((prev) => ({ ...prev, phone: [...prev.phone, ''] }));
+  // };
 
+  // const removePhoneField = (index: number) => {
+  //     const updatedPhones = formData.phones.filter((_, i) => i !== index);
+  //     setFormData((prev) => ({ ...prev, phones: updatedPhones }));
+  // };
 
-    const addPhoneField = () => {
-        setFormData((prev) => ({ ...prev, phones: [...prev.phones, ''] }));
-    };
+  const validate = () => {
+    const newErrors: { [key: string]: string } = {};
 
-    const removePhoneField = (index: number) => {
-        const updatedPhones = formData.phones.filter((_, i) => i !== index);
-        setFormData((prev) => ({ ...prev, phones: updatedPhones }));
-    };
+    const emailRegex = /\S+@\S+\.\S+/;
+    // const nameRegex = /^[a-zA-Z\s\-']+$/;
+    const urlRegex = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/.*)?$/;
+    const phoneRegex =
+      /^\+?\d{1,4}?[-.\s]?\(?\d{2,5}\)?[-.\s]?\d{3,5}[-.\s]?\d{3,5}$/;
 
-    const validate = () => {
-        const newErrors: { [key: string]: string } = {};
+    // Email
+    if (!formData.email.trim()) {
+      newErrors.email = "Email is required";
+    } else if (!emailRegex.test(formData.email)) {
+      newErrors.email = "Invalid email address";
+    }
 
-        const nameRegex = /^[a-zA-Z\s\-']+$/;
-        const urlRegex = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/.*)?$/;
-        const phoneRegex = /^\d+$/;
+    // // First Name
+    // if (!formData.firstName.trim()) {
+    //     newErrors.firstName = 'First name is required';
+    // } else
+    // if (formData.firstName.trim() && !nameRegex.test(formData.firstName)) {
+    //   newErrors.firstName = "First name contains invalid characters";
+    // }
 
-        // Email
-        if (!formData.email.trim()) {
-            newErrors.email = 'Email is required';
-        } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
-            newErrors.email = 'Invalid email address';
-        }
+    // Last Name
+    if (!formData.lastName.trim()) {
+      newErrors.lastName = "Last name is required";
+    } 
+    // else if (!nameRegex.test(formData.lastName)) {
+    //   newErrors.lastName = "Last name contains invalid characters";
+    // }
 
-        // // First Name
-        // if (!formData.firstName.trim()) {
-        //     newErrors.firstName = 'First name is required';
-        // } else if (!nameRegex.test(formData.firstName)) {
-        //     newErrors.firstName = 'First name contains invalid characters';
-        // }
+    // // Title
+    // if (!formData.title.trim()) {
+    //     newErrors.title = 'Title is required';
+    // }
 
-        // Last Name
-        if (!formData.lastName.trim()) {
-            newErrors.lastName = 'Last name is required';
-        } else if (!nameRegex.test(formData.lastName)) {
-            newErrors.lastName = 'Last name contains invalid characters';
-        }
+    // Website (optional but validate if present)
+    if (formData.website.trim() && !urlRegex.test(formData.website)) {
+      newErrors.website = "Invalid website URL";
+    }
 
-        // // Title
-        // if (!formData.title.trim()) {
-        //     newErrors.title = 'Title is required';
-        // }
+    // Phone
+    if (formData.phone.trim() && !phoneRegex.test(formData.phone)) {
+      newErrors.phone = "Phone number must contain only digits";
+    }
+    return newErrors;
+  };
 
+  const handleSubmit = async () => {
+    const validationErrors = validate();
+    let type = "Add";
+    let payload = formData;
 
-        // Website (optional but validate if present)
-        if (formData.website.trim() && !urlRegex.test(formData.website)) {
-            newErrors.website = 'Invalid website URL';
-        }
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors);
+      return;
+    }
+    try {
+      if (actionStatus === "Edit") {
+        type = "Edit";
+        payload = {
+          ...formData,
+          contactId: editJsonData.id,
+        };
+      }
+      await onSubmit(payload, type);
 
-        // Phones
-        // formData.phones.forEach((phone, index) => {
-        //     if (!phone.trim()) {
-        //         newErrors[`phones_${index}`] = 'Phone number is required';
-        //     } else if (!phoneRegex.test(phone)) {
-        //         newErrors[`phones_${index}`] = 'Phone number must contain only digits';
-        //     }
-        // });
-
-        return newErrors;
-    };
-
-
-    const handleSubmit = async () => {
-        const validationErrors = validate();
-        let type = 'Add'
-        let payload = formData
-        if (Object.keys(validationErrors).length > 0) {
-            setErrors(validationErrors);
-            return;
-        }
-        try {
-            if (actionStatus === 'Edit') {
-                type = 'Edit'
-                payload = {
-                    ...formData,
-                    contactId: editJsonData.id
-                }
-            }
-            await onSubmit(payload, type);
-
-
-            setFormData({
-                email: '',
-                firstName: '',
-                lastName: '',
-                title: '',
-                company: '',
-                website: '',
-                phones: [''],
-            });
-            setErrors({});
-        } catch (err) {
-            console.error('Submit failed:', err);
-        }
-    };
-
-
-    return (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-white/5 backdrop-blur-sm bg-opacity-50">
-            <div className="bg-white rounded-md p-6 max-w-[700px] w-full shadow-lg relative">
-                <div className="ms-2 space-y-2 max-w-[60vw]">
-                    <h2 className="text-lg font-medium text-slate-500">Add Contact</h2>
-
-                    <div className="grid grid-cols-2 gap-3">
-                        {[
-                            { label: 'First Name', field: 'firstName' },
-                            { label: 'Last Name', field: 'lastName' },
-                            { label: 'Email', field: 'email' },
-                            { label: 'Title', field: 'title' },
-                            { label: 'Company', field: 'company' },
-                            { label: 'Website', field: 'website' },
-                        ].map(({ label, field }) => (
-                            <div key={field} className="flex flex-col">
-                                <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) || ''}
-                                    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"
-                                    placeholder={`Enter ${label}`}
-                                />
-                                {errors[field] && <span className="text-sm text-red-500 mt-1">{errors[field]}</span>}
-                            </div>
-                        ))}
-                    </div>
-
-                    <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) => (
-                                <div key={index} className="flex flex-col gap-1">
-                                    <div className="flex items-center gap-2">
-                                        <input
-                                            type="text"
-                                            value={phone}
-                                            onChange={(e) => handlePhoneChange(index, e.target.value)}
-                                            className="flex-1 px-3 py-1.5 border border-gray-400 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--primary)] text-sm"
-                                            maxLength={15}
-                                            placeholder='Enter Phone Numbers'
-                                        />
-                                        {formData.phones.length > 1 && (
-                                            <button
-                                                type="button"
-                                                onClick={() => removePhoneField(index)}
-                                                className="text-xs text-red-500 hover:underline"
-                                            >
-                                                Remove
-                                            </button>
-                                        )}
-                                    </div>
-                                    {errors[`phones_${index}`] && (
-                                        <span className="text-sm text-red-500">{errors[`phones_${index}`]}</span>
-                                    )}
-                                </div>
-                            ))}
-
-                            <button
-                                type="button"
-                                onClick={addPhoneField}
-                                className="text-sm text-blue-500 hover:underline mt-1 cursor-pointer"
-                            >
-                                + Add another phone
-                            </button>
-                        </div>
-                    </div>
-
-                    <div className="flex justify-end">
-                        <button
-                            type="button"
-                            onClick={() => setShowModal((prev) => !prev)}
-                            disabled={loading}
-                            className="bg-gray-300 px-5 py-1.5 rounded-md text-slate-700 text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer me-3"
-                        > Cancel
-                        </button>
-                        <button
-                            type="button"
-                            onClick={handleSubmit}
-                            disabled={loading}
-                            className="bg-gray-300 px-5 py-1.5 rounded-md text-slate-700 text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
-                        >
-                            {loading ? (
-                                <>
-                                    <FaSpinner className="animate-spin inline-block mr-2" />
-                                    SAVING...
-                                </>
-                            ) : (
-                                `${actionStatus?.toUpperCase() || 'SAVE'} CONTACT`
-                            )}
-
-                        </button>
+      setFormData({
+        email: "",
+        firstName: "",
+        lastName: "",
+        title: "",
+        company: "",
+        website: "",
+        phone: "",
+      });
+      setErrors({});
+    } catch (err) {
+      console.error("Submit failed:", err);
+    }
+  };
 
 
 
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm bg-black/30 bg-opacity-50 p-4 sm:p-6">
+  <div className="bg-white rounded-md p-6 max-w-[700px] w-full sm:max-w-[700px] shadow-lg relative overflow-auto max-h-[90vh]">
+    <div className="space-y-4">
+      <h2 className="text-lg font-medium text-slate-500">{`${actionStatus} Contact`}</h2>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {[
+          { label: "First Name", field: "firstName" },
+          { label: "Last Name", field: "lastName" },
+          { label: "Email", field: "email", fieldType: "email" },
+          { label: "Title", field: "title" },
+          { label: "Company", field: "company" },
+          { label: "Website", field: "website", fieldType: "url" },
+          { label: "Phone", field: "phone", fieldType: "tel" },
+        ].map(({ label, field, fieldType }) => (
+          <div key={field} className="flex flex-col">
+            <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">
+              {label}
+            </label>
+            <input
+              type={fieldType ?? "text"}
+              value={(formData[field as keyof ContactData] as string) || ""}
+              onChange={(e) =>
+                handleChange(field as keyof ContactData, e.target.value)
+              }
+              required
+              className="px-3 py-1.5 border border-gray-400 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--primary)] text-sm"
+              placeholder={`Enter ${label}`}
+            />
+            {errors[field] && (
+              <span className="text-sm text-red-500 mt-1">{errors[field]}</span>
+            )}
+          </div>
+        ))}
+      </div>
+
+      <div className="flex flex-col sm:flex-row justify-end gap-3 mt-4">
+        <button
+          type="button"
+          onClick={() => setShowModal((prev) => !prev)}
+          disabled={loading}
+          className="bg-gray-300 px-5 py-1.5 rounded-md text-slate-700 text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={handleSubmit}
+          disabled={loading}
+          className="bg-gradient-to-br from-[var(--primary)] to-blue-600 px-5 py-1.5 rounded-md text-white text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
+        >
+          {loading ? (
+            <>
+              <FaSpinner className="animate-spin inline-block mr-2" />
+              SAVING...
+            </>
+          ) : (
+            `${actionStatus?.toUpperCase() || "SAVE"} CONTACT`
+          )}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+  );
 };
 
 export default ContactFormModal;

src/components/dashboard/Dashboard.tsx

@@ -1,3 +1,4 @@
+// Dashboard.jsx - Updated version
 import React, { useEffect, useLayoutEffect } from 'react'
 import SideBar from './SideBar'
 import { Outlet, useNavigate } from 'react-router-dom'
@@ -22,6 +23,7 @@ import CommonNav from '../CommonNav'
 function Dashboard() {
     const [showSideBar, setShowSideBar] = React.useState(true)
     const [showConfetti, setShowConfetti] = React.useState(false)
+    const [isMobile, setIsMobile] = React.useState(false)
     const navigate = useNavigate();
     const dispatch = useDispatch();
 
@@ -45,7 +47,7 @@ function Dashboard() {
 
         // Clear all if transaction success
         if (transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_FAILURE) {
-            console.log("IN MIC CHECK");
+           
             dispatch(resetSelDoc())
             dispatch(resetSelRecipient())
             dispatch(clearTransaction())
@@ -74,8 +76,6 @@ function Dashboard() {
         }
     }, [])
 
-
-
     useEffect(() => {
         if (transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED) return;
 
@@ -86,13 +86,11 @@ function Dashboard() {
 
         if (documentSignType && transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_NOT_INITIATED) {
             if (documentSignType === 'self-sign') {
-                console.log('Self Sign');
                 setTimeout(() => {
                     navigate('/process-step-one');
                 }, 1000)
                 return
             } else if (documentSignType === 'multiple-sign') {
-                console.log('multiple-sign');
                 setTimeout(() => {
                     navigate('/process-step-one');
                 }, 1000)
@@ -102,35 +100,55 @@ function Dashboard() {
         dispatch(hideLoader());
     }, [documentSignType])
 
+    useEffect(() => {
+        if (showConfetti) {
+            const duration = 3000;
+            const end = Date.now() + duration;
 
-        useEffect(() => {
-            if (showConfetti) {
-                const duration = 3000;
-                const end = Date.now() + duration;
+            const interval = setInterval(() => {
+                if (Date.now() > end) {
+                    clearInterval(interval);
+                    return;
+                }
 
-                const interval = setInterval(() => {
-                    if (Date.now() > end) {
-                        clearInterval(interval);
-                        return;
-                    }
+                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)
+                    origin: {
+                        x: Math.random(),
+                        y: Math.random() * 0.6,
+                    },
+                    zIndex: 9999,
+                });
+            }, 350); // fire every 150ms
+        }
+    }, [showConfetti]);
 
-                    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)
-                        origin: {
-                            x: Math.random(),
-                            y: Math.random() * 0.6,
-                        },
-                        zIndex: 9999,
-                    });
-                }, 350); // fire every 150ms
+    useEffect(() => {
+        // Function to handle window resize
+        const handleResize = () => {
+            const mobile = window.innerWidth <= 768;
+            setIsMobile(mobile);
+            
+            if (mobile) {
+                setShowSideBar(false); // hide sidebar on mobile by default
+            } else {
+                setShowSideBar(true); // show sidebar on desktop
             }
-        }, [showConfetti]);
+        };
 
+        // Set sidebar visibility on mount
+        handleResize();
 
+        // Add event listener
+        window.addEventListener('resize', handleResize);
+
+        // Cleanup listener on unmount
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
 
     return (
         <>
@@ -165,19 +183,44 @@ function Dashboard() {
             {
                 user?.authorized &&
                 <div className={`relative`}>
-                    {/* Complet DashBoard Back Side SideBar */}
+                    {/* Mobile Overlay when sidebar is open */}
+                    {isMobile && showSideBar && (
+                        <div 
+                            className="fixed inset-0 bg-black/30 bg-opacity-50 z-40"
+                            onClick={() => setShowSideBar(false)}
+                        />
+                    )}
+
+                    {/* Complete Dashboard Back Side SideBar */}
                     <div className={`relative w-full h-screen overflow-hidden bg-[var(--dashBoardBg)] ${(globalLoader.isLoading || globalModalIsOpen) ? 'pointer-events-none' : ''}`}>
 
-                        <SideBar showSideBar={showSideBar} setShowSideBar={setShowSideBar} />
+                        <SideBar 
+                            showSideBar={showSideBar} 
+                            setShowSideBar={setShowSideBar}
+                            isMobile={isMobile}
+                        />
 
                         {/* On Top Main Content - START */}
-                        <div className={`overflow-y-auto absolute ${showSideBar ? 'w-[calc(100%-250px)]' : 'w-[calc(100%-60px)]'} h-full right-0 bottom-0 overflow-hidden bg-[var(--mainViewBg)] transition-all duration-300`}>
+                        <div
+                            className={`overflow-y-auto absolute no-scrollbar h-full right-0 bottom-0 overflow-hidden bg-[var(--mainViewBg)]`}
+                            style={{
+                                width: !isMobile 
+                                    ? (showSideBar ? 'calc(100% - 250px)' : 'calc(100% - 60px)')
+                                    : '100%', // Full width on mobile
+                                transition: 'width 0.6s ease'
+                            }}
+                        >
                             {/* Main Content */}
-                            <div className='px-2 py-1.5'>
-                                <CommonNav />
+                            <div>
+                                <CommonNav 
+                                    showSideBar={showSideBar}
+                                    setShowSideBar={setShowSideBar}
+                                    isMobile={isMobile}
+                                />
                                 <Outlet />
                             </div>
                         </div>
+
                         {/* On Top Main Content - END */}
                     </div>
 

src/components/dashboard/Loader.tsx

@@ -14,7 +14,7 @@ const Loader = () => {
             <div className="z-50 absolute w-screen h-screen flex items-center justify-center bg-[var(--hideModalBg)] opacity-60"></div>
 
             {/* Loader */}
-            <div className="absolute z-50 w-screen h-screen flex items-center justify-center">
+            <div className="absolute z-50 w-screen h-screen flex items-center justify-center backdrop-blur-sm bg-opacity-50 bg-black/30">
                 <div className='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>

src/components/dashboard/NavLink.tsx

@@ -22,6 +22,7 @@ interface NavLinkProps {
 // }
 
 const NavLink: React.FC<NavLinkProps> = ({ to, icon, label, showSideBar, menuPathMap }) => {
+
   const location = useLocation();
   const isActive = menuPathMap[location.pathname] === label;
 
@@ -32,7 +33,7 @@ const NavLink: React.FC<NavLinkProps> = ({ to, icon, label, showSideBar, menuPat
 
       <Link
         to={to}
-        className={`${isActive ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--menuTextCol)]'} 
+        className={`${isActive ? 'text-[var(--menuTextColActive)] bg-[var(--menuBgColActive)]' : 'text-[var(--sidebarMenuCol)]'} 
       p-2 rounded-md flex justify-left gap-2 items-center transition-all duration-300 ${showSideBar ? 'text-lg' : 'text-lg max-w-max'}`}
       >
         {icon}

src/components/dashboard/SendForSign.tsx

@@ -12,6 +12,7 @@ import { setTransactionId, TRANSACTION_STATUS_ENUMS, updateTransactionStatus } f
 import { SignTypeEnum } from '../../utlity/types';
 // import { IoMdArrowDropright } from "react-icons/io";
 
+
 interface Props {
     showSideBar: boolean;
 }
@@ -76,52 +77,97 @@ const SendForSign: React.FC<Props> = ({ showSideBar }) => {
     // }
 
     return (
-        <div 
-        id='send-for-sign-self-sign-btn'
-        className='relative max-h-max pb-3'
+        <div
+            id='send-for-sign-self-sign-btn'
+            className='relative max-h-max pb-3'
             tabIndex={0}
             ref={dropDownRef}
             onBlur={() => setSendForSignDropdown(false)}
         >
-            <div
-                className={`flex justify-between items-center gap-2 cursor-pointer bg-[var(--primary)] rounded text-[var(--sendForSignTextCol)] ${showSideBar ? "" : "pt-[0.4rem] pr-[0.6rem] pb-[0.4rem] pl-[0.2rem]"}`}>
-                <div 
-                onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}
-                className={`w-full`}>
+            {/* <div
+                className={`flex justify-between items-center gap-2 cursor-pointer bg-[var(--sidebarDropDownBg)] rounded text-[var(--sendForSignTextCol)] ${showSideBar ? "" : "pt-[0.4rem] pr-[0.6rem] pb-[0.4rem] pl-[0.2rem]"}`}>
+                <div
+                    onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}
+                    className={`w-full`}>
                     {
                         showSideBar ?
-                            <p 
-                            className='text-center text-sm'>Send for signature</p>
+                            <p
+                                className='text-center text-sm'>Send for signature</p>
                             :
                             <IoIosSend className={`pl-2 text-3xl`} />
                     }
                 </div>
+                
                 {showSideBar &&
                     <p
-                        className='border-l-1 border-[var(--sendForSignTextCol)] px-2 py-2'>
+                        className=' border-[var(--sendForSignTextCol)] pe-2 py-2'>
                         <IoMdArrowDropdown
                             onClick={() => setSendForSignDropdown(!sendForSignDropdown)}
                             className={`text-2xl ${sendForSignDropdown ? 'rotate-180' : ''} transition-all duration-150`} />
                     </p>}
+            </div> */}
+
+
+            <div
+                className={`flex items-center gap-0.5 cursor-pointer text-[var(--sendForSignTextCol)]`}
+            >
+                <div
+                    onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}
+                    className={`
+                            flex items-center justify-center 
+                            bg-[var(--sidebarDropDownBg)] 
+                            text-center 
+                            px-2 py-2.5 
+                            overflow-hidden 
+                            transition-all duration-300 ease-in-out w-full
+                            ${showSideBar ? "rounded-l" : "rounded"}
+                            `}
+                            style={{ whiteSpace: "nowrap" }}
+                >
+                    {showSideBar ? (
+                        <p className="text-sm select-none">Send for signature</p>
+                    ) : (
+                        <IoIosSend className="text-2xl" />
+                    )}
+                </div>
+
+                {showSideBar && (
+                    <div
+                        className="rounded-r btn px-2 py-2 bg-[var(--sidebarDropDownBg)] transition-all duration-300 ease-in-out flex items-center justify-center"
+                        style={{ opacity: showSideBar ? 1 : 0 }}
+                    >
+                        <IoMdArrowDropdown
+                            onClick={() => setSendForSignDropdown(!sendForSignDropdown)}
+                            className={`text-2xl transition-transform duration-150 ${sendForSignDropdown ? "rotate-180" : ""
+                                }`}
+                        />
+                    </div>
+                )}
             </div>
 
+
             {/* Drop Down Box */}
             {
                 sendForSignDropdown &&
-                <div className={`w-[300px] rounded absolute z-40 bg-[var(--sendForSignDropDownBg)] shadow-lg top-[54px] text-left outline-none`}>
-                    <div className='py-3 px-8 leading-6 rounded-t-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer'
-                        onClick={() => handleStartSectionClick(SignTypeEnum.selfSign)}>
-                        <p>Self Sign</p>
-                        <p className='text-[var(--greyTextCol)] text-sm'>You're the only signer.</p>
+                <div className={`w-[220px] sm:w-[260px] lg:w-[250px] rounded absolute z-40 bg-[var(--sendForSignDropDownBg)] shadow-lg top-[52px] text-left outline-none`}>
+                    <div
+                        className='py-2 px-6 leading-5 rounded-t-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer'
+                        onClick={() => handleStartSectionClick(SignTypeEnum.selfSign)}
+                    >
+                        <p className='text-sm sm:text-base'>Self Sign</p>
+                        <p className='text-[var(--greyTextCol)] text-xs sm:text-sm'>You're the only signer.</p>
                     </div>
                     <div className='w-full h-[1px] opacity-30 bg-[var(--greyTextCol)]'></div>
-                    <div className='py-3 px-8 leading-6 rounded-b-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer'
-                        onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}>
-                        <p>Send for Sign</p>
-                        <p className='text-[var(--greyTextCol)] text-sm'>You and other need to sign.</p>
+                    <div
+                        className='py-2 px-6 leading-5 rounded-b-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer'
+                        onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}
+                    >
+                        <p className='text-sm sm:text-base'>Send for Sign</p>
+                        <p className='text-[var(--greyTextCol)] text-xs sm:text-sm'>You and other need to sign.</p>
                     </div>
                 </div>
             }
+
         </div>
     )
 }

src/components/dashboard/SideBar.tsx

@@ -1,3 +1,4 @@
+// SideBar.jsx - Updated version
 import React, { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import NavLink from './NavLink';
@@ -11,10 +12,12 @@ import { IoSettingsOutline } from "react-icons/io5";
 import axios from 'axios';
 import { MdManageAccounts } from 'react-icons/md';
 import { GrContactInfo, GrTransaction } from 'react-icons/gr';
+import logoSME from '../../assets/SMELogo.png'
 
 type SideBarProps = {
     showSideBar: boolean;
     setShowSideBar: React.Dispatch<React.SetStateAction<boolean>>;
+    isMobile?: boolean;
 };
 
 type MenuPathMap = {
@@ -24,12 +27,12 @@ type MenuPathMap = {
 const menuPathMap: MenuPathMap = {
     '/': 'Home',
     '/templates': 'Templates',
-    '/s/contact': 'Contact',
     // '/accounts': 'Accounts',
-    'transactions' : "Account"
+    '/transactions': 'Transactions',
+    '/contacts': 'Contacts'
 };
 
-const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
+const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar, isMobile = false }) => {
     const location = useLocation();
     const [showLogoutModal, setShowLogoutModal] = useState(false);
 
@@ -53,21 +56,31 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
     return (
         <>
             {/* Side Bar */}
-            <div className={`relative h-screen ${showSideBar ? 'w-[250px]' : 'w-[60px]'} transition-all duration-300 bg-white shadow-md`}>
+            <div className={`
+                ${isMobile ? 'fixed left-0 top-0 z-50' : 'relative'} 
+                h-screen 
+                ${isMobile 
+                    ? (showSideBar ? 'w-[250px] translate-x-0' :  'hidden -translate-x-full') 
+                    : (showSideBar ? 'w-[250px]' : 'w-[60px]')
+                } 
+                transition-all duration-600 
+                bg-[var(--sidebarBg)] 
+                shadow-md
+            `}>
                 {/* Menu */}
                 <div className={`absolute top-0 ${showSideBar ? 'p-4' : 'py-4'} w-full max-h-max ${showSideBar ? '' : 'text-center'}`}>
                     <h1 className='w-full text-lg text-center tracking-widest font-medium text-gray-800'>
-                        {showSideBar ? 'Sign Made Easy' : 'SME'}
+                        {showSideBar ? <img src={logoSME} loading='lazy' className='h-7 ms-6' /> : <p className='text-white'>SME</p>}
                     </h1>
 
-                    <div 
-                    id="nav-link-dash"
-                    className={`flex flex-col mt-4 ${showSideBar ? '' : 'items-center'}`}>
+                    <div
+                        id="nav-link-dash"
+                        className={`flex flex-col mt-4 ${showSideBar ? '' : 'items-center'}`}>
                         <SendForSign showSideBar={showSideBar} />
                         <NavLink to="/" icon={<FaHome />} label="Home" showSideBar={showSideBar} menuPathMap={menuPathMap} />
                         <NavLink to="/templates" icon={<HiTemplate />} label="Templates" showSideBar={showSideBar} menuPathMap={menuPathMap} />
                         {/* <NavLink to="/accounts" icon={<MdManageAccounts />} label="Accounts" showSideBar={showSideBar} menuPathMap={menuPathMap} /> */}
-                        <NavLink to="transactions" icon={<GrTransaction />} label="Transactions" showSideBar={showSideBar} menuPathMap={menuPathMap} />
+                        <NavLink to="/transactions" icon={<GrTransaction />} label="Transactions" showSideBar={showSideBar} menuPathMap={menuPathMap} />
                         <NavLink to="/contacts" icon={<GrContactInfo />} label="Contacts" showSideBar={showSideBar} menuPathMap={menuPathMap} />
                     </div>
                 </div>
@@ -75,10 +88,27 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
                 {/* SideBar Toggle Button */}
                 <div
                     onClick={() => setShowSideBar(!showSideBar)}
-                    className='absolute top-[100%] translate-y-[-100%] right-0 bg-[var(--highlightBg1)] p-2 rounded-tl-sm rounded-bl-sm cursor-pointer transition-colors'
+                    className={`
+                        absolute top-[95%] translate-y-[-60%] 
+                        ${isMobile 
+                            ? (showSideBar ? 'right-2' : 'right-2') 
+                            : 'right-0 top-[100%] translate-y-[-100%]'
+                        } 
+                        bg-[var(--dashBoardBg)] p-1 
+                        ${isMobile 
+                            ? 'rounded-md' 
+                            : (showSideBar ? 'rounded-tl-sm rounded-bl-sm' : 'rounded-tl-sm rounded-bl-sm')
+                        } 
+                        cursor-pointer transition-colors
+                    `}
                 >
-                    <div className='absolute top-[-14px] right-0 w-[14px] h-[14px] rounded-full bg-white shadow-[5px_5px_0px_0px_rgba(237,234,235,1)]'></div>
-                    <div className='absolute bottom-[-14px] right-0 w-[14px] h-[14px] rounded-full bg-white shadow-[5px_-5px_0px_0px_rgba(237,234,235,1)]'></div>
+                    {!isMobile && (
+                        <>
+                            <div className='absolute top-[-14px] right-0 w-[14px] h-[14px] rounded-full shadow-[5px_5px_0px_0px_rgba(255,255,255,1)]'></div>
+                            <div className='absolute bottom-[-14px] right-0 w-[14px] h-[14px] rounded-full shadow-[5px_-5px_0px_0px_rgba(255,255,255,1)]'></div>
+                        </>
+                    )}
+
                     {showSideBar ? (
                         <BsLayoutSidebarInsetReverse className='fill-[var(--primary)] hover:text-[var(--primary)] transition-all text-2xl' />
                     ) : (
@@ -90,7 +120,7 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
                 <div className='absolute bottom-14 right-0 flex flex-col gap-1'>
                     <button
                         onClick={() => setShowLogoutModal(true)}
-                        className='flex items-center gap-2 px-3 py-2 text-gray-600 hover:bg-red-50 hover:text-red-600 rounded-l-sm transition-all duration-200 group'
+                        className='flex items-center gap-2 px-3 py-2 text-[var(--sidebarMenuCol)] hover:bg-red-50 hover:text-red-600 rounded-l-sm transition-all duration-200 group'
                         title="Log out"
                     >
                         <RiLogoutBoxLine className="text-xl group-hover:scale-110 transition-transform" />
@@ -99,7 +129,7 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
 
                     <Link
                         to="/s/settings"
-                        className='flex items-center gap-2 px-3 py-2 text-gray-600 hover:bg-blue-50 hover:text-blue-600 rounded-l-sm transition-all duration-200 group'
+                        className='flex items-center gap-2 px-3 py-2 text-[var(--sidebarMenuCol)] hover:bg-blue-50 hover:text-blue-600 rounded-l-sm transition-all duration-200 group'
                         title="Settings"
                     >
                         <IoSettingsOutline className="text-xl group-hover:scale-110 transition-transform" />
@@ -111,7 +141,7 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
             {/* Logout Confirmation Modal */}
             {showLogoutModal && (
                 <div className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50">
-                    <div className="bg-white rounded-lg shadow-xl p-6 w-80">
+                    <div className="bg-white rounded-lg shadow-xl p-4 sm:p-6 w-70 sm:w-40 lg:w-80">
                         <h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Logout</h3>
                         <p className="text-gray-600 mb-6">Are you sure you want to log out?</p>
                         <div className="flex justify-end gap-3">

src/components/home/Cards.tsx

@@ -204,78 +204,47 @@ const Cards: React.FC<CardsProps> = ({ type = 'dashboard', onOpenModal, onDateRa
   // }
 
   return (
-    <div className="w-full px-4 py-3 mt-2 rounded-md">
-      {/* Header */}
-      <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between mb-2 gap-4">
-        <div className="flex items-center gap-3">
-          {/* <div className="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
-            <FaFilter className="text-white text-lg" />
-          </div> */}
-          <div>
-            <h2 className="text-lg font-semibold text-gray-800">Overview</h2>
-            {/* <p className="text-gray-600 text-sm">Monitor performance metrics</p> */}
-          </div>
-        </div>
-
-        
-      </div>
-
-      {/* Cards */}
-      {isLoading ? <div className="w-full [h-50vh] px-6 py-8">
-        <div className="animate-pulse">
-          <div className="h-8 bg-gray-200 rounded w-32 mb-8"></div>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
-            {[...Array(7)].map((_, i) => (
-              <div key={i} className="h-32 bg-gray-200 rounded-xl"></div>
-            ))}
-          </div>
-        </div>
-      </div> :
-        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
-          {cards.map((card, index) => (
-            <div
-              key={card.title}
-              className={`group relative overflow-hidden rounded-xl ${card.gradient} border border-white/40 p-4 transition-all duration-300 hover:scale-105 hover:shadow-lg ${card.shadowColor} cursor-pointer backdrop-blur-sm`}
-              style={{
-                animationDelay: `${index * 100}ms`
-              }}
-            >
-              {/* Background Pattern */}
-              <div className="absolute inset-0 opacity-5">
-                <div className="absolute -top-6 -right-6 w-12 h-12 rounded-full bg-current"></div>
-                <div className="absolute -bottom-6 -left-6 w-10 h-10 rounded-full bg-current"></div>
-              </div>
-
-              {/* Content */}
-              <div className="relative z-10">
-                <div className="flex items-center justify-between mb-2">
-                  <div className={`p-2 rounded-lg border ${card.iconBg} group-hover:scale-110 transition-transform duration-200`}>
-                    {card.icon}
-                  </div>
-                  {renderTrendIndicator(card.trend, card.percentage)}
-                </div>
-
-                <div className="space-y-1">
-                  <h3 className="text-xs font-medium text-gray-600 group-hover:text-gray-700 transition-colors">
-                    {card.title}
-                  </h3>
-                  <div className="flex items-baseline gap-1">
-                    <p className={`text-xl font-bold ${card.textColor} group-hover:scale-105 transition-transform duration-200`}>
-                      {card.count}
-                    </p>
-                    <span className="text-[10px] text-gray-500">items</span>
-                  </div>
-                </div>
-              </div>
-
-              {/* Hover Effect */}
-              <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
-            </div>
+    <div className="w-full">
+  {/* Cards */}
+  {isLoading ? (
+    <div className="w-full h-[10vh] px-6 py-3">
+      <div className="animate-pulse">
+        {/* <div className="h-8 bg-gray-200 rounded w-32 mb-8"></div> */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
+          {[...Array(4)].map((_, i) => (
+            <div key={i} className="h-10 bg-gray-200 border border-gray-100"></div>
           ))}
         </div>
-
-      }
+      </div>
     </div>
+  ) : (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
+      {cards.map((card, index) => (
+        <div
+          key={card.title}
+          className="flex items-center justify-between border border-gray-200 bg-white px-4 py-1.5 hover:shadow-md transition-all duration-300 cursor-pointer"
+          style={{
+            animationDelay: `${index * 100}ms`,
+          }}
+        >
+          {/* Left side: Icon + Title */}
+          <div className="flex items-center gap-3">
+            <div className={`p-2 rounded-lg ${card.iconBg}`}>
+              {card.icon}
+            </div>
+            <h3 className="text-xs font-medium text-gray-600">{card.title}</h3>
+          </div>
+
+          {/* Count */}
+          <p className={`text-sm font-bold ${card.textColor}`}>
+            {card.count}
+          </p>
+        </div>
+      ))}
+    </div>
+  )}
+</div>
+
   );
 };
 

src/components/home/Home.tsx

@@ -3,17 +3,7 @@ import AccountNav from '../accounts/AccountNav';
 import Cards from './Cards';
 import StartSection from './StartSection';
 import api from '../../config/api';
-import {
-    FaCheckCircle,
-    FaClock,
-    FaHourglassHalf,
-    FaTasks,
-    FaChevronDown,
-    FaPlus,
-    FaUserPlus,
-    FaFilter,
-    FaCalendarAlt
-} from 'react-icons/fa';
+import { FiFileText, FiClock, FiAlertTriangle, FiCheckCircle } from "react-icons/fi";
 import { useSelector } from 'react-redux';
 import { RootState } from '../../store/store';
 
@@ -33,44 +23,40 @@ const Home = () => {
     const mapApiDataToCards = (data: any): CardData[] => {
         return [
             {
-                title: 'Action Needed',
+                title: "Action Required",
                 count: data.actionNeeded || 0,
-                icon: <FaTasks size={18} className="text-indigo-600" />,
-                gradient: 'bg-gradient-to-br from-indigo-50 to-indigo-100',
-                shadowColor: 'shadow-indigo-200/50',
-                iconBg: 'bg-indigo-100 border-indigo-200',
-                textColor: 'text-indigo-700',
-                trend: 'up'
+                icon: <FiFileText className="w-5 h-5 text-sky-500" />,
+                iconBg: "bg-sky-100 border-sky-200",
+                textColor: "text-sky-600",
+                gradient: "bg-white",
+                shadowColor: "shadow-sky-100",
             },
             {
-                title: 'Expiring Soon',
+                title: "Waiting for Response",
+                count: data.waitingForOthers || 0,
+                icon: <FiClock className="w-5 h-5 text-yellow-500" />,
+                iconBg: "bg-yellow-100 border-yellow-200",
+                textColor: "text-yellow-600",
+                gradient: "bg-white",
+                shadowColor: "shadow-yellow-100",
+            },
+            {
+                title: "Expiring Soon",
                 count: data.expiring || 0,
-                icon: <FaHourglassHalf size={18} className="text-rose-600" />,
-                gradient: 'bg-gradient-to-br from-rose-50 to-rose-100',
-                shadowColor: 'shadow-rose-200/50',
-                iconBg: 'bg-rose-100 border-rose-200',
-                textColor: 'text-rose-700',
-                trend: 'up'
+                icon: <FiAlertTriangle className="w-5 h-5 text-red-500" />,
+                iconBg: "bg-red-100 border-red-200",
+                textColor: "text-red-600",
+                gradient: "bg-white",
+                shadowColor: "shadow-red-100",
             },
             {
-                title: 'Completed',
+                title: "Completed",
                 count: data.completed || 0,
-                icon: <FaCheckCircle size={18} className="text-teal-600" />,
-                gradient: 'bg-gradient-to-br from-teal-50 to-teal-100',
-                shadowColor: 'shadow-teal-200/50',
-                iconBg: 'bg-teal-100 border-teal-200',
-                textColor: 'text-teal-700',
-                trend: 'up'
-            },
-            {
-                title: 'Draft',
-                count: data.draft || 0,
-                icon: <FaClock size={18} className="text-stone-600" />,
-                gradient: 'bg-gradient-to-br from-blue-50 to-blue-100',
-                shadowColor: 'shadow-blue-200/50',
-                iconBg: 'bg-blue-100 border-blue-200',
-                textColor: 'text-blue-700',
-                trend: 'down'
+                icon: <FiCheckCircle className="w-5 h-5 text-green-500" />,
+                iconBg: "bg-green-100 border-green-200",
+                textColor: "text-green-600",
+                gradient: "bg-white",
+                shadowColor: "shadow-green-100",
             },
         ];
     };
@@ -84,14 +70,11 @@ 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);
+    const userData = useSelector((state: RootState) => state.user);
 
     const getDashboardData = async () => {
         if (!activeAccountId) return;
-        
+
         setIsLoading(true);
         const payload = {
             account: activeAccountId
@@ -100,7 +83,7 @@ const Home = () => {
         try {
             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);
             setCards(cardDataArray);
         } catch (error) {

src/components/home/ShowDocs.tsx

@@ -28,13 +28,9 @@ const ShowDocs = () => {
         );
     };
 
-    console.log(selectedDocs, "selectedDocsselectedDocs")
-    console.log(selectedDocs.length, "LENGTHselectedDocs")
-
     // Handle button click to update Redux state
     const handleUpdateSelectedDocs = () => {
         const selectedDocuments = documents.filter((doc) => selectedDocs.includes(doc.id));
-        console.log(selectedDocuments, "selected Document Line 34 ShowDocs.tsx")
         dispatch(updateSelectedDocuments({ documents: selectedDocuments }));
     };
 

src/components/home/StartNow.tsx

@@ -1,12 +1,13 @@
 import { useRef, useState } from 'react';
 import { FiUpload } from 'react-icons/fi'
-import { uploadDocuments } from '../../store/slices/documentSlice';
+import { resetDocuments, uploadDocuments } from '../../store/slices/documentSlice';
 import { useDispatch, useSelector } from 'react-redux';
 import { toast } from 'react-toastify';
 import { useNavigate } from 'react-router-dom';
 import { RootState } from '../../store/store';
 import api from '../../config/api';
 
+
 const StartNow = () => {
     const fileInputRef = useRef<HTMLInputElement>(null);
     const [files, setFiles] = useState<File[]>([]);
@@ -23,7 +24,10 @@ const StartNow = () => {
         const transactionId = transactionRes.data.id
 
         const formData = new FormData();
-        formData.append("file", filesToUpload[0]);
+
+        filesToUpload.forEach(file => {
+            formData.append("file", file);
+        });
 
         dispatch(uploadDocuments({ formData, accountId, transactionId }))
             .unwrap()
@@ -37,7 +41,8 @@ const StartNow = () => {
             });
     };
 
-    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+       await dispatch(resetDocuments())
         const selectedFiles = e.target.files ? Array.from(e.target.files) : [];
         if (selectedFiles.length > 0) {
             setFiles((prev) => [...prev, ...selectedFiles]);
@@ -50,7 +55,7 @@ const StartNow = () => {
             <div
                 onClick={() => fileInputRef.current?.click()}
                 id='start-now-upload-con'
-                className="group cursor-pointer border-slate-300 rounded-lg bg-white/60 transition-all duration-200 p-4 flex flex-col items-center justify-center gap-2 text-center shadow-sm hover:shadow-md">
+                className="group col-span-1 cursor-pointer border-2 border-dashed border-slate-300 rounded-lg bg-[var(--documentUploadBg)] transition-all duration-200 p-4 flex flex-col items-center justify-center gap-2 text-center shadow-sm hover:shadow-md">
                 {/* Upload icon with subtle animation */}
                 <div className="p-2 text-blue-600 group-hover:text-blue-700 transition-colors">
                     <FiUpload className="text-lg" />
@@ -62,7 +67,7 @@ const StartNow = () => {
                 </p>
 
                 <button
-                    className="mt-1 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded shadow-xs transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-blue-400"
+                    className="mt-1 text-sm font-medium text-white bg-gradient-to-br from-[var(--primary)] to-blue-600 hover:bg-blue-700 px-3 py-1 rounded shadow-xs transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-blue-400 cursor-pointer"
                 >
                     Start Now
                 </button>

src/components/home/StartSection.tsx

@@ -10,6 +10,7 @@ import { Transaction, TransactionResponse } from '../transactions/Transactions';
 import TransactionsTable from '../transactions/TransactionsTable';
 import TransactionDataTable from '../accounts/TransactionDataTable';
 import StartNow from './StartNow';
+import TemplateTable from '../templates/TemplateTable';
 
 
 export interface StartCard {
@@ -28,16 +29,17 @@ const cards = [
     //     buttonText: 'Start Now',
     //     bg: 'bg-white/60',
     // },
-    {
-        icon: <FiEdit className="w-5 h-5 text-green-700" />,
-        title: 'Sign an Agreement',
-        description: 'Upload a document you need to sign and place your signature.',
-        bg: 'bg-white/60',
-    },
+    // {
+    //     icon: <FiEdit className="w-5 h-5 text-green-700" />,
+    //     title: 'Sign an Agreement',
+    //     description: 'Upload a document you need to sign and place your signature.',
+    //     bg: 'bg-white/60',
+    // },
     {
         icon: <FiFolder className="w-5 h-5 text-purple-700" />,
         title: 'Use a Template',
         description: 'Pick from ready-made templates for common agreements.',
+        link: "/templates",
         bg: 'bg-white/60',
     },
 ];
@@ -45,6 +47,9 @@ const cards = [
 const StartSection = () => {
     const navigate = useNavigate();
     const dispatch = useDispatch<AppDispatch>()
+    const [activeAccountId, setActiveAccountId] = useState<string | null>(
+        JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
+    );
 
     const user = useSelector((state: RootState) => state.user);
     if (!user.account || user.account === null) {
@@ -54,19 +59,19 @@ const StartSection = () => {
 
     const defaultAccountId = user.account.id;
 
-    const handleStartSectionClick = (card: StartCard) => {
-        if ("buttonText" in card && card.buttonText === "Start Now") {
-            api.post(`/api/accounts/${defaultAccountId}/transactions`)
-                .then(res => {
-                    if (res.status === 200 || res.status === 201) {
-                        dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED));
-                        dispatch(setTransactionId(res.data));
-                        setTimeout(() => navigate(`/process-step-one/${defaultAccountId}/${res.data.id}`), 0)
-                    }
-                })
-                .catch(err => console.log(err))
-        }
-        // navigate("/process-step-one");
+    const handleStartSectionClick = (link: string) => {
+        // if ("buttonText" in card && card.buttonText === "Start Now") {
+        //     api.post(`/api/accounts/${defaultAccountId}/transactions`)
+        //         .then(res => {
+        //             if (res.status === 200 || res.status === 201) {
+        //                 dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED));
+        //                 dispatch(setTransactionId(res.data));
+        //                 setTimeout(() => navigate(`/process-step-one/${defaultAccountId}/${res.data.id}`), 0)
+        //             }
+        //         })
+        //         .catch(err => console.log(err))
+        // }
+        navigate(link);
     }
 
     // useEffect(() => {
@@ -79,58 +84,57 @@ const StartSection = () => {
     //     }
     // }, [])
 
+
+
+    // Listen for sessionStorage changes
+    useEffect(() => {
+        const handleStorageChange = (e: StorageEvent) => {
+            if (e.key === 'activeAccountId') {
+                const newActiveAccountId = e.newValue ? JSON.parse(e.newValue) : null;
+                setActiveAccountId(newActiveAccountId);
+            }
+        };
+
+        // Listen for storage events (works for changes from other tabs)
+        window.addEventListener('storage', handleStorageChange);
+
+        // Custom event listener for same-tab changes
+        const handleCustomStorageChange = (e: CustomEvent) => {
+            if (e.detail.key === 'activeAccountId') {
+                setActiveAccountId(e.detail.newValue);
+            }
+        };
+
+        window.addEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
+
+        return () => {
+            window.removeEventListener('storage', handleStorageChange);
+            window.removeEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
+        };
+    }, []);
+
     return (
-        <section className="px-4 pt-2 pb-3 w-full">
-            <h2 className="text-lg font-semibold text-gray-800 mb-2">Get Started</h2>
-
-            <div className="grid grid-cols-3 gap-4">
+        <section className="px-3 py-2 w-full mt-2">
+            <h2 className="text-sm font-semibold text-gray-800 px-1 pb-2">
+                Upload Document
+            </h2>
 
+            {/* Upload card */}
+            <div className="w-full">
                 <StartNow />
-
-                <div className='col-span-2 grid grid-cols-2 justify-between gap-4'>
-                    {cards.map((card, index) => (
-                        <div
-                            onClick={() => handleStartSectionClick(card)}
-                            key={index}
-                            className={`${card.bg} w-full max-h-max cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all flex flex-col justify-between`}
-                        >
-                            {/* Icon + Text */}
-                            <div className="flex flex-col gap-3">
-                                <div className="w-9 h-9 flex items-center justify-center border border-gray-200 rounded-md bg-white">
-                                    {card.icon}
-                                </div>
-
-                                <h3 className="text-base font-medium text-gray-900">{card.title}</h3>
-                                <p className="text-sm text-gray-700">{card.description}</p>
-                            </div>
-
-                            {/* Bottom Area */}
-                            <div className="flex items-center justify-between mt-2">
-                                {card.buttonText ? (
-                                    <button className="text-sm cursor-pointer font-medium text-white bg-gradient-to-r from-blue-600 to-blue-500 px-4 py-2 rounded-md shadow hover:opacity-90 transition">
-                                        {card.buttonText}
-                                    </button>
-                                ) : (
-                                    <div />
-                                )}
-
-                                <FiArrowRight className="w-4 h-4 text-gray-500" />
-                            </div>
-                        </div>
-                    ))}
-                </div>
-
             </div>
 
-            <section className='pt-2 pb-3'>
-                <h2 className="mt-3 text-lg font-semibold text-gray-800 mb-2">Recent Activities</h2>
-                <section>
-                    <TransactionDataTable />
+            {/* Recent Data Section */}
+            <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-2 mt-5">
+                <section className="w-full">
+                    <TransactionDataTable activeAccountId={activeAccountId}/>
                 </section>
-            </section>
-
-
+                {/* <section className="w-full">
+                    <TemplateTable />
+                </section> */}
+            </div>
         </section>
+
     );
 };
 

src/components/home/UploadDoc.tsx

@@ -37,7 +37,6 @@ const UploadDoc: React.FC = () => {
         dispatch(uploadDocuments(formData))
             .unwrap()
             .then((res) => {
-                console.log("Documents uploaded", res);
                 // toast.dismiss();
                 // toast.info("📄 Documents uploaded!", {
                 //     position: "bottom-right",

src/components/process/CompletionScreen/DocumentCompletionScreen.tsx

@@ -1,27 +1,40 @@
-import React, { useEffect } from "react";
+import React, { useState, useEffect } from 'react';
 import {
+    FaArrowLeft,
     FaCheck,
-    FaFileAlt,
+    FaExternalLinkAlt,
+    FaEye,
+    FaEyeSlash,
+    FaRedo,
+    FaImage,
     FaUsers,
+    FaFileAlt,
     FaEnvelope,
-    FaClock,
+    FaCog,
+    FaShieldAlt,
+    FaBell,
     FaDownload,
     FaShare,
-    FaShieldAlt,
-    FaLock,
-    FaPen,
-    FaCheckCircle
+    FaEdit,
+    FaSave,
+    FaClock,
+    FaLock
 } from 'react-icons/fa';
+
+import { RootState } from '../../../store/store';
+
+import api from '../../../config/api';
 import { fetchRecipients } from "../../../store/slices/selectedRecipientsSlice";
 import { fetchDocuments } from "../../../store/slices/documentSlice";
 import { useDispatch, useSelector } from "react-redux";
-import { Link, useNavigate, useParams } from "react-router-dom";
+import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
 import Loader from "../../dashboard/Loader";
 import confetti from 'canvas-confetti'
 import { IoClose } from "react-icons/io5";
 import { IoMdClose, IoMdHome } from "react-icons/io";
 import { Bounce, toast } from "react-toastify";
 
+
 type Signer = {
     id: number;
     name: string;
@@ -33,47 +46,47 @@ type Signer = {
 // Signers List Component
 const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
     return (
-        <div className="bg-white/60 rounded-md shadow-sm border border-gray-100">
-            <div className="p-6">
-                <div className="flex items-center justify-between mb-4">
-                    <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
-                        <FaUsers className="text-blue-600" />
-                        Signature Status
-                    </h3>
-                    <span className="text-sm text-gray-600">
-                        {signers.filter(s => s.completed).length} of {signers.length} signed
-                    </span>
-                </div>
+        // <div className="bg-white/60 rounded-md shadow-sm border border-gray-100 ">
+        <div className="p-2 ">
+            <div className="flex items-center justify-evenly mb-1">
+                <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2 ">
+                    <FaUsers className="text-blue-600" />
+                    Signature Status
+                </h3>
+                <span className="text-sm text-gray-600">
+                    {signers.filter(s => s.completed).length} of {signers.length} signed
+                </span>
+            </div>
 
-                <div className="space-y-3 max-h-[29vh] overflow-y-auto no-scrollbar">
-                    {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.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>
-                                <div className="text-sm text-gray-600">{signer.email}</div>
-                                <div className="text-xs text-gray-500">Order: {signer.routingOrder}</div>
-                            </div>
-                            <div className="flex items-center gap-2">
-                                {signer.completed ? (
-                                    <div className="flex items-center gap-1 px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">
-                                        <FaCheck className="w-3 h-3" />
-                                        Signed
-                                    </div>
-                                ) : (
-                                    <div className="flex items-center gap-1 px-3 py-1 bg-orange-100 text-orange-700 rounded-full text-sm">
-                                        <FaClock className="w-3 h-3" />
-                                        Pending
-                                    </div>
-                                )}
-                            </div>
+            <div className="space-y-3 max-h-[24vh] overflow-y-auto no-scrollbar">
+                {signers.map((signer) => (
+                    <div key={signer.id} className="text-xs mx-auto flex items-center gap-4 p-3 w-[70vh] bg-gradient-to-br from-gray-50 to-blue-100 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.length > 2 ? signer.name.split(" ").map(n => n[0].toUpperCase()).join("") : signer.email.split("").map(n => n[0].toUpperCase()).join("")}
                         </div>
-                    ))}
-                </div>
+                        <div className="flex-1">
+                            <div className="font-medium text-gray-800">{signer.name}</div>
+                            <div className="text-xs text-gray-600">{signer.email}</div>
+                            <div className="text-xs text-gray-500">Order: {signer.routingOrder}</div>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            {signer.completed ? (
+                                <div className="flex items-center gap-1 px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs">
+                                    <FaCheck className="w-3 h-3" />
+                                    Signed
+                                </div>
+                            ) : (
+                                <div className="flex items-center gap-1 px-3 py-1 bg-orange-100 text-orange-700 rounded-full text-xs">
+                                    <FaClock className="w-3 h-3" />
+                                    Pending
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                ))}
             </div>
         </div>
+        // </div>
     );
 };
 
@@ -108,99 +121,86 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
         ) || -1;
 
     return (
-        <div className="bg-white/60 rounded-md shadow-sm border border-gray-100">
-            <div className="p-6">
-                <h3 className="text-lg font-semibold text-gray-800 mb-4">Signing Flow</h3>
-                <div className="overflow-x-auto overflow-y-auto h-[69vh] no-scrollbar flex justify-center items-center">
-                    <div className="flex justify-center items-center gap-4 min-w-max">
-                        {/* Mail icon */}
-                        <div className="flex flex-col items-center">
-                            <div className="bg-blue-100 p-4 rounded-full">
-                                <FaEnvelope className="text-blue-600 text-2xl" />
-                            </div>
-                            <p className="text-sm text-gray-600 mt-2">Sent</p>
+        // <div className="bg-white/60 rounded-md shadow-sm border border-gray-100">
+        <div className="py-3">
+            <h3 className="text-lg font-semibold text-gray-800 mb-1 text-center ">
+                Signing Flow</h3>
+            <div className="overflow-x-auto overflow-y-auto h-[18vh] no-scrollbar flex justify-center items-center">
+                <div className="flex justify-center items-center gap-2 min-w-max">
+                    {/* Mail icon */}
+                    <div className="flex flex-col items-center">
+                        <div className="bg-blue-100 p-4 rounded-full">
+                            <FaEnvelope className="text-blue-600 text-2xl" />
                         </div>
+                        <p className="text-sm text-gray-600 mt-2">Sent</p>
+                    </div>
 
-                        {/* Dotted line */}
-                        <div className="flex items-center mb-3">
-                            <div className="w-16 border-t-2 border-dotted border-gray-300"></div>
-                        </div>
+                    {/* Dotted line */}
+                    <div className="flex items-center mb-3">
+                        <div className="w-16 border-t-2 border-dotted border-gray-300"></div>
+                    </div>
 
-                        {/* Signers by routing order */}
-                        <div className="flex items-center justify-center space-x-6">
-                            {sortedOrders.map((order, index) => (
-                                <React.Fragment key={order}>
-                                    <div className="flex flex-col items-center space-y-4 mb-4">
-                                        <div className="text-sm font-medium text-gray-600 mb-2">
-                                            Step {order}
-                                        </div>
-                                        <div className="flex flex-col items-center space-y-3">
-                                            {grouped[order].map((signer) => {
-                                                let bgColor = "";
-                                                let icon = null;
-
-                                                if (signer.completed) {
-                                                    bgColor = "bg-[var(--primary)]";
-                                                    icon = <FaCheck className="text-green-600" />;
-                                                } else if (order === currentProcessingOrder) {
-                                                    bgColor = "bg-yellow-500";
-                                                    icon = <FaClock className="text-yellow-800" />;
-                                                } else {
-                                                    bgColor = "bg-gray-400";
-                                                    icon = <FaLock className="text-gray-500" />;
-                                                }
-
-                                                return (
-                                                    <div key={signer.id} className="relative">
-                                                        <div
-                                                            className={`w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-semibold ${bgColor}`}
-                                                            title={signer.name}
-                                                        >
-                                                            {getInitials(signer.name)}
-                                                            <span className="absolute bottom-[-4px] right-[-8px] p-1 rounded-full bg-white shadow">
-                                                                {icon}
-                                                            </span>
-                                                        </div>
-                                                        <p className="mt-1 text-xs text-gray-600 text-center max-w-16 truncate">
-                                                            {signer.name.split(" ")[0]}
-                                                        </p>
-                                                    </div>
-                                                );
-                                            })}
-                                        </div>
+                    {/* Signers by routing order */}
+                    <div className="flex items-center justify-center space-x-6">
+                        {sortedOrders.map((order, index) => (
+                            <React.Fragment key={order}>
+                                <div className="flex flex-col items-center space-y-4 mb-4">
+                                    <div className="text-sm font-medium text-gray-600 mb-2">
+                                        Step {order}
                                     </div>
+                                    <div className="flex flex-col items-center space-y-3">
+                                        {grouped[order].map((signer) => {
+                                            let bgColor = "";
+                                            let icon = null;
 
-                                    {index < sortedOrders.length - 1 && (
-                                        <div className="flex items-center">
-                                            <div className="w-16 border-t-2 border-dotted border-gray-300"></div>
-                                        </div>
-                                    )}
-                                </React.Fragment>
-                            ))}
-                        </div>
+                                            if (signer.completed) {
+                                                bgColor = "bg-[var(--primary)]";
+                                                icon = <FaCheck className="text-green-600" />;
+                                            } else if (order === currentProcessingOrder) {
+                                                bgColor = "bg-yellow-500";
+                                                icon = <FaClock className="text-yellow-800" />;
+                                            } else {
+                                                bgColor = "bg-gray-400";
+                                                icon = <FaLock className="text-gray-500" />;
+                                            }
+
+                                            return (
+                                                <div key={signer.id} className="relative">
+                                                    <div
+                                                        className={`w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-semibold ${bgColor}`}
+                                                        title={signer.name}
+                                                    >
+                                                        {getInitials(signer.name)}
+                                                        <span className="absolute bottom-[-4px] right-[-8px] p-1 rounded-full bg-white shadow">
+                                                            {icon}
+                                                        </span>
+                                                    </div>
+                                                    <p className="mt-1 text-xs text-gray-600 text-center max-w-16 truncate">
+                                                        {signer.name.split(" ")[0] || signer.firstName.split(0, 1)}
+                                                    </p>
+                                                </div>
+                                            );
+                                        })}
+                                    </div>
+                                </div>
+
+                                {index < sortedOrders.length - 1 && (
+                                    <div className="flex items-center">
+                                        <div className="w-16 border-t-2 border-dotted border-gray-300"></div>
+                                    </div>
+                                )}
+                            </React.Fragment>
+                        ))}
                     </div>
                 </div>
             </div>
         </div>
+        // </div>
     );
 };
-
-// Main DocumentCompletionScreen Component
-const DocumentCompletionScreen = () => {
-    const documentList = [
-        { title: 'Document 1', pages: 12 },
-        { title: 'Document 2', pages: 8 },
-        { title: 'Document 3', pages: 5 },
-        { title: 'Document 4', pages: 22 },
-        { title: 'Document 5', pages: 10 },
-        { title: 'Document 6', pages: 15 },
-        { title: 'Document 7', pages: 7 },
-        { title: 'Document 8', pages: 9 },
-        { title: 'Document 9', pages: 6 },
-        { title: 'Document 10', pages: 11 },
-        { title: 'Document 11', pages: 4 }, // Won't be shown due to slice
-    ];
-
+const DocumentSubmissionOptions = () => {
+    const location = useLocation();
+    const [status, setStatus] = useState(null);
     const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
     const [showConfetti, setShowConfetti] = React.useState(true)
     if (!accountId || !transactionId) {
@@ -215,6 +215,7 @@ const DocumentCompletionScreen = () => {
     const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
     // const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
     const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
+    const [transactionData, setTransactionData] = useState({})
 
 
     useEffect(() => {
@@ -264,94 +265,290 @@ const DocumentCompletionScreen = () => {
         }
     }, [showConfetti]);
 
+    // Step 1: Fetch transaction status
+    useEffect(() => {
+        const fetchTransaction = async () => {
+            // /api/accounts/{accountId}/transactions/{trxId}
+            try {
+                const res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}`);
+                if (res?.data) {
+                    setStatus(res?.data?.status);
+                    setTransactionData(res?.data)
+                }
+            } catch (error) {
+                console.error("Failed to fetch transaction:", error);
+            }
+        };
+
+        if (accountId && transactionId) {
+            fetchTransaction();
+        }
+    }, [accountId, transactionId]);
+
+    // Step 2: Prevent browser back when status === 'SENT'
+    useEffect(() => {
+        if (status === "SENT") {
+
+            const currentPath = window.location.pathname;
+
+            const handlePopState = (event) => {
+                // Show warning
+                alert("Back navigation is blocked on this screen.");
+
+                // Push the current URL back to prevent navigating away
+                window.history.pushState(null, "", currentPath);
+            };
+
+            // Push extra states to build history buffer
+            for (let i = 0; i < 50; i++) {
+                window.history.pushState(null, "", currentPath);
+            }
+
+            // Add popstate listener
+            window.addEventListener("popstate", handlePopState);
+
+            // Cleanup on unmount
+            return () => {
+                window.removeEventListener("popstate", handlePopState);
+            };
+        }
+    }, [status]);
+
+
+    //     useEffect(() => {
+    //     if (status === 'SENT') {
+    //       // Step 1: Push a dummy state to trap the user
+    //       window.history.pushState(null, '', window.location.href);
+
+    //       // Step 2: Intercept back button
+    //       const handlePopState = (event) => {
+    //         // Push the same dummy state again to block back
+    //         window.history.pushState(null, '', window.location.href);
+    //       };
+
+    //       window.addEventListener('popstate', handlePopState);
+
+    //       return () => {
+    //         window.removeEventListener('popstate', handlePopState);
+    //       };
+    //     }
+    //   }, [status]);
+    const [selectedOption, setSelectedOption] = useState('success');
+    const [isVisible, setIsVisible] = useState(false);
+    const [previewData, setPreviewData] = useState({
+        documentName: "Contract Agreement.pdf",
+        submissionCount: 1,
+        signerName: "Sumit Kumar",
+        signerEmail: "sumit.kumar@hicglobalsolutions.com",
+        submissionTime: new Date().toLocaleString()
+    });
+
+    useEffect(() => {
+        setIsVisible(true);
+    }, []);
+
+    const options = [
+        {
+            id: 'success',
+            icon: FaCheck,
+            title: 'Success screen',
+            description: 'Display confirmation message after successful document submission',
+            color: 'bg-green-50 border-green-200 hover:bg-green-100',
+            iconColor: 'text-green-600',
+            isPremium: false
+        },
+        {
+            id: 'redirect',
+            icon: FaExternalLinkAlt,
+            title: 'Signing Flow',
+            description: 'Navigate user to view their transaction details',
+            color: 'bg-blue-50 border-blue-200 hover:bg-blue-100',
+            iconColor: 'text-blue-600',
+            isPremium: true
+        },
+        {
+            id: 'public',
+            icon: FaEye,
+            title: 'Signature status',
+            description: 'Show transaction status on public dashboard',
+            color: 'bg-purple-50 border-purple-200 hover:bg-purple-100',
+            iconColor: 'text-purple-600',
+            isPremium: true
+        },
+    ];
+
+    const getPreviewContent = () => {
+        switch (selectedOption) {
+            case 'success':
+                return (
+                    <div className="text-center space-y-6">
+                        <div className="w-24 h-24 bg-gradient-to-br from-teal-500 to-green-400 rounded-full flex items-center justify-center mt-6 mx-auto shadow-lg animate-bounce">
+                            <FaCheck className="text-white text-4xl" />
+                        </div>
+                        <div>
+                            <h3 className="text-2xl font-bold text-gray-800 mb-2">Document Send Successfully!</h3>
+                            {selectedDocuments?.map((docs) => (
+                                <p className="text-gray-600">Your document "{docs.name}" has been sent for signature.</p>
+                            ))}
+                        </div>
+                        <div className="bg-gray-50 rounded-lg p-4 space-y-2">
+                            <div className="flex justify-between text-sm">
+                                <span className="text-gray-500">createdBy:</span>
+                                <span className="font-medium">{transactionData?.createdBy?.name}</span>
+                            </div>
+                            <div className="flex justify-between text-sm">
+                                <span className="text-gray-500">Email:</span>
+                                <span className="font-medium">{transactionData?.createdBy?.email}</span>
+                            </div>
+                            <div className="flex justify-between text-sm">
+                                <span className="text-gray-500">createdAt:</span>
+                                <span className="font-medium">{transactionData.createdAt}</span>
+                            </div>
+                        </div>
+                    </div>
+                );
+            case 'redirect':
+                return (
+                    <>
+
+                        <SigningOrderDiagram signers={selectedRecipients} />
+                    </>
+                );
+            case 'public':
+                return (
+                    <>
+                        <SignersList signers={selectedRecipients} />
+                    </>
+                );
+            default:
+                return null;
+        }
+    };
+
 
 
     return (
-        <>
-            <div className="min-h-screen bg-[var(--mainViewBg)]">
-                {/* Top Banner */}
-                <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>
-                        <p className="text-base font-normal text-gray-700 border-l pl-4">🎉 Awesome! The document’s been sent for signature. 🎉</p>
-                    </div>
+        <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
+            <div className="flex items-center space-x-4 mb-3 bg-white w-full py-4 px-5 shadow">
+                <Link to={'/'} className="flex items-center space-x-2 text-gray-600 hover:text-[var(--primary)] transition-colors duration-200 group">
+                    <IoMdHome
+                        className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition'
+                    />
+                </Link>
+                <div className="h-8 w-px bg-gray-300"></div>
+                <h1 className="text-md text-gray-800">🎉 Awesome! The document’s been sent for signature. 🎉</h1>
+            </div>
+            <div className={`max-w-4xl mx-auto transition-all  bg-white rounded-lg duration-700 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}>
 
-                    <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>
+                {/* Header */}
 
 
+                {/* <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 max-w-5xl mx-auto">
+                    <div className="space-y-6 ">
 
+                  
+                        <div className="bg-white rounded-xl shadow-sm border border-gray-200 min-h-[81vh] ">
+                            <div className="p-6">
+                                <h3 className="text-lg font-semibold text-gray-800 mb-4">
+                                    Choose an action after a signer completes the document.
+                                </h3>
+                                <div className="space-y-3">
+                                    {options.map((option) => {
+                                        const Icon = option.icon;
+                                        const isSelected = selectedOption === option.id;
 
-                {(selectedRecipients.length > 0 && selectedDocuments.length > 0) ?
-                    <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">
-                                {/* Left Section - Document Details */}
-                                <div className="lg:col-span-6 space-y-2">
-                                    {/* Document Preview Card */}
-                                    <div className="bg-white/60 rounded-md shadow-sm border border-gray-100 overflow-hidden max-h-[88vh] no-scrollbar overflow-y-auto">
-                                        <div className="p-3 ">
-                                            {selectedDocuments?.map((item, index) => (
-                                                <div key={item.id} className="flex items-start justify-between mb-2 px-2 py-3">
-                                                    <div className="flex items-center gap-4">
-                                                        <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
-                                                            {/* <FaFileAlt className="text-blue-600 text-xl" /> */}
-                                                            <img src={item.pages[0].src} alt="document" className="h-10 w-10" />
-                                                        </div>
-                                                        <div>
-                                                            <h3 className="text-md font-semibold text-gray-800">
-                                                                Name : {item.name ?? '--'}
-                                                            </h3>
-                                                            <div className="text-gray-600 text-sm">
-                                                                Status : {item.status ?? '--'}
-                                                            </div>
-
+                                        return (
+                                            <div
+                                                key={option.id}
+                                                onClick={() => setSelectedOption(option.id)}
+                                                className={`
+                                                    relative cursor-pointer p-4 rounded-xl border-2 transition-all duration-200 group
+                                                    ${isSelected
+                                                        ? 'border-[var(--primary)] bg-blue-50 shadow-md scale-[1.02]'
+                                                        : option.color + ' border-2'
+                                                    }
+                                                    hover:shadow-md hover:scale-[1.01] transform
+                                                `}
+                                            >
+                                                <div className="flex items-start space-x-4">
+                                                    <div className={`
+                                                        w-12 h-12 rounded-full flex items-center justify-center transition-all duration-200
+                                                        ${isSelected
+                                                            ? 'bg-[var(--primary)] text-white shadow-lg'
+                                                            : 'bg-white ' + option.iconColor + ' group-hover:scale-110'
+                                                        }
+                                                    `}>
+                                                        <Icon className="text-lg" />
+                                                    </div>
+                                                    <div className="flex-1 min-w-0">
+                                                        <div className="flex items-center space-x-2">
+                                                            <h4 className={`font-semibold transition-colors duration-200 ${isSelected ? 'text-[var(--primary)]' : 'text-gray-800'
+                                                                }`}>
+                                                                {option.title}
+                                                            </h4>
+                                                            {option.isPremium && (
+                                                                <span className="text-purple-500 text-sm">★</span>
+                                                            )}
                                                         </div>
+                                                        <p className="text-sm text-gray-600 mt-1">
+                                                            {option.description}
+                                                        </p>
                                                     </div>
                                                 </div>
-                                            ))}
-                                        </div>
-                                    </div>
 
-                                    <div><SignersList signers={selectedRecipients} /></div>
+                                               
+                                                {isSelected && (
+                                                    <div className="absolute top-4 right-4">
+                                                        <div className="w-6 h-6 bg-[var(--primary)] rounded-full flex items-center justify-center">
+                                                            <FaCheck className="text-white text-xs" />
+                                                        </div>
+                                                    </div>
+                                                )}
+                                            </div>
+                                        );
+                                    })}
                                 </div>
+                            </div>
+                        </div>
 
-                                {/* Right Section - Signer Components */}
-                                <div className="lg:col-span-6 space-y-1.5">
-                                    {/* Signing Order Diagram */}
-                                    <SigningOrderDiagram signers={selectedRecipients} />
-
-                                    {/* Signers List */}
+                        
+                    </div>
+                    <div className="space-y-6">
+                        <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden sticky top-6">
+                            <div className="bg-gradient-to-r from-gray-50 to-blue-50 px-6 py-2 border-b border-gray-200">
+                                <h3 className="text-lg font-semibold text-gray-800">Live Preview</h3>
+                                <p className="text-sm text-gray-500">See how your users will experience the completion</p>
+                            </div>
 
+                            <div className="p-3 min-h-[70vh] flex  justify-center">
+                                <div className="w-full transition-all duration-500 transform">
+                                    {getPreviewContent()}
                                 </div>
                             </div>
                         </div>
                     </div>
-                    : <Loader />}
+                </div> */}
+
+                <div className="text-center pt-2  max-h-[25vh]">
+                    <div className="w-20 h-20  bg-gradient-to-br from-teal-500 to-green-400 rounded-full flex items-center justify-center mt-3 mx-auto shadow-lg ">
+                        <FaCheck className="text-white text-4xl" />
+                    </div>
+                    <div>
+                        <h3 className="text-2xl font-bold text-gray-800 mb-2">Document Send Successfully!</h3>
+                    </div>
+                </div>
+                <div className='border border-b border-gray-50'></div>
+                <div className=' min-h-[30vh]'>
+                    <SigningOrderDiagram signers={selectedRecipients} />
+                </div>
+                <div className='border border-b border-gray-50'></div>
+                <div className=' min-h-[30vh]'>
+                    <SignersList signers={selectedRecipients} />
+                </div>
+
             </div>
-        </>
+        </div>
     );
 };
 
-export default DocumentCompletionScreen;
+export default DocumentSubmissionOptions;

src/components/process/RecipientAddCard.tsx

@@ -1,69 +0,0 @@
-import { useState } from "react";
-import { FaPlus } from "react-icons/fa";
-
-type RecipientAddCardProps = {
-  addRecipient: (name: string, email: string, type: "mailToSign" | "inPerson" | "cc") => void; // Adjust the parameter type as needed
-};
-
-const RecipientAddCard: React.FC<RecipientAddCardProps> = ({ addRecipient }) => {
-
-  const [recipient] = useState()
-
-  const handleRecipientAdd = () => {
-
-  }
-
-
-  return (
-    <div className="p-4 bg-[var(--primaryLight)] shadow-sm mb-4 w-[650px] rounded-md">
-      <p className="pb-4 text-md">Add Recipient Details</p>
-      <div className="py-1">
-        <input
-
-          type="text"
-          placeholder="Recipient Name"
-          className="w-full p-2 rounded mb-2 bg-white"
-        />
-      </div>
-      <div className="py-1">
-        <input
-          type="email"
-          placeholder="Recipient Email"
-          className="w-full p-2 rounded mb-2 bg-white"
-        />
-      </div>
-
-      <div className="flex justify-between py-2">
-        <div className="flex gap-4 justify-end">
-          {[
-            { label: "Mail To Sign", value: "mailToSign" },
-            { label: "In-Person", value: "inPerson" },
-            { label: "CC", value: "cc" }
-          ].map((option) => (
-            <label key={option.value} className="flex items-center gap-2">
-              <input
-                type="radio"
-                name={`send-type`}
-                value={option.value}
-                defaultChecked={option.value === "mailToSign"}
-                className="accent-blue-500"
-              />
-              {option.label}
-            </label>
-          ))}
-        </div>
-
-
-        <button
-          // onClick={addRecipient}
-          className="flex cursor-pointer items-center gap-2 bg-green-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-green-600"
-        >
-          <FaPlus /> Add Recipient
-        </button>
-      </div>
-
-    </div>
-  );
-};
-
-export default RecipientAddCard;

src/components/process/processStepOne/DocumentCard.tsx

@@ -10,6 +10,7 @@ import api from '../../../config/api'
 import { useParams } from 'react-router-dom'
 import axios from 'axios'
 
+
 interface DocumentCardProps {
   id: string;
   name: string;
@@ -38,11 +39,10 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
     let lastUpdate = 0;
     const delay = 1000;
 
-    const docProgSSE = new EventSource(`http://192.168.2.112:8083/api/progress/${id}`);
+    const docProgSSE = new EventSource(`http://192.168.2.176:8083/api/progress/${id}`);
 
     docProgSSE.addEventListener('progress', (event) => {
       const jsonData = JSON.parse(event.data);
-      console.log(jsonData, "Kaboom");
 
       if (jsonData.isComplete) {
         isCompleted = true;
@@ -86,8 +86,6 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
     };
   }, [id]);
 
-  console.log(isCompleted, "line 118")
-
   const radius = 28
   const circumference = 2 * Math.PI * radius
   const offset = circumference - (progress / 100) * circumference
@@ -102,7 +100,6 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
     if (res.status === 202) {
       dispatch(deleteDocument(docId));
       setDocumentDel({ docId: null, isDel: false });
-      console.log("Document deleted successfully");
     }
   }
 
@@ -113,7 +110,7 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
 
       <div
         key={id}
-        className="relative w-[160px] h-[170px] bg-white rounded-xl shadow-sm hover:shadow-md transition p-4 flex flex-col items-center justify-between"
+        className="relative w-[160px] h-[170px] bg-white rounded-xl shadow-sm hover:shadow-md transition p-4 flex flex-col items-center justify-evenly"
         draggable
       >
         <IoMdClose
@@ -157,7 +154,7 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
               </div>
             </div>
           ) : (
-            <FaFileAlt className="text-gray-600 text-4xl mb-1" />
+            <FaFileAlt className="text-[var(--primary)] text-5xl mb-1" /> 
           )}
         </div>
 

src/components/process/processStepOne/ProcessStepOne.tsx

@@ -7,15 +7,17 @@ import api from "../../../config/api";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "../../../store/store";
 import { useEffect, useRef, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { setImages } from "../../../store/slices/selectedDocsSlice";
-import { addRecipient, addRecipientAsync, fetchRecipients, recipientType, resetRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE, updateRecipientIds } from "../../../store/slices/selectedRecipientsSlice";
+import { addRecipient, addRecipientAsync, fetchRecipients, recipientType, removeAllRecipients, removeRecipientAsync, resetRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE, updateRecipientIds } from "../../../store/slices/selectedRecipientsSlice";
 import { setTransactionId, TRANSACTION_STATUS_ENUMS, updateTransactionStatus } from "../../../store/slices/transactionSlice";
 import { hideLoader, showLoader } from "../../../store/slices/loaderSlice";
 import Loader from "../../dashboard/Loader";
 import { Bounce, toast } from "react-toastify";
 import { fetchDocuments, resetDocuments, setDocuments, uploadDocuments } from "../../../store/slices/documentSlice";
 import { SignTypeEnum } from "../../../utlity/types";
+import { RiPencilFill } from "react-icons/ri";
+import SelfSignWarnModal from "./SelfSignWarnModal";
 
 const ProcessStepOne = () => {
   interface EmailDtls {
@@ -28,6 +30,9 @@ const ProcessStepOne = () => {
   const signType = useParams<{ signType: string }>().signType;
   const templateId = useParams<{ templateId: string }>().templateId;
   let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
+  const [searchParams] = useSearchParams();
+
+  const isTamplate = searchParams.get('useTemplate')
 
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -42,107 +47,124 @@ const ProcessStepOne = () => {
   const [editCase, setEditCase] = useState<string>("")
   const [editRecipient, setEditRecipient] = useState({})
 
-
-
-  // if (!accountId || !transactionId) {
-  //   window.location.href = "/";
-  //   return null;
-  // }
-
-  // const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
-  // const { selectedDocuments, signType } = useSelector((state: RootState) => state.selectedDocuments)
-
   const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
   const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
+  const [showSelfSignWarnModal, setShowSelfSignWarnModal] = useState(false)
+  const [editRecipientCurrentEmail, setEditRecipientCurrentEmail] = useState('')
+
   const userData = useSelector((state: RootState) => state.user)
   // ProcessStepOne.tsx
   const topRef = useRef<HTMLDivElement | null>(null);
 
-  // const userData = useSelector((state: RootState) => state.user)
+  const [templateName, setTemplateName] = useState('Untitled');
+  const [isTyping, setIsTyping] = useState(false);
+
+  // Optional: use a timer to detect pause in typing
+  let typingTimeout = null;
+
+  const handleChange = (e) => {
+    setTemplateName(e.target.value);
+    setIsTyping(true);
+
+    clearTimeout(typingTimeout);
+    typingTimeout = setTimeout(() => {
+      setIsTyping(false);
+    }, 5000); // hide icon while typing, show it again after 500ms of no input
+  };
 
   const [transactionDetails, setTransactionDetails] = useState<any>([]);
 
-  console.log("selectedRecipients", selectedRecipients)
-
   useEffect(() => {
-    // <<<<<<< HEAD
-    // Fetching Transaction Details - START 
     (async () => {
       try {
         const res = await api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`);
         setTransactionDetails(res.data)
+
+        if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
+          setTemplateName(res.data.name)
+        }
+
+        setEmailDtls(
+          { subject: res.data.subject ? res.data.subject : "Documents for Signature", message: res.data.message ? res.data.message : "" }
+        )
+
       } catch (e) {
-        console.log("Error - transactions details")
       }
     })()
-    // 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);
-    // })()
 
     selectedRecipients.length === 0 && dispatch(fetchRecipients({ accountId, transactionId }));
     selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
   }, [])
 
-  // const signingOrder = useSelector((state: RootState) => state.selectedRecipients.signingOrder)
-  // const user = useSelector((state: RootState) => state.user)
-
   const [emailDtls, setEmailDtls] = useState<EmailDtls>({ subject: "Documents for Signature", message: "" });
 
   useEffect(() => {
     dispatch(hideLoader());
   }, [])
 
+
+  const getMinRoutingOrder = () => {
+    return selectedRecipients.reduce((min, recipient) => {
+      return Math.min(min, recipient.routingOrder ?? Infinity);
+    }, Infinity);
+  };
+
   const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-  const handleNextClick = async (isSendNow: boolean, saveAndClose: boolean = false) => {
+  const handleNextClick = async (saveAndClose: boolean = false) => {
     let formError = {
       documents: false,
       recipients: false,
-      subject: false
+      subject: false,
+      recipientEmailAndLastName: false
     }
 
-    if (!selectedDocuments.length) {
-      formError.documents = true
-    }
-    if (!selectedRecipients.length) {
-      formError.recipients = true
-    }
-    if (!emailDtls.subject.length) {
-      formError.subject = true
+    if (transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
+      if (!selectedDocuments.length) {
+        formError.documents = true
+      }
+      if (!selectedRecipients.length) {
+        formError.recipients = true;
+      } else {
+        // Check if all recipients have email and lastName
+        const isValid = selectedRecipients.every(
+          (item) => item.email?.trim() !== '' && item.lastName?.trim() !== ''
+        );
+
+        if (!isValid) {
+          // alert('All recipients must have both Email and Last Name filled.');
+          formError.recipientEmailAndLastName = true;
+        }
+      }
+      if (!emailDtls.subject.length) {
+        formError.subject = true
+      }
+
+
+      if (SignTypeEnum.selfSign === signType) formError.recipients = false;
+
+      if (formError.documents || formError.recipients || formError.subject || formError.recipientEmailAndLastName) {
+        toast.dismiss();
+        toast.error(`${formError.documents ? "Add Document" : ""} 
+          ${(formError.documents && formError.recipients) ? " | " : ""} 
+          ${formError.recipients ? "Add Recipient" : ""} 
+          ${formError.recipientEmailAndLastName ? "All recipients must have both Email and Last Name." : ""} 
+          ${(formError.documents || formError.recipients) ? " | " : ""} 
+          ${formError.subject ? "Add Subject" : ""}`, {
+          position: "top-center",
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeOnClick: false,
+          pauseOnHover: true,
+          draggable: true,
+          progress: undefined,
+          theme: "light",
+          transition: Bounce,
+        });
+        return;
+      }
     }
 
-    if (SignTypeEnum.selfSign === signType) formError.recipients = false;
-
-    if (formError.documents || formError.recipients || formError.subject) {
-      console.log(selectedDocuments, 'line 193')
-      toast.dismiss();
-      toast.error(`${formError.documents ? "Add Document" : ""} 
-        ${(formError.documents && formError.recipients) ? " | " : ""} 
-        ${formError.recipients ? "Add Recipient" : ""} 
-        ${(formError.documents || formError.recipients) ? " | " : ""} 
-        ${formError.subject ? "Add Subject" : ""}`, {
-        position: "top-center",
-        autoClose: 5000,
-        hideProgressBar: false,
-        closeOnClick: false,
-        pauseOnHover: true,
-        draggable: true,
-        progress: undefined,
-        theme: "light",
-        transition: Bounce,
-      });
-      return;
-    }
 
     try {
       dispatch(showLoader("Processing Documents..."));
@@ -165,10 +187,17 @@ const ProcessStepOne = () => {
 
       dispatch(showLoader("Processing Recipients..."));
 
+      let minRoutingOrder = getMinRoutingOrder();
+      // selectedRecipients.forEach((recipient) => {
+      //   if (recipient.routingOrder ?? 1 < minRoutingOrder) {
+      //     minRoutingOrder = recipient.routingOrder ?? 1;
+      //   }
+      // });
+      
       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,
+        provideOwnTags: userData.email === recipient.email && (recipient.routingOrder ?? 1) === minRoutingOrder ? true : false,
         type: recipient.type,
         firstName: recipient.firstName,
         lastName: recipient.lastName,
@@ -194,6 +223,16 @@ const ProcessStepOne = () => {
       let recipientId = null;
 
       if (signType === SignTypeEnum.selfSign) {
+        dispatch(removeAllRecipients());
+        await Promise.all(
+          selectedRecipients.map((recipient) => dispatch(removeRecipientAsync({
+            recipientId: recipient.id,
+            accountId,
+            transactionId,
+            email: recipient.email,
+          })))
+        );
+
         recipientsDataTemp = [{
           id: null,
           routingOrder: 1,
@@ -212,9 +251,11 @@ const ProcessStepOne = () => {
           phone: "",
           accessCode: "",
           accessCodeDelivery: true,
-          language: "en",
+          language: userData.language ? userData.language : "en",
           name: `${userData.firstName} ${userData.lastName}`,
-          roleName: ""
+          roleName: "",
+          allowSenderToEdit: true,
+          allowSenderToDelete: true,
         }]
 
         try {
@@ -226,50 +267,44 @@ const ProcessStepOne = () => {
         }
 
       } else {
-       await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
+        if(!accountId || !transactionId) return;
+        dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
       }
       dispatch(showLoader("Processing Message..."));
 
       let res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, {
+        name: templateName,
         subject: emailDtls.subject, message: emailDtls.message,
         status: "CREATED"
       })
 
-      if (isSendNow) {
-        dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS));
-        setTimeout(() => {
-          // navigate("/");
-        }, 1000);
-      }
-      else {
-        setTimeout(() => {
-          dispatch(resetDocuments())
-          dispatch(resetRecipients())
-          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`)
+      dispatch(resetDocuments())
+      dispatch(resetRecipients())
+      if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
+        dispatch(hideLoader());
+        if (!saveAndClose) {
+          navigate(`/process-step-two/${accountId}/template/${transactionId}`)
+        } else {
+          navigate(`/templates`)
+        }
+      } else {
+        if (signType === SignTypeEnum.selfSign) {
+          dispatch(showLoader("Processing eSignature..."));
+          (async () => {
+            try {
+              await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
+              dispatch(hideLoader());
+              navigate(`/sign/${recipientId}/self_sign`);
+            } catch (err) {
+              console.log("Error Transaction Sent", err.message);
             }
-          } else {
-            if (signType === SignTypeEnum.selfSign) {
-              (async () => {
-                try {
-                  const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
-                  console.log(res, "Check123");
-                  navigate(`/sign/${recipientId}`);
-                } catch (err) {
-                  console.log("Error Transaction Sent", err.message);
-                }
-              })()
-            } else {
-              navigate(`/process-step-two/${accountId}/${transactionId}`);
-            }
-          }
-        }, 1000);
+          })()
+        } else {
+          navigate(`/process-step-two/${accountId}/${transactionId}`);
+        }
       }
+      // }, 1000);
+      // }
 
     } catch (error) {
       dispatch(hideLoader());
@@ -297,6 +332,7 @@ const ProcessStepOne = () => {
   const handleSelfSignCb = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.currentTarget.checked) {
       navigate("self_sign");
+      setShowSelfSignWarnModal((prev) => !prev)
     } else {
       navigate("./../");
     }
@@ -306,25 +342,38 @@ const ProcessStepOne = () => {
 
   return (
     <>
-      <div className={`relative w-full bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none h-screen overflow-hidden' : ''}`}>
+      <div className={`relative w-full h-screen bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none overflow-hidden' : ''}`}>
 
-        {/* Top Navigation */}
-        <div className='fixed top-0 w-full flex items-center justify-between bg-white shadow z-50 px-4 py-3'>
+        {/* Top Navigation - Fixed */}
+        <div className='fixed top-0 left-0 right-0 w-full flex items-center justify-between bg-white shadow z-50 px-4 py-3'>
           <div className='flex items-center gap-2'>
             <IoMdClose
               onClick={handleClose}
               className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition'
             />
-            <p className="text-base font-normal text-gray-700 border-l pl-4">Add Recipient and Message</p>
+            <p className="text-base font-normal text-gray-700 border-l pl-4 relative">
+              {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES ?
+                <>
+                  <input
+                    value={templateName}
+                    onChange={handleChange}
+                    className="w-full px-4 py-1.5 border-2 border-dashed rounded-md text-sm focus:outline-none transition border-gray-300 focus:ring-2 focus:border-dashed focus:ring-[var(--primary)]"
+                  />
+                  {!isTyping && (
+                    <RiPencilFill className="absolute top-2.5 right-2 text-[17px]" />
+                  )}
+                </> :
+                "Add Recipient and Message"
+              }
+            </p>
           </div>
 
           <div
             id="add-tags-btn-step-one"
             className='flex items-center gap-3'>
 
-
             {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && <button
-              onClick={() => handleNextClick(false, true)}
+              onClick={() => handleNextClick(false)}
               className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
             >
               Save & Close
@@ -340,85 +389,88 @@ const ProcessStepOne = () => {
           </div>
         </div>
 
-        {/* Main Content */}
-        <div className="relative max-w-4xl mx-auto pt-[80px] px-4 pb-10">
+        {/* Main Content - Scrollable */}
+        <div className="h-screen pt-[80px] overflow-y-auto no-scrollbar">
+          <div className="max-w-4xl rounded-xl shadow-md mx-auto px-6 pb-10 bg-[var(--documentUploadBg)] mb-5">
 
-          {/* Documents */}
-          <section>
-            <h2 className="text-lg font-medium mb-4 text-[var(--processStepOneTextHead)]">Documents</h2>
-            <SelectedDocuments transactionTemplateToggle={transactionTemplateToggle} />
-          </section>
+            {/* Documents */}
+            <section>
+              <h2 className="text-lg font-medium mb-4 pt-3 text-[var(--processStepOneTextHead)]">Documents</h2>
+              <SelectedDocuments transactionTemplateToggle={transactionTemplateToggle} />
+            </section>
 
-          {/* Recipients */}
-          <section className="mt-8">
-
-            {
-              transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES &&
-              <div className="flex justify-between items-center">
-                <h2 className="text-lg font-medium mb-4 pt-6 border-t text-[var(--processStepOneTextHead)]">Signers</h2>
-                <div className="flex items-center mr-2">
-                  <input
-                    checked={signType === SignTypeEnum.selfSign}
-                    onChange={(e) => handleSelfSignCb(e)}
-                    id="default-checkbox" type="checkbox" value="" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm outline-none"
-                  />
-                  <label htmlFor="default-checkbox" className="ms-2 text-sm text-slate-600">SELF SIGN</label>
+            {/* Recipients */}
+            <section className="mt-8">
+              <p className="border-t border-gray-200"></p>
+              {!isTamplate &&
+                transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES &&
+                <div className="flex justify-between items-center">
+                  <h2 className=" text-lg font-medium mb-4 pt-6  text-[var(--processStepOneTextHead)]">Signers</h2>
+                  <div className="flex items-center  mr-3">
+                    <input
+                      checked={signType === SignTypeEnum.selfSign}
+                      onChange={(e) => handleSelfSignCb(e)}
+                      id="default-checkbox" type="checkbox" value="" className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded-sm outline-none"
+                    />
+                    <label htmlFor="default-checkbox" className="ms-2 text-sm flex gap-1 text-slate-600">
+                      <span>SELF </span><span>SIGN</span></label>
+                  </div>
                 </div>
-              </div>
-            }
+              }
 
-            {
-              signType !== SignTypeEnum.selfSign &&
-              <div className="flex flex-col gap-4 align-start">
-                <RecipientCards transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase} />
-                {/* {signType !== "self-sign" && <RecipientAddCard />} */}
+              {
+                (signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) &&
+                <div className="flex flex-col gap-4 align-start">
 
-                <div
-                  ref={topRef}
-                  className={`relative w-full bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none h-screen overflow-hidden' : ''}`}
-                >
+                  <RecipientCards userEmail={userData.email} getMinRoutingOrder={getMinRoutingOrder} transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase} editRecipient={editRecipient} setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} editRecipientCurrentEmail={editRecipientCurrentEmail} />
+
+                  <div
+                    ref={topRef}
+                    className={`relative w-full bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none' : ''}`}
+                  >
+                    <RecipientAddCard userEmail={userData.email} getMinRoutingOrder={getMinRoutingOrder} transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase} topRef={topRef} setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} />
+                  </div>
 
-                  <RecipientAddCard transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase} topRef={topRef} />
                 </div>
+              }
+            </section>
 
+            {/* Email */}
+            <section className="mt-8">
+              <h2 className="text-lg font-medium mb-4 pt-6 border-t border-gray-200 text-[var(--processStepOneTextHead)]">Email</h2>
+
+              {/* Subject */}
+              <div className='flex flex-col mb-4'>
+                <label className='text-sm font-medium text-[var(--greyTextCol)] mb-1'>Subject</label>
+                <input
+                  type="text"
+                  required
+                  value={emailDtls.subject}
+                  onChange={(e) => setEmailDtls({ ...emailDtls, subject: e.target.value })}
+                  placeholder="Email Subject"
+                  className="w-full px-3 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
+                />
               </div>
-            }
-          </section>
 
-          {/* Email */}
-          <section className="mt-8">
-            <h2 className="text-lg font-medium mb-4 pt-6 border-t text-[var(--processStepOneTextHead)]">Email</h2>
-
-            {/* Subject */}
-            <div className='flex flex-col mb-4'>
-              <label className='text-sm font-medium text-[var(--greyTextCol)] mb-1'>Subject</label>
-              <input
-                type="text"
-                required
-                value={emailDtls.subject}
-                onChange={(e) => setEmailDtls({ ...emailDtls, subject: e.target.value })}
-                placeholder="Email Subject"
-                className="w-full px-3 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
-              />
-            </div>
-
-            {/* Message */}
-            <div className='flex flex-col'>
-              <label className='text-sm font-medium text-[var(--greyTextCol)] mb-1'>Message for Signers</label>
-              <textarea
-                rows={4}
-                value={emailDtls.message}
-                onChange={(e) => setEmailDtls({ ...emailDtls, message: e.target.value })}
-                placeholder="Message"
-                className="w-full px-3 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
-              />
-            </div>
-          </section>
+              {/* Message */}
+              <div className='flex flex-col'>
+                <label className='text-sm font-medium text-[var(--greyTextCol)] mb-1'>Message</label>
+                <textarea
+                  rows={4}
+                  value={emailDtls.message}
+                  onChange={(e) => setEmailDtls({ ...emailDtls, message: e.target.value })}
+                  placeholder="Message"
+                  className="w-full px-3 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[var(--primary)]"
+                />
+              </div>
+            </section>
 
+          </div>
         </div>
 
         {globalLoader.isLoading && <Loader />}
-      </div >
+        {showSelfSignWarnModal && <SelfSignWarnModal setShowSelfSignWarnModal={setShowSelfSignWarnModal} />}
+      </div>
     </>
   );
 }

src/components/process/processStepOne/RecipientAddCard.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef, useState } from "react";
 import { FaPlus } from "react-icons/fa";
 import { addRecipient, Recipient, recipientType, TRANSACTION_TEMPLATE_TOGGLE, updateRecipient } from "../../../store/slices/selectedRecipientsSlice";
-import { useDispatch } from "react-redux";
-import { AppDispatch } from "../../../store/store";
+import { useDispatch, useSelector } from "react-redux";
+import { AppDispatch, RootState } from "../../../store/store";
 import api from "../../../config/api";
 import ContactModal from "./ContactModal";
 import useDebouncedEffect from "../../../utlity/useDebounce";
@@ -11,6 +11,7 @@ import { FiEdit, FiTrash } from "react-icons/fi";
 import { v4 as uuidv4 } from 'uuid';
 
 
+
 interface ContactType {
   id: string;
   email: string;
@@ -21,22 +22,24 @@ interface ContactType {
 export interface ContactTypeObj {
   type: string;
   contacts: ContactType[];
+  setEditRecipientCurrentEmail: any
 }
 
 
-const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef }) => {
-  const [activeAccountId, setActiveAccountId] = useState<string | null>(
+const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef, setEditRecipientCurrentEmail, showCard = false, recipientData = null }) => {
+   const [activeAccountId, setActiveAccountId] = useState<string | null>(
     JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
   );
 
-
+  const recipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
+  
   const [contactData, setContactData] = useState<ContactTypeObj>({ type: "", contacts: [] });
   const [openContactModal, setOpenContactModal] = useState(false);
 
   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: true, allowSenderToDelete: true });
+  const [recipient, setRecipients] = useState<Recipient>(recipientData !== null ? {...recipientData} : { uuid: null, newOne: false, firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: true, allowSenderToDelete: true } );
 
   const [showAdvanceSettings, setShowAdvanceSettings] = useState(false)
 
@@ -47,9 +50,13 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
   const [lastQuery, setLastQuery] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [manualFocusTriggered, setManualFocusTriggered] = useState(false);
-
-
-  console.log(recipient)
+  const [errors, setErrors] = useState({
+    roleName: false,
+    lastName: false,
+    email: false,
+    emailFormat: false,
+    type: false,
+  });
 
   useEffect(() => {
     if (openContactModal) {
@@ -62,7 +69,37 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
   }, [openContactModal]);
 
   useEffect(() => {
+    // Check if the recipient exists in the list (using uuid or id or email)
+    const exists = recipients.some((r) => {
+      return (
+        (r.uuid && r.uuid === editRecipient?.uuid) ||
+        (r.id && r.id === editRecipient?.id) ||
+        (r.email && r.email === editRecipient?.email)
+      );
+    });
+
     if (editCase === "Edit" && editRecipient) {
+
+      if (!exists) {
+        // Recipient was deleted -> reset
+        setEditCase('');
+        setEditRecipient(null);
+        setRecipients({
+          firstName: "",
+          lastName: "",
+          email: "",
+          hostName: "",
+          hostEmail: "",
+          roleName: "",
+          type: recipientType.SIGNER,
+          allowSenderToEdit: true,
+          allowSenderToDelete: true,
+          uuid: "",
+          newOne: false,
+        });
+        return;
+      }
+
       setRecipients({
         // id:editRecipient.id,
         firstName: editRecipient.firstName || "",
@@ -71,111 +108,156 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
         hostName: editRecipient.hostName || "",
         hostEmail: editRecipient.hostEmail || "",
         roleName: editRecipient.roleName || "",
-        type: editRecipient.type || recipientType.SIGNER,
+        type: editRecipient.type,
         allowSenderToEdit: editRecipient.allowSenderToEdit ?? true,
         allowSenderToDelete: editRecipient.allowSenderToDelete ?? true,
         uuid: String(editRecipient?.id ?? editRecipient?.uuid ?? ''),
         newOne: editRecipient.newOne ?? false
       });
     }
-  }, [editCase, editRecipient]);
+  }, [editCase, editRecipient, recipients]);
 
 
   const handleRecipientAdd = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    console.log("recipientrecipient", recipient)
+    const newErrors = {
+      roleName: false,
+      lastName: false,
+      email: false,
+      emailFormat: false,
+      type: false,
+    };
 
-    if(transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
-      if (!recipient.lastName || !recipient.email || !recipient.type) return;
+    const roleNameFilled = recipient.roleName.trim();
+    const lastNameFilled = recipient.lastName.trim();
+    const emailFilled = recipient.email.trim();
+    const firstNameFilled = recipient.firstName.trim()
 
-      // ✅ Email format validation
-      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      if (!emailRegex.test(recipient.email)) {
-        console.log("Invalid email format");
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    // 🔹 Check if we're in TRANSACTIONS mode
+    if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
+      if (lastNameFilled || emailFilled) {
+        if (lastNameFilled && !emailFilled) {
+          setErrors({ ...newErrors, email: true });
+          return;
+        }
+
+        if (!lastNameFilled && emailFilled) {
+          setErrors({ ...newErrors, lastName: true });
+          return;
+        }
+
+        if (!emailRegex.test(emailFilled)) {
+          setErrors({ ...newErrors, emailFormat: true });
+          return;
+        }
+
+        submitForm();
         return;
       }
 
+      // Neither lastName nor email is filled — treat as invalid
+      setErrors({ ...newErrors, lastName: true, email: true });
+      return;
     }
 
 
-    if (editCase === 'Edit') {
-      dispatch(updateRecipient(recipient));
-    } else {
-      dispatch(addRecipient({
-        ...recipient,
-        uuid: uuidv4(),
-        newOne: true
-      }));
+
+    // // 1. If either lastName or email is filled, validate their presence mutually
+    // if ( emailFilled) {
+
+    //   // if (lastNameFilled && !emailFilled) {
+    //   //   setErrors({ ...newErrors, email: true });
+    //   //   return;
+    //   // }
+
+    //   // if (!lastNameFilled && emailFilled) {
+    //   //   setErrors({ ...newErrors, lastName: true });
+    //   //   return;
+    //   // }
+
+    //   // // Both lastName and email are filled — check email format
+    //   if (!emailRegex.test(emailFilled)) {
+    //     setErrors({ ...newErrors, emailFormat: true });
+    //     return;
+    //   }
+
+    //   // Passed validation, submit
+    //   submitForm();
+    //   return;
+    // }
+
+
+    if (roleNameFilled || lastNameFilled || emailFilled || firstNameFilled) {
+      submitForm()
+      return
     }
 
-    setRecipients({
-      firstName: "",
-      lastName: "",
-      email: "",
-      hostName: "",
-      hostEmail: "",
-      roleName: "",
-      type: recipientType.SIGNER,
-      allowSenderToEdit: true,
-      allowSenderToDelete: true,
-      uuid: "",
-      newOne: false
-    });
+    // 2. If both lastName and email empty, validate roleName only
+    if (!roleNameFilled) {
+      setErrors({ ...newErrors, roleName: true });
+      return;
+    }
 
-    // setRecipients(null),
-    setEditCase("")
-setManualFocusTriggered(false)
-    formRef.current?.reset();
+    // roleName filled, submit immediately
+    submitForm();
+
+    function submitForm() {
+      let updatedRecipient = { ...recipient };
+
+      // Clear hostName and hostEmail if type is SIGNER or CC
+      if (
+        updatedRecipient.type === recipientType.SIGNER ||
+        updatedRecipient.type === recipientType.CC
+      ) {
+        updatedRecipient.hostName = "";
+        updatedRecipient.hostEmail = "";
+      }
+
+      
+      if (editCase === "Edit") {
+        dispatch(updateRecipient(updatedRecipient));
+      } else {
+        updatedRecipient.routingOrder = 1;
+        dispatch(addRecipient({
+          ...updatedRecipient,
+          uuid: uuidv4(),
+          newOne: true,
+        }));
+      }
+
+      setRecipients({
+        firstName: "",
+        lastName: "",
+        email: "",
+        hostName: "",
+        hostEmail: "",
+        roleName: "",
+        type: recipientType.SIGNER,
+        allowSenderToEdit: true,
+        allowSenderToDelete: true,
+        uuid: "",
+        newOne: false,
+      });
+
+      setErrors({
+        roleName: false,
+        lastName: false,
+        email: false,
+        emailFormat: false,
+        type: false,
+      });
+
+      setEditRecipientCurrentEmail("")
+      setEditCase("");
+      setManualFocusTriggered(false);
+      formRef.current?.reset();
+    }
   };
 
 
-
-
-  // useEffect(() => {
-  // if (!recipient.firstName.length) return;
-
-  // const handler = setTimeout(() => {
-  //   api.get(`/api/contact?firstName=${recipient.firstName}`)
-  //     .then(res => {
-  //       setContactData({ type: "firstName", contacts: res.data.content });
-  //     })
-  //     .catch(err => console.log(err));
-  // }, 500); // wait 500ms after the last change
-
-  // return () => {
-  //   clearTimeout(handler); // cancel previous timeout if effect runs again
-  // };
-
-  // }, [recipient.firstName]);
-
-  // useDebouncedEffect(() => {
-  //   if (!recipient.firstName.length) return;
-  //   api.get(`/api/contact?firstName=${recipient.firstName}`)
-  //   .then(res => {
-  //     setContactData({ type: "firstName", contacts: res.data.content });
-  //   })
-  //   .catch(err => console.log(err));
-  // }, [recipient.firstName], 500);
-
-  // useDebouncedEffect(() => {
-  //   if (!recipient.lastName.length) return
-  //   api.get(`/api/contact?lastName=${recipient.lastName}`)
-  //     .then(res => {
-  //       setContactData({ type: "lastName", contacts: res.data.content });
-  //     })
-  //     .catch(err => console.log(err))
-  // }, [recipient.lastName], 500);
-
-  // useDebouncedEffect(() => {
-  //   if (!recipient.email.length) return
-  //   api.get(`/api/contact?email=${recipient.email}`)
-  //     .then(res => {
-  //       setContactData({ type: "email", contacts: res.data.content });
-  //     })
-  //     .catch(err => console.log(err))
-  // }, [recipient.email], 500);
-
   const handleContactModalBlur = () => {
     setTimeout(() => {
       setOpenContactModal(false)
@@ -184,6 +266,7 @@ setManualFocusTriggered(false)
 
 
   const handleFocus = async (field: "firstName" | "lastName" | "email") => {
+
     setManualFocusTriggered(true);
     setOpenContactModal(true);
     setActiveField(field);
@@ -193,7 +276,7 @@ setManualFocusTriggered(false)
       try {
         const res = await api.get(`/api/accounts/${activeAccountId}/contacts?pageSize=10`);
         const contacts = res.data?.content || [];
-        setCachedContacts(contacts);
+        setCachedContacts([...contacts]);
         setFilteredContacts(contacts);
         setContactData({ type: field, contacts });
         setHasFetchedInitial(true);
@@ -211,11 +294,11 @@ setManualFocusTriggered(false)
 
 
   useDebouncedEffect(() => {
-    console.log("useDebouncedEffect")
     if (!activeField || !manualFocusTriggered) return;
+    
 
     const inputValue = recipient[activeField].trim().toLowerCase();
-
+    console.log(inputValue, "Line 297", activeField)
     if (inputValue.length === 0) {
       setFilteredContacts(cachedContacts);
       setContactData({ type: activeField, contacts: cachedContacts });
@@ -235,12 +318,21 @@ setManualFocusTriggered(false)
       return;
     }
 
+
+
+
+
+
     if (lastQuery !== inputValue) {
+      if(lastQuery !== null && inputValue.startsWith(lastQuery)) return
+
       setLastQuery(inputValue);
       api
         .get(`/api/accounts/${activeAccountId}/contacts?pageSize=5&${activeField}=${inputValue}`)
         .then((res) => {
+          console.log(res, "Printing RES")
           const fetched = res.data?.content || [];
+          setCachedContacts([...fetched]);
           setFilteredContacts(fetched);
           setContactData({ type: activeField, contacts: fetched });
           setOpenContactModal(true);
@@ -249,131 +341,138 @@ setManualFocusTriggered(false)
     }
   }, [recipient.firstName, recipient.lastName, recipient.email], 300);
 
-useEffect(() => {
-  const handleClickOutside = (e: MouseEvent | FocusEvent) => {
-    if (
-      containerRef.current &&
-      !containerRef.current.contains(e.target as Node)
-    ) {
-      setOpenContactModal(false);
-    }
-  };
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent | FocusEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setOpenContactModal(false);
+      }
+    };
 
-  document.addEventListener("mousedown", handleClickOutside);
-  document.addEventListener("focusin", handleClickOutside); // Also handles tabbing out
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("focusin", handleClickOutside); // Also handles tabbing out
 
-  return () => {
-    document.removeEventListener("mousedown", handleClickOutside);
-    document.removeEventListener("focusin", handleClickOutside);
-  };
-}, []);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("focusin", handleClickOutside);
+    };
+  }, []);
 
 
 
 
   return (
     <div ref={containerRef}>
-    <form
-      ref={formRef}
-      onSubmit={handleRecipientAdd}
-      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 === 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={recipient.firstName === "" && recipient.lastName === "" && recipient.email === ""} 
-              type="text"
-              onFocus={() => setOpenContactModal(true)}
-              onBlur={handleContactModalBlur}
-              value={recipient.roleName}
-              placeholder="Role name"
-              className="w-64 px-3 py-2 me-3 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
-              onChange={(e) => setRecipients({ ...recipient, roleName: e.target.value })}
-            />
+      <form
+        ref={formRef}
+        onSubmit={handleRecipientAdd}
+        id="add-recipient-step-one"
+        className="w-full bg-white border border-gray-200 rounded-lg shadow-sm px-6 py-4 space-y-3 relative"
+      >
+        {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
+          <div className="space-y-1">
+            {/* Top Row: Role Input + Settings */}
+            <div className="flex justify-between items-center">
+              {/* Role Name Input */}
+              {/* Role Name Input */}
+              <div className="w-64">
+                <input
+                  type="text"
+                  value={recipient.roleName}
+                  placeholder="Role name"
+                  className={`w-full px-3 py-2 border rounded-md text-sm focus:outline-none transition
+      ${errors.roleName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
+                  onChange={(e) => {
+                    setRecipients({ ...recipient, roleName: e.target.value });
+                    setErrors(prev => ({ ...prev, roleName: false }));
+                  }}
+                />
+                {errors.roleName && (
+                  <p className="text-red-500 text-xs mt-1">Role is required.</p>
+                )}
+              </div>
 
-            {/* Settings + Permissions */}
-            <div className="flex items-center">
-              <div className="flex justify-between">
-                {/* Permission Status Text - Always Visible when settings open */}
-                <div
-                  className={`transition-all  duration-600 ease-in-out ${showAdvanceSettings ? 'max-h-10 opacity-100 me-3' : 'max-h-0 opacity-0 '
-                    } overflow-hidden`}
-                >
-                  <div className="text-sm text-gray-600">
-                    {recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Full permissions granted"}
-                    {recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "Edit permission granted"}
-                    {!recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Delete permission granted"}
-                    {!recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "No permissions granted"}
+
+              {/* Settings + Permissions */}
+              <div className="flex items-center">
+                <div className="flex justify-between w-full">
+                  {/* Permission Status Text - Always Visible */}
+                  <div className="max-h-10 opacity-100 me-3 overflow-hidden">
+                    <div className="text-sm text-gray-600 pt-0.5">
+                      {/* {recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Full permissions granted"}
+                      {recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "Edit permission granted"}
+                      {!recipient.allowSenderToEdit && recipient.allowSenderToDelete && "Delete permission granted"}
+                      {!recipient.allowSenderToEdit && !recipient.allowSenderToDelete && "No permissions granted"} */}
+                      Permissions granted :
+                    </div>
                   </div>
-                </div>
-                {/* Animated Permission Controls */}
-                <div className={`overflow-visible transition-all duration-900 ease-in-out ${showAdvanceSettings ? 'max-w-80 opacity-100' : 'max-w-0 opacity-0'
-                  }`}>
-                  <div className="flex items-center space-x-3 pr-1.5">
-                    {/* Edit Permission */}
-                    <div className="relative group">
-                      <label
-                        className={`relative flex items-center justify-center w-6 h-6 border-2 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-105 ${recipient.allowSenderToEdit
-                          ? 'bg-blue-100 border-blue-500 shadow-lg'
-                          : 'bg-white border-gray-300 hover:border-blue-400'
-                          }`}
-                      >
-                        <input
-                          type="checkbox"
-                          checked={recipient.allowSenderToEdit}
-                          onChange={(e) =>
-                            setRecipients({ ...recipient, allowSenderToEdit: e.target.checked })
-                          }
-                          onFocus={() => setOpenContactModal(true)}
-                          onBlur={handleContactModalBlur}
-                          className="absolute w-full h-full opacity-0 cursor-pointer"
-                        />
-                        <FiEdit
-                          className={`w-3 h-3 pointer-events-none transition-all duration-300 ${recipient.allowSenderToEdit ? 'text-blue-600' : 'text-gray-400'
+
+                  {/* Permission Controls - Always Visible */}
+                  <div className="max-w-80 opacity-100 overflow-visible">
+                    <div className="flex items-center space-x-3 pr-1.5">
+                      {/* Edit Permission */}
+                      <div className="relative group">
+                        <label
+                          className={`relative flex items-center justify-center w-12 h-7 border-2 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-105 ${recipient.allowSenderToEdit
+                            ? 'bg-blue-100 border-blue-500 shadow-md'
+                            : 'bg-white border-gray-300 hover:border-blue-400 text-gray-400'
                             }`}
-                        />
-                      </label>
-                      {/* Tooltip */}
-                      <div className="absolute bottom-0  -translate-y-full left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20">
-                        <div className="bg-gray-800 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap">
-                          Allow Edit Permission
-                          <div className="absolute bottom-[-5px] left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-800"></div>
+                        >
+                          <input
+                            type="checkbox"
+                            checked={recipient.allowSenderToEdit}
+                            onChange={(e) =>
+                              setRecipients({ ...recipient, allowSenderToEdit: e.target.checked })
+                            }
+                            onFocus={() => setOpenContactModal(true)}
+                            onBlur={handleContactModalBlur}
+                            className="absolute w-full h-full opacity-0 cursor-pointer"
+                          />
+                          <FiEdit
+                            className={`w-2.5 h-2.5 pointer-events-none transition-all duration-300 ${recipient.allowSenderToEdit ? 'text-blue-600' : 'text-gray-400'
+                              }`}
+                          /><span className="ms-0.5 text-[12px]">Edit</span>
+                        </label>
+                        {/* Tooltip */}
+                        <div className="absolute bottom-0 -translate-y-full left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20">
+                          <div className="bg-gray-800 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap">
+                            Edit Permission
+                            <div className="absolute bottom-[-5px] left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-800"></div>
+                          </div>
                         </div>
                       </div>
-                    </div>
 
-                    {/* Delete Permission */}
-                    <div className="relative group">
-                      <label
-                        className={`relative flex items-center justify-center w-6 h-6 border-2 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-105 ${recipient.allowSenderToDelete
-                          ? 'bg-red-100 border-red-500 shadow-lg'
-                          : 'bg-white border-gray-300 hover:border-red-400'
-                          }`}
-                      >
-                        <input
-                          type="checkbox"
-                          checked={recipient.allowSenderToDelete}
-                          onChange={(e) =>
-                            setRecipients({ ...recipient, allowSenderToDelete: e.target.checked })
-                          }
-                          onFocus={() => setOpenContactModal(true)}
-                          onBlur={handleContactModalBlur}
-                          className="absolute w-full h-full opacity-0 cursor-pointer"
-                        />
-                        <FiTrash
-                          className={`w-3 h-3 pointer-events-none transition-all duration-300 ${recipient.allowSenderToDelete ? 'text-red-600' : 'text-gray-400'
+                      {/* Delete Permission */}
+                      <div className="relative group">
+                        <label
+                          className={`relative flex items-center justify-center w-15 h-7 border-2 rounded-lg cursor-pointer transition-all duration-300 transform hover:scale-105 ${recipient.allowSenderToDelete
+                            ? 'bg-red-100 border-red-500 shadow-md'
+                            : 'bg-white border-gray-300 hover:border-red-400 text-gray-400'
                             }`}
-                        />
-                      </label>
-                      {/* Tooltip */}
-                      <div className="absolute bottom-0  -translate-y-full left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20">
-                        <div className="bg-gray-800 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap">
-                          Allow Delete Permission
-                          <div className="absolute bottom-[-5px] left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-800"></div>
+                        >
+                          <input
+                            type="checkbox"
+                            checked={recipient.allowSenderToDelete}
+                            onChange={(e) =>
+                              setRecipients({ ...recipient, allowSenderToDelete: e.target.checked })
+                            }
+                            onFocus={() => setOpenContactModal(true)}
+                            onBlur={handleContactModalBlur}
+                            className="absolute w-full h-full opacity-0 cursor-pointer"
+                          />
+                          <FiTrash
+                            className={`w-3 h-3 pointer-events-none transition-all duration-300 ${recipient.allowSenderToDelete ? 'text-red-600' : 'text-gray-400'
+                              }`}
+                          /><span className="ms-0.5 text-[12px]">Delete</span>
+                        </label>
+                        {/* Tooltip */}
+                        <div className="absolute bottom-0 -translate-y-full left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20">
+                          <div className="bg-gray-800 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap">
+                            Delete Permission
+                            <div className="absolute bottom-[-5px] left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-800"></div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -381,137 +480,142 @@ useEffect(() => {
                 </div>
               </div>
 
-              {/* Settings Icon */}
-              <div className="relative group">
-                <p
-                  className="text-blue-600 hover:text-blue-700 cursor-pointer transition-colors duration-200 p-2 rounded-full hover:bg-blue-50"
-                  onClick={() => setShowAdvanceSettings((prev) => !prev)}
-                >
-                  <IoIosSettings
-                    className={`h-6 w-6 transition-transform duration-300 ${showAdvanceSettings ? 'rotate-90' : 'rotate-0'
-                      }`}
-                  />
-                </p>
-                {/* Tooltip */}
-                <div className="absolute top-0 -translate-y-full left-1/2 transform -translate-x-1/2 mb-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-20">
-                  <div className="bg-gray-800 text-white text-xs rounded-lg py-2 px-3 whitespace-nowrap">
-                    Advanced Settings
-                    <div className="absolute bottom-[-6px] left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-gray-800"></div>
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
+        )}
+
+        {/* Name Inputs */}
+        <div className="grid grid-cols-12 gap-4 mt-3">
+          <div className="col-span-4">
+            <input
+              type="text"
+              onFocus={() => handleFocus("firstName")}
+              onBlur={handleContactModalBlur}
+              value={recipient.firstName}
+              placeholder="First Name"
+              className={`w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
+            ${errors.firstName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
+              onChange={(e) => {
+                setRecipients({ ...recipient, firstName: e.target.value });
+                // setErrors((prev) => ({ ...prev, firstName: false }));
+              }}
+            />
+          </div>
+          {/* {errors.firstName && (
+            <p className="text-red-500 text-xs mt-1">First Name is required</p>
+          )} */}
+          <div className="col-span-4">
+            <input
+              type="text"
+              onFocus={() => handleFocus("lastName")}
+              onBlur={handleContactModalBlur}
+              value={recipient.lastName}
+              placeholder="Last Name"
+              className={` w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
+            ${errors.lastName ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
+              onChange={(e) => {
+                setRecipients({ ...recipient, lastName: e.target.value });
+                setErrors((prev) => ({ ...prev, lastName: false }));
+              }}
+            />
+            {errors.lastName && (
+              <p className="text-red-500 text-xs mt-1">Last Name is required</p>
+            )}
+          </div>
+          <div className="col-span-4">
+            <input
+              type="email"
+              onFocus={() => handleFocus("email")}
+              onBlur={handleContactModalBlur}
+              value={recipient.email}
+              placeholder="Recipient Email"
+              className={`w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
+            ${errors.email ? 'border-red-500 ring-2 ring-red-300' : 'border-gray-300 focus:ring-2 focus:ring-[var(--primary)]'}`}
+              onChange={(e) => {
+                setRecipients({ ...recipient, email: e.target.value });
+                setErrors((prev) => ({ ...prev, email: false }));
+              }}
+            />
+            {errors.email && (
+              <p className="text-red-500 text-xs mt-1">Email is required</p>
+            )}
+          </div>
         </div>
-      )}
-
-      {/* Name Inputs */}
-      <div className="grid grid-cols-12 gap-4 mt-3">
-        <input
-          type="text"
-          onFocus={() => handleFocus("firstName")}
-          onBlur={handleContactModalBlur}
-          value={recipient.firstName}
-          placeholder="First Name"
-          className="col-span-4 w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
-          onChange={(e) => setRecipients({ ...recipient, firstName: e.target.value })}
-        />
-        <input
-          required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
-          type="text"
-          onFocus={() => handleFocus("lastName")}
-          onBlur={handleContactModalBlur}
-          value={recipient.lastName}
-          placeholder="Last Name"
-          className="col-span-4 w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
-          onChange={(e) => setRecipients({ ...recipient, lastName: e.target.value })}
-        />
-        <input
-          required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
-          type="email"
-          onFocus={() => handleFocus("email")}
-          onBlur={handleContactModalBlur}
-          value={recipient.email}
-          placeholder="Recipient Email"
-          className="col-span-4 w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
-          onChange={(e) => setRecipients({ ...recipient, email: e.target.value })}
-        />
-      </div>
 
 
-      {recipient.type === recipientType.INPERSONSIGNER && <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-        <input
-          required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
-          type="text"
-          onFocus={() => setOpenContactModal(true)}
-          onBlur={handleContactModalBlur}
-          value={recipient.hostName}
-          placeholder="Host Name"
-          className="w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
-          onChange={(e) => setRecipients({ ...recipient, hostName: e.target.value })}
-        />
-        <input
-          required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
-          type="email"
-          onFocus={() => setOpenContactModal(true)}
-          onBlur={handleContactModalBlur}
-          value={recipient.hostEmail}
-          placeholder="Host Email"
-          className="w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
-          onChange={(e) => setRecipients({ ...recipient, hostEmail: e.target.value })}
-        />
-      </div>}
-
-      {/* Contact Modal */}
-      {openContactModal && contactData.contacts.length > 0 && (
-        <div className="absolute z-50 mt-1 w-2/3 max-h-[50vh] bg-white shadow-lg rounded-md p-3 border border-gray-100 overflow-y-auto no-scrollbar">
-          <ContactModal
-            contactData={contactData}
-            inpFirstName={recipient.firstName}
-            inpLastName={recipient.lastName}
-            inpEmail={recipient.email}
-            openContactModal={openContactModal}
-            setRecipients={setRecipients}
-            setOpenContactModal={setOpenContactModal}
-            topRef={topRef}
-            setManualFocusTriggered={setManualFocusTriggered}
+        {recipient.type === recipientType.INPERSONSIGNER && <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          <input
+            required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
+            type="text"
+            onFocus={() => setOpenContactModal(true)}
+            onBlur={handleContactModalBlur}
+            value={recipient.hostName}
+            placeholder="Host Name"
+            className="w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
+            onChange={(e) => setRecipients({ ...recipient, hostName: e.target.value })}
           />
+          <input
+            required={transactionTemplateToggle !== TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES}
+            type="email"
+            onFocus={() => setOpenContactModal(true)}
+            onBlur={handleContactModalBlur}
+            value={recipient.hostEmail}
+            placeholder="Host Email"
+            className="w-full px-4 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition"
+            onChange={(e) => setRecipients({ ...recipient, hostEmail: e.target.value })}
+          />
+        </div>}
+
+        {/* Contact Modal */}
+        {openContactModal && contactData.contacts.length > 0 && (
+          <div className="absolute z-50 mt-1 w-2/3 max-h-[50vh] bg-white shadow-lg rounded-md p-3 border border-gray-100 overflow-y-auto no-scrollbar">
+            <ContactModal
+              contactData={contactData}
+              inpFirstName={recipient.firstName}
+              inpLastName={recipient.lastName}
+              inpEmail={recipient.email}
+              openContactModal={openContactModal}
+              setRecipients={setRecipients}
+              setOpenContactModal={setOpenContactModal}
+              topRef={topRef}
+              setManualFocusTriggered={setManualFocusTriggered}
+            />
+          </div>
+        )}
+
+
+
+        {/* Signing options + Add button in one line */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+          <div className="flex flex-wrap gap-6">
+            {[
+              { label: "Signer", value: recipientType.SIGNER },
+              { label: "In Person Signer", value: recipientType.INPERSONSIGNER },
+              { label: "CC", value: recipientType.CC },
+            ].map((option) => (
+              <label key={option.value} className="flex items-center gap-2 text-gray-700 text-sm cursor-pointer">
+                <input
+                  type="radio"
+                  name="recipient-type"
+                  value={option.value}
+                  checked={recipient.type === option.value}
+                  onClick={(e) => setRecipients({ ...recipient, type: e.target.value })}
+                  className="accent-[var(--primary)] cursor-pointer"
+                />
+                {option.label}
+              </label>
+            ))}
+          </div>
+
+         {!showCard && <button
+            type="submit"
+            className="inline-flex items-center gap-2 bg-[var(--primary)] hover:bg-[var(--primaryLight2)] text-white text-sm font-semibold px-5 py-2 rounded-md transition"
+          >
+            <FaPlus size={14} /> {editCase === "Edit" ? "Edit Recipient" : "Add Recipient"}
+          </button>}
         </div>
-      )}
-
-
-
-      {/* Signing options + Add button in one line */}
-      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-        <div className="flex flex-wrap gap-6">
-          {[
-            { label: "Signer", value: recipientType.SIGNER },
-            { label: "In Person Signer", value: recipientType.INPERSONSIGNER },
-            { label: "CC", value: recipientType.CC },
-          ].map((option) => (
-            <label key={option.value} className="flex items-center gap-2 text-gray-700 text-sm cursor-pointer">
-              <input
-                type="radio"
-                name="recipient-type"
-                value={option.value}
-                defaultChecked={option.value === recipientType.SIGNER}
-                onClick={(e) => setRecipients({ ...recipient, type: e.target.value })}
-                className="accent-[var(--primary)] cursor-pointer"
-              />
-              {option.label}
-            </label>
-          ))}
-        </div>
-
-        <button
-          type="submit"
-          className="inline-flex items-center gap-2 bg-[var(--primary)] hover:bg-[var(--primaryLight2)] text-white text-sm font-semibold px-5 py-2 rounded-md transition"
-        >
-          <FaPlus size={14} /> {editCase === "Edit" ? "Edit Recipient" : "Add Recipient"}
-        </button>
-      </div>
-    </form>
-</div>
+      </form>
+    </div>
   );
 };
 

src/components/process/processStepOne/RecipientCards.tsx

@@ -3,7 +3,7 @@ import {
     removeRecipientAsync,
     removeSelectedRecipient,
     // setSigningOrder,
-    updateRecipientOrder, // 👈 You need to define this in your slice
+    updateRecipientOrder,
 } from "../../../store/slices/selectedRecipientsSlice";
 import { AppDispatch, RootState } from "../../../store/store";
 
@@ -14,6 +14,7 @@ import SigningOrderDiagram from "../../../SigningOrderDiagram ";
 import { IoCloseOutline } from "react-icons/io5";
 import { useParams } from "react-router-dom";
 import { FiEdit } from "react-icons/fi";
+import { RiPencilFill } from "react-icons/ri";
 
 const getInitials = (name: string) => {
     if (!name) return "";
@@ -25,12 +26,19 @@ const getInitials = (name: string) => {
 };
 
 type CardsData = {
+    userEmail: string;
+    getMinRoutingOrder: () => number;
+    editRecipient: any;
     setEditRecipient: (recipient: any) => void; // Replace `any` with the actual type if known
     setEditCase: (string: any) => void;
     transactionTemplateToggle: string
+    editRecipient: any
+    setEditRecipientCurrentEmail: any,
+    editRecipientCurrentEmail: string
 };
 
-const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle }: CardsData) => {
+
+const RecipientCards = ({ userEmail, getMinRoutingOrder, setEditRecipient, setEditCase, transactionTemplateToggle, editRecipient, editCase, setEditRecipientCurrentEmail, editRecipientCurrentEmail }: CardsData) => {
     const templateId = useParams<{ templateId: string }>().templateId;
     let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
 
@@ -52,14 +60,21 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
     };
 
     const handleEditRecipient = (recipient) => {
+
+        const provideOwnTags = userEmail === recipient.email && (recipient.routingOrder ?? 1) === getMinRoutingOrder() ? true : false;
         // alert(JSON.stringify(recipient))
         setEditCase('Edit')
-        setEditRecipient(recipient)
+        setEditRecipient({...recipient, provideOwnTags})
+
+        if (recipient.uuid) {
+            setEditRecipientCurrentEmail(recipient.uuid)
+        } else {
+            setEditRecipientCurrentEmail(recipient.id)
+        }
     }
 
     const handleRemoveRecipient = (recipient) => {
         if (!accountId || !transactionId) return;
-// <<<<<<< HEAD
         // dispatch(removeSelectedRecipient(recipient))
         // dispatch(removeRecipientAsync([{
         //     recipientId: recipient.id,
@@ -67,7 +82,7 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
         //     accountId: accountId,
         //     transactionId: transactionId,
         // }]))
-// =======
+        // =======
         if (recipient.uuid) {
             dispatch(removeSelectedRecipient(recipient))
         } else {
@@ -78,7 +93,6 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
                 transactionId: transactionId,
             }))
         }
-// >>>>>>> origin/main
         if (recipients.length === 2) {
             let leftRecipient = recipients.filter((obj) => {
                 if ("id" in obj && "id" in recipient) {
@@ -131,29 +145,34 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
                         {recipients.map((recipient, idx) => (
                             <div
                                 key={recipient.email + idx}
-                                className="flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors"
+                                className={`flex items-center justify-between px-4  py-3 hover:bg-gray-50 transition-colors ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail ? "bg-neutral-100  opacity-40 " : ""}`}
                             >
                                 <div className="flex items-center gap-3 min-w-0">
                                     {/* {signingOrder && ( */}
-                                    {recipients.length > 1 ? <input
-                                        type="number"
-                                        value={recipient.routingOrder || 1}
-                                        min={1}
-                                        onChange={(e) =>
-                                            handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
-                                        }
-                                        className="w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)]"
-                                    /> : <input
-                                        type="number"
-                                        disabled
-                                        value={recipient.routingOrder || 1}
-                                        min={1}
-                                        onChange={(e) =>
-                                            handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
-                                        }
-                                        className="w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)]"
-                                    />}
-                                    {/* )} */}
+                                    {recipients.length > 1 ? <div className="relative">
+                                        <input
+                                            type="number"
+                                            value={recipient.routingOrder ? recipient.routingOrder : ""}
+                                            // min={1}
+                                            onChange={(e) => {
+                                                let val = e.target.value.replace(/^0+(?=\d)/, "");
+                                                console.log(val, "Line 155")
+                                                handleOrderChange(recipient.id || recipient.email, Number(val))
+                                            }}
+                                            className="w-10 h-6  text-center rounded text-sm text-gray-600  focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400 bg-slate-100"
+                                        />
+                                        {/* <RiPencilFill className="absolute top-1.5 right-0 text-[14px] text-gray-500" /> */}
+                                    </div>
+                                        : <input
+                                            type="number"
+                                            disabled
+                                            value={recipient.routingOrder}
+                                            min={1}
+                                            onChange={(e) =>
+                                                handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
+                                            }
+                                            className="w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)]"
+                                        />}
 
                                     <div className="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--primary)] text-white flex items-center justify-center font-semibold text-xs select-none">
                                         {getInitials(`${recipient.firstName} ${recipient.lastName || ""}`)}
@@ -211,7 +230,8 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
 
                                 )}
                             </div>
-                        ))}
+                        )
+                        )}
                     </div>
                 </>
             ) : (
@@ -220,11 +240,10 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
                 </div>
             )}
 
-
             {signingOrderModal.open &&
                 <div className="fixed top-0 left-0 inset-0 z-50 bg-black/50 backdrop-blur-sm flex justify-center items-center">
                     <div className="flex-col relative justify-center items-center max-w-[80%] max-h-[60vh] h-full overflow-auto">
-                        <div className="pb-2 text-white flex justify-between items-center">
+                        <div className="p-2 rounded-t-lg text-white flex justify-between items-center bg-[var(--primary)]">
                             <p className="font-semibold">Signing Order</p>
                             <div
                                 onClick={() => setSigningOrderModal({ ...signingOrderModal, open: false })}

src/components/process/processStepOne/SelectedDocuments.tsx

@@ -13,6 +13,7 @@ import DocumentCard from './DocumentCard';
 import { useParams } from 'react-router-dom';
 import { toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice';
 
+
 const SelectedDocuments = ({transactionTemplateToggle}) => {
     // let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
 
@@ -51,8 +52,10 @@ const SelectedDocuments = ({transactionTemplateToggle}) => {
 
      const handleUpload = (filesToUpload: File[]) => {
         const formData = new FormData();
-        formData.append("file", filesToUpload[0])
-        console.log(formData, "Line 59")
+
+        filesToUpload.forEach(file => {
+            formData.append("file", file);
+        });
         // filesToUpload.forEach((file) => formData.append("document", file));
 
         dispatch(uploadDocuments({ formData, accountId, transactionId }))
@@ -91,6 +94,15 @@ const SelectedDocuments = ({transactionTemplateToggle}) => {
             id='upload-doc-step-one'
             className="flex flex-wrap gap-3">
                 {/* Uploaded documents */}
+                <div
+                    onClick={() => setModalOpen(true)}
+                    className="cursor-pointer w-[160px] h-[170px] flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-xl bg-white hover:bg-gray-50 transition shadow-sm hover:shadow-md"
+                >
+                    <FaPlus className="text-[var(--primary)] text-3xl mb-2" />
+                    <p className="text-sm text-gray-600 text-center px-2">Upload Document</p>
+                </div>
+
+                {/* Document Show */}
                 <ReactSortable
                     className="flex flex-wrap gap-3"
                     list={documents.map(doc => ({ ...doc }))}
@@ -105,13 +117,7 @@ const SelectedDocuments = ({transactionTemplateToggle}) => {
                     ))}
                 </ReactSortable>
 
-                <div
-                    onClick={() => setModalOpen(true)}
-                    className="cursor-pointer w-[160px] h-[170px] flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-xl bg-white hover:bg-gray-50 transition shadow-sm hover:shadow-md"
-                >
-                    <FaPlus className="text-[var(--primary)] text-3xl mb-2" />
-                    <p className="text-sm text-gray-600 text-center px-2">Upload Document</p>
-                </div>
+                
             </div>
 
             {/* Modal */}

src/components/process/processStepOne/SelfSignWarnModal.tsx

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

src/components/process/processStepTwo/DocumentContainer.tsx

@@ -4,7 +4,7 @@ import { RootState } from '../../../store/store'
 
 import api from '../../../config/api';
 
-import RightSideBar from './rightSideBar/RightSideBar';
+import RightSideBar, { MASKTYPE, TEXT } from './rightSideBar/RightSideBar';
 import { DroppedItem, TagsTypes } from '../../../utlity/types';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -21,6 +21,7 @@ import Loader from '../../dashboard/Loader';
 import { handleGroupBorderPosition } from '../../../utlity/tagGroupConUtils';
 import { hideLoader, showLoader } from '../../../store/slices/loaderSlice';
 import { IsSendInterface } from './ProcessStepTwo';
+import DroppedItemsTagsCon from './DroppedItemsTagsCon';
 
 export interface DroppedItemsObj {
     [key: string]: DroppedItem[]
@@ -40,11 +41,13 @@ export const droppedTagsDefaultField: DroppedTagsDefaultFieldType = {
 }
 
 interface DocumentContainerProps {
+    transactionSaving: boolean;
+    setTransactionSaving: React.Dispatch<React.SetStateAction<boolean>>;
     isSend: boolean | null;
     setIsSend: React.Dispatch<React.SetStateAction<boolean | null>>;
 }
 
-const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
+const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving, setTransactionSaving, isSend }) => {
     let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
     const dispatch = useDispatch();
     const params = useParams<{ accountId?: string; transactionId?: string; templateId?: string }>();
@@ -75,37 +78,134 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
         selectedDocuments.length === 0 && dispatch(fetchDocuments({ accountId, transactionId }));
     }, [])
 
-    console.log(droppedItems, "line 78")
+
+    const fetchTags = async () => {
+        try {
+            const requests = selectedRecipients.map((recipient) =>
+                api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipient.id}/tags`)
+            );
+            const response = await Promise.all(requests);
+            let recTags = {}
+            for (const res of response) {
+                for (const tag of res.data) {
+                    const key = `${tag.documentId}_${tag.pageIndex}`;
+                    if (recTags[key]) {
+                        recTags[key].push(tag);
+                    } else {
+                        recTags[key] = [tag]; // Initialize with an array
+                    }
+                }
+            }
+
+            // let updatedTags = { ...recTags }
+            // let tagsData = []
+
+            // for (const dropPageIds of Object.keys(updatedTags)) {
+
+            //     for (const dropTag of updatedTags[dropPageIds]) {
+            //         let mask = null
+
+            //         // console.log(dropTag, "line 132")
+
+            //         // if (dropTag.subType?.toLowerCase() === "password") {
+            //         //     console.log(dropTag)
+            //         mask = {
+            //             "type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null,
+            //             "character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null
+            //         }
+            //         // }
+
+            //         // console.log(dropTag, "line 204")
+
+            //         const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
+
+            //         const updatedTagData = {
+            //             "id": "id" in dropTag ? dropTag.id : null,
+            //             "label": dropTag.label,
+            //             "dimensions": dropTag.dimensions,
+            //             "type": dropTag.type.toUpperCase(),
+            //             // "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null),
+            //             "minLength": "minLength" in dropTag ? dropTag.minLength : 0,
+            //             "maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0,
+            //             "error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error",
+            //             "regex": "regex" in dropTag ? dropTag.regex : []
+            //             // }
+            //             ,
+            //             "documentId": dropTag.documentId,
+            //             "options": ("options" in dropTag) ? dropTag.options : [],
+            //             "pageIndex": dropTag.pageIndex,
+            //             "recipientId": dropTag.recipientId,
+            //             "styles": "styles" in dropTag ? dropTag.styles : {
+            //                 "font": "",
+            //                 "italic": false,
+            //                 "bold": false,
+            //                 "underline": false,
+            //                 "color": "black",
+            //                 "textSize": 0
+            //             },
+            //             "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true,
+            //             // "required": "required" in dropTag ? dropTag.required : ,
+            //             "update": "update" in dropTag ? dropTag.update : false,
+            //             "readOnly": false,
+            //         }
+
+            //         // if ("format" in dropTag) {
+            //         //     updatedTagData.format = `${dropTag.subType}`.toUpperCase();
+            //         //     updatedTagData.dateFormat = dropTag.format;
+            //         //     updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
+            //         // }
+
+            //         if("format" in dropTag && dropTag.format) {
+            //             updatedTagData.subType = dropTag.format.toLowerCase(); 
+            //             updatedTagData.format = dropTag.dateFormat; 
+            //         }
+
+            //         if (`${dropTag.type}`.toLowerCase() === "number") {
+            //             updatedTagData.decimalPlace = dropTag.decimalPlace
+            //             updatedTagData.isCurrency = dropTag.isCurrency
+            //         }
+
+            //         if (dropTag.type === "TEXT") {
+            //             // updatedTagData.multiLine = dropTag.subType === "paragraph"
+
+            //             if(dropTag.multiLine) {
+            //                 updatedTagData.subtype = TEXT.PARAGRAPH
+            //             } else {
+            //                 updatedTagData.subtype = TEXT.SINGLE_LINE
+            //             } 
+
+            //             if ("maskType" in dropTag) {
+            //                 updatedTagData.maskCharacter = mask.character
+            //                 updatedTagData.maskType = mask.type
+            //             }
+            //         }
+
+            //         // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required;
+
+            //         if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT"
+            //         if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT"
+
+            //         if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
+
+            //         if (!updatedTagData.id) delete updatedTagData.id;
+
+            //         if (!isDeleted) {
+            //             // sendTags.mod.push(updatedTagData);
+            //             tagsData.push(updatedTagData)
+            //         }
+            //     }
+            // }
+
+            setDroppedItems(recTags)
+            // Handle your response here
+        } catch (err) {
+            console.error(err);
+        }
+    };
 
     // FETCHING TAG - START
     useEffect(() => {
         if (selectedRecipients.length === 0) return;
-
-        const fetchTags = async () => {
-            try {
-                const requests = selectedRecipients.map((recipient) =>
-                    api.get(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipient.id}/tags`)
-                );
-                const response = await Promise.all(requests);
-                let recTags = {}
-                for (const res of response) {
-                    for (const tag of res.data) {
-                        const key = `${tag.documentId}_${tag.pageIndex}`;
-                        if (recTags[key]) {
-                            recTags[key].push(tag);
-                        } else {
-                            recTags[key] = [tag]; // Initialize with an array
-                        }
-                    }
-                }
-                // console.log(recTags, "Line 83");
-                setDroppedItems(recTags)
-                // Handle your response here
-            } catch (err) {
-                console.error(err);
-            }
-        };
-
         fetchTags();
     }, [selectedRecipients]);
 
@@ -125,17 +225,14 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
 
     const groupByRecipientId = (tagsArray: any[]) => {
         const tagsData: Record<number, any[]> = {};
-
         for (const tag of tagsArray) {
             const recipientId = tag.recipientId;
 
             if (!tagsData[recipientId]) {
                 tagsData[recipientId] = [];
             }
-
             tagsData[recipientId].push(tag);
         }
-
         return tagsData;
     };
 
@@ -159,14 +256,15 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
                 }
                 if (updateTags.length && "update" in updateTags[updateTags.length - 1]) {
                     delete updateTags[updateTags.length - 1].update
+                    delete updateTags[updateTags.length - 1].icon
                 }
             }
 
             updatedData[recipientId] = updateTags
         }
 
-
-        const requests = Object.entries(updatedData).map(([recipientId, tags]) => {
+        const requests = Object.entries(updatedData).filter(([recipientId, tags]) => {
+            if (tags.length === 0) return false;
             return api.put(
                 `/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags`,
                 tags
@@ -175,6 +273,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
 
         try {
             const responses = await Promise.all(requests);
+
             const droppedItemsUpdateFalse = Object.fromEntries(
                 Object.entries(droppedItems).map(([recipientId, tags]) => {
                     return [recipientId, tags.map(tag => ({ ...tag, update: false }))];
@@ -183,7 +282,7 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
 
             console.log(droppedItemsUpdateFalse, "Line 182")
 
-            setDroppedItems(droppedItemsUpdateFalse);
+            // setDroppedItems(droppedItemsUpdateFalse);
         } catch (error) {
             console.error("Error submitting recipient tags:", error);
         }
@@ -191,130 +290,123 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
 
 
     const handleTransactionProcess = async (save: boolean = false) => {
-        console.log(droppedItems, "called Line 189");
-        
+        if (Object.keys(droppedItems).length === 0) return;
         if (!save && isSend === null) return;
 
-        !save && dispatch(showLoader("Loading ..."))
+        // !save && dispatch(showLoader("Loading ..."))
 
-        let updatedTags = { ...droppedItems }
+        // let updatedTags = { ...droppedItems }
 
         // const sendTags = {
         //     "mod": [],
         //     "remove": []
         // }
 
-        let tagsData = []
+        // let tagsData = []
 
         // const modified = []
         // const remove = []
 
         // console.log(updatedTags, "updatedTags");
-        for (const dropPageIds of Object.keys(updatedTags)) {
-            for (const dropTag of updatedTags[dropPageIds]) {
-                let mask = null
+        // for (const dropPageIds of Object.keys(updatedTags)) {
+        //     for (const dropTag of updatedTags[dropPageIds]) {
+        //         let mask = null
 
-                // console.log(dropTag, "line 132")
+        //         // console.log(dropTag, "line 132")
 
-                // if (dropTag.subType?.toLowerCase() === "password") {
-                //     console.log(dropTag)
-                mask = {
-                    "type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null,
-                    "character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null
-                }
-                // }
+        //         // if (dropTag.subType?.toLowerCase() === "password") {
+        //         //     console.log(dropTag)
+        //         mask = {
+        //             "type": dropTag.maskType ? `${dropTag.maskType}`.toUpperCase() : null,
+        //             "character": dropTag.maskCharacter ? `${dropTag.maskCharacter}`.toUpperCase() : null
+        //         }
+        //         // }
 
-                // console.log(dropTag, "line 204")
+        //         // console.log(dropTag, "line 204")
 
-                const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
+        //         const isDeleted = "isDeleted" in dropTag ? dropTag.isDeleted : false
 
-                const updatedTagData = {
-                    "id": "id" in dropTag ? dropTag.id : null,
-                    "label": dropTag.label,
-                    "dimensions": dropTag.dimensions,
-                    "type": dropTag.type.toUpperCase(),
-                    // "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null),
-                    "minLength": "minLength" in dropTag ? dropTag.minLength : 0,
-                    "maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0,
-                    "error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error",
-                    "regex": "regex" in dropTag ? dropTag.regex : []
-                    // }
-                    ,
-                    "documentId": dropTag.documentId,
-                    "options": ("options" in dropTag) ? dropTag.options : [],
-                    "pageIndex": dropTag.pageIndex,
-                    "recipientId": dropTag.recipientId,
-                    "styles": "styles" in dropTag ? dropTag.styles : {
-                        "font": "",
-                        "italic": false,
-                        "bold": false,
-                        "underline": false,
-                        "color": "black",
-                        "textSize": 0
-                    },
-                    "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true,
-                    // "required": "required" in dropTag ? dropTag.required : ,
-                    "update": "update" in dropTag ? dropTag.update : false,
-                    "readOnly": false,
-                }
+        //         const updatedTagData = {
+        //             "id": "id" in dropTag ? dropTag.id : null,
+        //             "label": dropTag.label,
+        //             "dimensions": dropTag.dimensions,
+        //             "type": dropTag.type.toUpperCase(),
+        //             // "subType": (dropTag.subType ? dropTag.subType.toUpperCase() : null),
+        //             "minLength": "minLength" in dropTag ? dropTag.minLength : 0,
+        //             "maxLength": "maxLength" in dropTag ? dropTag.maxLength : 0,
+        //             "error": ("error" in dropTag && dropTag.error) ? `${dropTag.error}`.toUpperCase() : "error",
+        //             "regex": "regex" in dropTag ? dropTag.regex : []
+        //             // }
+        //             ,
+        //             "documentId": dropTag.documentId,
+        //             "options": ("options" in dropTag) ? dropTag.options : [],
+        //             "pageIndex": dropTag.pageIndex,
+        //             "recipientId": dropTag.recipientId,
+        //             "styles": "styles" in dropTag ? dropTag.styles : {
+        //                 "font": "",
+        //                 "italic": false,
+        //                 "bold": false,
+        //                 "underline": false,
+        //                 "color": "black",
+        //                 "textSize": 0
+        //             },
+        //             "required": (dropTag.type.toUpperCase() !== "SIGNATURE" && dropTag.type.toUpperCase() !== "INITIALS") ? dropTag.required : true,
+        //             // "required": "required" in dropTag ? dropTag.required : ,
+        //             "update": "update" in dropTag ? dropTag.update : false,
+        //             "readOnly": false,
+        //         }
 
-                if ("format" in dropTag) {
-                    updatedTagData.format = `${dropTag.subType}`.toUpperCase();
-                    updatedTagData.dateFormat = dropTag.format;
-                    updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
-                }
+        //         if ("format" in dropTag) {
+        //             updatedTagData.format = `${dropTag.subType}`.toUpperCase();
+        //             updatedTagData.dateFormat = dropTag.format;
+        //             updatedTagData.currentTimeStamp = dropTag.currentTimeStamp
+        //         }
 
-                if (`${dropTag.type}`.toLowerCase() === "number") {
-                    updatedTagData.decimalPlace = dropTag.decimalPlace
-                    updatedTagData.isCurrency = dropTag.isCurrency
-                }
+        //         if (`${dropTag.type}`.toLowerCase() === "number") {
+        //             updatedTagData.decimalPlace = dropTag.decimalPlace
+        //             updatedTagData.isCurrency = dropTag.isCurrency
+        //         }
 
-                if (updatedTagData.type === "TEXT") {
-                    updatedTagData.multiLine = dropTag.subType === "paragraph"
-                    if (dropTag.subType === "password") {
-                        updatedTagData.maskCharacter = mask.character
-                        updatedTagData.maskType = mask.type
-                    }
-                }
+        //         if (updatedTagData.type === "TEXT") {
+        //             updatedTagData.multiLine = dropTag.subType === "paragraph"
+        //             if (dropTag.subType === "password") {
+        //                 updatedTagData.maskCharacter = mask.character
+        //                 updatedTagData.maskType = mask.type
+        //             }
+        //         }
 
-                // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required;
+        //         // if ("required" in updatedTagData && !updatedTagData.required) delete updatedTagData.required;
 
-                if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT"
-                if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT"
+        //         if (updatedTagData.subType === 'SINGLE SELECT') updatedTagData.subType = "SINGLE_SELECT"
+        //         if (updatedTagData.subType === 'MULTI SELECT') updatedTagData.subType = "MULTI_SELECT"
 
-                if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
+        //         if (updatedTagData.options && !updatedTagData.options.length) delete updatedTagData.options;
 
-                if (!updatedTagData.id) delete updatedTagData.id;
+        //         if (!updatedTagData.id) delete updatedTagData.id;
 
-                if (!isDeleted) {
-                    // sendTags.mod.push(updatedTagData);
-                    tagsData.push(updatedTagData)
-                }
-            }
+        //         if (!isDeleted) {
+        //             // sendTags.mod.push(updatedTagData);
+        //             tagsData.push(updatedTagData)
+        //         }
+        //     }
+        // }
+
+        let updatedTags: any = [];
+
+        for (const dropPagesId of Object.keys(droppedItems)) {
+            console.log("Dropped Item:", droppedItems[dropPagesId]);
+            updatedTags.push(...droppedItems[dropPagesId]);
         }
 
-        // for(const recipient of selectedRecipients) {
-        //     const recrecipient
-        // }
-
-
-        tagsData = groupByRecipientId(tagsData);
-
-        console.log(tagsData, "Line 302");
-
+        let tagsData = groupByRecipientId(updatedTags);
         await sendTagsToRecipients(tagsData, accountId, transactionId);
-
-
+        return
         // 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())
-        // }
-
+        if (!save) {
+            const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
+            dispatch(hideLoader())
+        }
         // SENDING Transaction - END
-
     }
 
     // Save Tags - START
@@ -323,13 +415,24 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
     }, [isSend])
     // Save Tags - END
 
+    // handleTransactionSaving - START
+
     // useEffect(() => {
-    //     setTimeout(() => {
-    //         setInterval(async () => {
-    //             await handleTransactionProcess(true);
-    //         }, 8000)
+    //     const interval = setInterval(async () => {
+    //         setTransactionSaving(true)
     //     }, 8000)
-    // }, [])
+    //     return () => clearInterval(interval);
+    // }, [droppedItems])
+
+    // handleTransactionSaving - END
+
+    useEffect(() => {
+        if (transactionSaving) {
+            setTimeout(() => {
+                setTransactionSaving(false)
+            }, 1000)
+        }
+    }, [transactionSaving])
 
     const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
         event.preventDefault(); // Allows the drop event to work
@@ -337,7 +440,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
 
     // HANDLE DROP - START
     const handleDrop = (event: React.DragEvent<HTMLDivElement>, docId: string, documentId: number, pageIndex: number) => {
-        console.log("// HANDLE DROP - START")
         event.preventDefault();
 
         const data = window.dragElemData;
@@ -359,25 +461,12 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
         const key = `${docId}_${pageIndex}`;
         // const IconComponent = typeToIconMap[field.type] || <FaQuestionCircle />;
 
-        // Handling Initia Width and height of Some tags - START
-        if (dragElemData.label === TagsTypes.STAMP) {
-            dragElemData.width = 160
-            dragElemData.height = 160
-        } else if (dragElemData.label === TagsTypes.SIGNATURE) {
-            dragElemData.width = 200
-            dragElemData.height = 75
-        } else if (dragElemData.label === TagsTypes.INITIALS) {
-            dragElemData.width = 85
-            dragElemData.height = 75
-        }
-        // Handling Initia Width and height of Some tags - END
-
         let prepData = {
-            properties: data.properties,
+            ...data.properties,
             icon: typeToIconMap[field.label.toUpperCase()] || <FaQuestionCircle />,
             type: dragElemData.label,
             label: dragElemData.label,
-            subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
+            // subType: (dragElemData.label in droppedTagsDefaultField) ? droppedTagsDefaultField[dragElemData.label] : '',
             dimensions: {
                 left: x,
                 top: y,
@@ -430,142 +519,18 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
                 prepData],
         }
 
-        // const dataToSet: DroppedItemsObj = {
-        //     ...droppedItems,
-        //     [key]: [...(droppedItems[key] || []),
-        //     {
-        //         ...prepData,
-        //         radioGroups: dragElemData.label === "radio" ?
-        //             [
-        //                 {
-        //                     ...prepData,
-        //                     dimensions: {
-        //                         ...prepData.dimensions, top: 8, left: 10
-        //                     }
-        //                 },
-        //                 {
-        //                     ...prepData, dimensions: {
-        //                         ...prepData.dimensions,
-        //                         top: 8,
-        //                         left: 10
-        //                     }
-        //                 }
-        //             ]
-        //             :
-        //             []
-        //     }],
-        // }
-
-        // if (dragElemData.label === "radio") {
-        //     setDroppedItems(dataToSet);
-        // } else {
-        //     setDroppedItems(dataToSet);
-        // }
-
         console.log("data311", dataToSet)
         setDroppedItems(dataToSet);
         setDroppedItemsCounter((prev) => prev + 1);
 
         setTimeout(() => {
             const tagIndex = key in droppedItems ? droppedItems[key].length : 0;
-            handleTagClick(key, tagIndex)
+            setSelectedTag({ key, tagIndex })
         }, 0)
     };
     // HANDLE DROP - END
 
-    // HANDLE TAG MOUSE DOWN - START
-    // Updated handleTagMouseDown function with proper group border positioning
-    const handleTagMouseDown = (event: React.MouseEvent<HTMLDivElement>, key: string, index: number) => {
-        event.preventDefault();
 
-        let targetContainer = event?.currentTarget?.parentElement?.parentElement;
-        let targetElement = event?.currentTarget?.parentElement;
-
-        if (!targetContainer || !targetElement) return;
-
-        const containerRect = targetContainer.getBoundingClientRect();
-        const elementRect = targetElement.getBoundingClientRect();
-
-        // Calculate the initial offset (where the mouse was clicked inside the element)
-        const offsetX = event.clientX - elementRect.left;
-        const offsetY = event.clientY - elementRect.top;
-
-        const conScrollWidth = targetContainer?.scrollWidth;
-        const conScrollHeight = targetContainer?.scrollHeight;
-
-        let isGroupAttr = event.currentTarget.hasAttribute("group");
-        let groupId = null;
-        if (isGroupAttr) {
-            groupId = event.currentTarget.getAttribute("group");
-        }
-
-        let groupElements: NodeListOf<HTMLElement> | null = null;
-        if (isGroupAttr && groupId) {
-            groupElements = document.querySelectorAll(`div[group="${groupId}"]`);
-            // Show initial border position during drag start
-            handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY);
-        }
-
-        const handleMouseMove = (event: MouseEvent) => {
-            // Get new X and Y positions relative to the container
-            let left = event.clientX - containerRect.left - offsetX;
-            let top = event.clientY - containerRect.top - offsetY;
-
-            // Restrict movement within container bounds
-            left = Math.max(0, Math.min(left, conScrollWidth - elementRect.width));
-            top = Math.max(0, Math.min(top, conScrollHeight - elementRect.height));
-
-            // Apply the movement to the element first
-            setDroppedItems(prevState => ({
-                ...prevState,
-                [key]: Array.isArray(prevState[key])
-                    ? prevState[key].map((item, i) =>
-                        i === index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
-                    )
-                    : [],
-            }));
-
-            // Update group border position during drag if it's a group element
-            if (groupElements != null && groupElements.length) {
-                // Use a small timeout to ensure DOM is updated before recalculating borders
-                requestAnimationFrame(() => {
-                    handleGroupBorderPosition(groupElements!, containerRect, offsetX, offsetY);
-                });
-            }
-        };
-
-        const handleMouseUp = () => {
-            // CRITICAL: Ensure group borders are properly positioned after drag ends
-            if (groupElements != null && groupElements.length && groupId) {
-                // Multiple approaches to ensure the positioning works:
-
-                // 1. Immediate update
-                setTimeout(() => {
-                    handleIGroupBorderPosition(groupId);
-                }, 10);
-
-                // 2. Secondary update to ensure it's properly positioned
-                setTimeout(() => {
-                    handleIGroupBorderPosition(groupId);
-                }, 100);
-
-                // 3. Final update using requestAnimationFrame for DOM sync
-                requestAnimationFrame(() => {
-                    setTimeout(() => {
-                        handleIGroupBorderPosition(groupId);
-                    }, 50);
-                });
-            }
-
-            document.removeEventListener("pointermove", handleMouseMove);
-            document.removeEventListener("pointerup", handleMouseUp);
-        };
-
-        // Add event listeners
-        document.addEventListener("pointermove", handleMouseMove);
-        document.addEventListener("pointerup", handleMouseUp);
-    };
-    // HANDLE TAG MOUSE DOWN - END
 
     // HANDLE EXPAND TAG - START
     const handleExpandTag = (event: React.MouseEvent<HTMLDivElement>, key: string, index: number) => {
@@ -623,99 +588,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
     };
     // HANDLE EXPAND TAG - END
 
-    const handleTagClick = (key: string, index: number) => {
-        setSelectedTag({ key, index })
-    }
-
-    // Updated handleRemoveTag function with your existing API logic and group handling
-    const handleRemoveTag = (key: string, targetIndex: number) => {
-        const tag = droppedItems[key][targetIndex];
-        const recipientId = tag.recipientId;
-
-        (async () => {
-            if ("id" in tag) {
-                try {
-                    const response = await api.delete(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags/${tag.id}`)
-                    if (response.status !== 200) throw "Tag Deletion error"
-                } catch (err) {
-                    console.error("Tag Deletion error")
-                    return;
-                }
-            }
-
-            setSelectedTag(null);
-
-            // Check if this item has a group for special group handling
-            if ('group' in tag && tag.group) {
-                const groupId = tag.group;
-
-                // Find all items in the same group
-                const groupItems = droppedItems[key]
-                    .map((item, idx) => ({ item, index: idx }))
-                    .filter(({ item }) => 'group' in item && item.group === groupId && !item.isDeleted);
-
-                // Sort group items by their top position to identify the parent (top-most)
-                groupItems.sort((a, b) => a.item.dimensions.top - b.item.dimensions.top);
-
-                // Check if the item being removed is the parent (top-most item)
-                const isParentItem = groupItems.length > 0 && groupItems[0].index === targetIndex;
-
-                if (isParentItem && groupItems.length > 1) {
-                    // If removing the parent and there are child items, mark all items in the group as deleted
-                    console.log(`Removing parent item and all children for group: ${groupId}`);
-
-                    // Get indices of all group items to mark as deleted
-                    const indicesToDelete = groupItems.map(({ index }) => index);
-
-                    setDroppedItems(prevState => ({
-                        ...prevState,
-                        [key]: prevState[key].map((item, index) =>
-                            indicesToDelete.includes(index) ? { ...item, isDeleted: true } : item
-                        )
-                    }));
-
-                    // Remove group border elements after state update
-                    setTimeout(() => {
-                        removeGroupBorders(groupId);
-                    }, 100);
-
-                } else {
-                    // If removing a child item or the only item in group, just mark this item as deleted
-                    console.log(`Removing individual item from group: ${groupId}`);
-
-                    setDroppedItems(prevState => ({
-                        ...prevState,
-                        [key]: prevState[key].map((item, index) =>
-                            index === targetIndex ? { ...item, isDeleted: true } : item
-                        )
-                    }));
-
-                    // Check if this was the last item in the group after state update
-                    setTimeout(() => {
-                        const remainingGroupItems = droppedItems[key].filter(item =>
-                            'group' in item && item.group === groupId && !item.isDeleted
-                        );
-
-                        if (remainingGroupItems.length === 0) {
-                            // Remove group borders if no items left
-                            removeGroupBorders(groupId);
-                        } else {
-                            // Update group borders for remaining items
-                            handleIGroupBorderPosition(groupId);
-                        }
-                    }, 100);
-                }
-            } else {
-                // Handle non-group item removal (your existing logic)
-                setDroppedItems(prevState => ({
-                    ...prevState,
-                    [key]: prevState[key].map((item, index) =>
-                        index === targetIndex ? { ...item, isDeleted: true } : item
-                    )
-                }));
-            }
-        })()
-    };
 
     // Helper function to remove group border elements from DOM
     const removeGroupBorders = (groupId: string) => {
@@ -943,83 +815,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
         return () => clearTimeout(timeoutId);
     }, [droppedItems]); // Re-run when droppedItems changes
 
-
-    const handleDirectionalMove = (direction: 'up' | 'down' | 'left' | 'right', stepSize: number = 5) => {
-        if (!selectedTag) return;
-
-        const { key, index } = selectedTag;
-        const currentItem = droppedItems[key]?.[index];
-
-        if (!currentItem) return;
-
-        let newLeft = currentItem.dimensions.left;
-        let newTop = currentItem.dimensions.top;
-
-        switch (direction) {
-            case 'up':
-                newTop = Math.max(0, newTop - stepSize);
-                break;
-            case 'down':
-                newTop = newTop + stepSize;
-                break;
-            case 'left':
-                newLeft = Math.max(0, newLeft - stepSize);
-                break;
-            case 'right':
-                newLeft = newLeft + stepSize;
-                break;
-        }
-
-        setDroppedItems({
-            ...droppedItems,
-            [key]: Array.isArray(droppedItems[key])
-                ? droppedItems[key].map((item, i) =>
-                    i === index
-                        ? { ...item, dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true }
-                        : item
-                )
-                : [],
-        });
-    };
-
-    const directionalControlsHandler = (direction: 'up' | 'down' | 'left' | 'right') => {
-        handleDirectionalMove(direction, 5); // Use default stepSize of 5
-    };
-
-    // Add this new handler function to your parent component
-    const handleDirectPositionChange = (newLeft: number, newTop: number) => {
-        console.log("handleDirectPositionChange", newLeft, newTop)
-        if (!selectedTag) return;
-
-        const { key, index } = selectedTag;
-        const currentItem = droppedItems[key]?.[index];
-
-        if (!currentItem) return;
-
-        // Ensure values are not negative
-        const clampedLeft = Math.max(0, newLeft);
-        const clampedTop = Math.max(0, newTop);
-
-        setDroppedItems({
-            ...droppedItems,
-            [key]: Array.isArray(droppedItems[key])
-                ? droppedItems[key].map((item, i) =>
-                    i === index
-                        ? {
-                            ...item,
-                            dimensions: {
-                                ...item.dimensions,
-                                left: clampedLeft,
-                                top: clampedTop
-                            },
-                            update: true
-                        }
-                        : item
-                )
-                : [],
-        });
-    };
-
     return (
         <>
             {/* Center Doc Container - START */}
@@ -1047,99 +842,14 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
                                                     className='drop-page-in shadow-md relative'
                                                 >
 
-                                                    {/* DROPPED ITEMS - Render only the dropped items for this specific docId and page - STARTS */}
-                                                    {droppedItems[key]?.map((item, index) => {
-                                                        if (item.isDeleted) return;
-
-                                                        const type = item.type.toUpperCase();
-                                                        const IconComponent = typeToIconMap[type] || <FaQuestionCircle />;
-                                                        const selectedRecipient = selectedRecipients.filter((obj, indx) => obj.id === item.recipientId);
-                                                        return (
-                                                            <React.Fragment key={index}>
-                                                                <div
-                                                                    // key={index}
-                                                                    draggable="false"
-                                                                    className="absolute rounded dropped-item"
-                                                                    onClick={() => handleTagClick(key, index)}
-                                                                    style={{
-                                                                        left: `${item.dimensions.left}px`,
-                                                                        top: `${item.dimensions.top}px`,
-                                                                        width: item.type === "radio" ? `${item.dimensions.width + 20}px` : `${item.dimensions.width}px`,
-                                                                        height: item.type === "radio" ? `max-content` : `${item.dimensions.height}px`
-                                                                    }}
-                                                                >
-
-
-                                                                    {/* If Selected Tag Recipient Info- START */}
-                                                                    {selectedTag?.key && selectedTag.key === key && selectedTag.index === index &&
-                                                                        <div className='absolute flex justify-between items-center w-full max-w-max bg-white top-[-22px] shadow z-20 text-sm rounded-t-sm' >
-                                                                            <div className='flex justify-center items-center gap-1 bg-white px-2 shadow'>
-                                                                                <p className='w-2.5 h-2.5 rounded'
-                                                                                    style={{ background: selectedRecipient[0]?.color }}
-                                                                                ></p>
-                                                                                <p
-                                                                                    className=''>{IconComponent}
-                                                                                </p>
-                                                                                <p className='capitalize text-ellipsis whitespace-nowrap'>{item.label}</p>
-                                                                                <IoMdClose onClick={(e) => {
-                                                                                    e.stopPropagation();
-                                                                                    handleRemoveTag(key, index)
-                                                                                }} className='cursor-pointer' />
-                                                                            </div>
-                                                                        </div>}
-                                                                    {/* If Selected Tag Recipient Info- END */}
-
-
-
-
-                                                                    {/* Expand Circle - STARTS */}
-                                                                    {item.type !== "radio" && item.type !== "checkbox" && <div
-                                                                        onPointerDown={(e) => handleExpandTag(e, key, index)}
-                                                                        className='w-2.5 h-2.5 absolute bg-red-400 rounded-full bottom-[-8px] right-[-8px] cursor-nw-resize hover:bg-blue-400'>
-                                                                    </div>}
-                                                                    {/* Expand Circle - ENDS */}
-
-                                                                    {/* Tag - START */}
-                                                                    {
-                                                                        <div
-                                                                            {...("group" in item && item.group ? { "group": item.group } : {})}
-                                                                            onPointerDown={(e) => handleTagMouseDown(e, key, index)}
-                                                                            className='p-2 rounded-sm h-full shadow opacity-40 cursor-grab w-full'
-                                                                            style={{ background: selectedRecipient[0]?.color }}
-                                                                        >
-                                                                            <p
-                                                                                className={`flex justify-center items-center w-full text-xl text-white h-full`}
-                                                                            // style={{ color: selectedRecipients[item.recipientIndx]?.color }}
-                                                                            >
-                                                                                {IconComponent}
-                                                                            </p>
-                                                                        </div>
-                                                                    }
-                                                                    {/* Tag - END */}
-
-                                                                </div>
-
-                                                                <>
-                                                                    {
-                                                                        "group" in item && item.group && "isGroupExist" in item && !item.isGroupExist &&
-                                                                        <>
-                                                                            <div className="group-border" border-group={item.group} border-pos="top"></div>
-                                                                            <div className="group-border" border-group={item.group} border-pos="right"></div>
-                                                                            <div className="group-border bottom-border" border-group={item.group} border-pos="bottom">
-                                                                                <div onClick={() => handleAddGroupItemClicked(key, item)}><IoAdd /></div>
-                                                                            </div>
-                                                                            <div className="group-border" border-group={item.group} border-pos="left"></div>
-                                                                        </>
-
-                                                                    }
-                                                                </>
-
-                                                            </React.Fragment>
-                                                        )
-                                                    }
-
-                                                    )}
-                                                    {/* Render only the dropped items for this specific docId and page - ENDS */}
+                                                    <DroppedItemsTagsCon
+                                                        droppedItems={droppedItems}
+                                                        key={key}
+                                                        selectedTag={selectedTag}
+                                                        setSelectedTag={setSelectedTag}
+                                                        accountId={accountId}
+                                                        transaction
+                                                    />
 
                                                     <img
                                                         style={{ "minWidth": page.width, "minHeight": page.height, "maxWidth": page.width, "maxHeight": page.height }}
@@ -1151,7 +861,6 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
                                                     />
 
 
-
                                                     {/* Side details of documents Pages and document Name - START */}
                                                     <p className='absolute top-[50%] translate-y-[-50%] rotate-[-90deg] text-xs left-[-60px] text-slate-600'>
                                                         page {indx + 1} of {doc.pages && doc.pages.length}
@@ -1177,17 +886,16 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ isSend }) => {
 
             </div >
 
-                {
-                    console.log(selectedTag, droppedItems, "Line 1175")
-                }
+            {selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag && <RightSideBar
+                droppedItems={droppedItems}
+                selectedTag={droppedItems[selectedTag.key][selectedTag.index]}
+                setDroppedItems={setDroppedItems}
+                selTagKey={selectedTag.key}
+                selTagIndx={selectedTag.index}
+                signClient={false}
+            />
 
-            {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,
-                stepSize: 5,
-                className: ''
-            }} />}
+            }
             {/* Center Doc Container - END */}
         </>
     )

src/components/process/processStepTwo/DroppedItemsTagsCon.tsx

@@ -0,0 +1,313 @@
+// Functions - START
+// handleTagClick
+
+
+import React from 'react'
+import { DroppedItemsObj } from './DocumentContainer';
+import typeToIconMap from '../../../helper/iconMap';
+import { IoMdClose } from 'react-icons/io';
+import { IoAdd } from 'react-icons/io5';
+import { DroppedItem } from '../../../utlity/types';
+import { FaQuestionCircle } from 'react-icons/fa';
+import api from '../../../config/api';
+
+interface DroppedItemsTagsConProps {
+    droppedItems: DroppedItemsObj;
+    key: string;
+    selectedTag: DroppedItem
+    setSelectedTag: React.Dispatch<React.SetStateAction<DroppedItem>>;
+    setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>;
+}
+
+const DroppedItemsTagsCon: React.FC<DroppedItemsTagsConProps> = ({ droppedItems, key, selectedTag, setSelectedTag }) => {
+
+    const handleTagClick = (key: string, index: number) => {
+        setSelectedTag({ key, index })
+    }
+
+    const handleRemoveTag = (key: string, targetIndex: number) => {
+        const tag = droppedItems[key][targetIndex];
+        const recipientId = tag.recipientId;
+
+        (async () => {
+            if ("id" in tag) {
+                try {
+                    const response = await api.delete(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags/${tag.id}`)
+                    if (response.status !== 200) throw "Tag Deletion error"
+                } catch (err) {
+                    console.error("Tag Deletion error")
+                    return;
+                }
+            }
+
+            setSelectedTag(null);
+
+            // Check if this item has a group for special group handling
+            if ('group' in tag && tag.group) {
+                const groupId = tag.group;
+
+                // Find all items in the same group
+                const groupItems = droppedItems[key]
+                    .map((item, idx) => ({ item, index: idx }))
+                    .filter(({ item }) => 'group' in item && item.group === groupId && !item.isDeleted);
+
+                // Sort group items by their top position to identify the parent (top-most)
+                groupItems.sort((a, b) => a.item.dimensions.top - b.item.dimensions.top);
+
+                // Check if the item being removed is the parent (top-most item)
+                const isParentItem = groupItems.length > 0 && groupItems[0].index === targetIndex;
+
+                if (isParentItem && groupItems.length > 1) {
+                    // If removing the parent and there are child items, mark all items in the group as deleted
+                    console.log(`Removing parent item and all children for group: ${groupId}`);
+
+                    // Get indices of all group items to mark as deleted
+                    const indicesToDelete = groupItems.map(({ index }) => index);
+
+                    setDroppedItems(prevState => ({
+                        ...prevState,
+                        [key]: prevState[key].map((item, index) =>
+                            indicesToDelete.includes(index) ? { ...item, isDeleted: true } : item
+                        )
+                    }));
+
+                    // Remove group border elements after state update
+                    setTimeout(() => {
+                        removeGroupBorders(groupId);
+                    }, 100);
+
+                } else {
+                    // If removing a child item or the only item in group, just mark this item as deleted
+                    console.log(`Removing individual item from group: ${groupId}`);
+
+                    setDroppedItems(prevState => ({
+                        ...prevState,
+                        [key]: prevState[key].map((item, index) =>
+                            index === targetIndex ? { ...item, isDeleted: true } : item
+                        )
+                    }));
+
+                    // Check if this was the last item in the group after state update
+                    setTimeout(() => {
+                        const remainingGroupItems = droppedItems[key].filter(item =>
+                            'group' in item && item.group === groupId && !item.isDeleted
+                        );
+
+                        if (remainingGroupItems.length === 0) {
+                            // Remove group borders if no items left
+                            removeGroupBorders(groupId);
+                        } else {
+                            // Update group borders for remaining items
+                            handleIGroupBorderPosition(groupId);
+                        }
+                    }, 100);
+                }
+            } else {
+                // Handle non-group item removal (your existing logic)
+                setDroppedItems(prevState => ({
+                    ...prevState,
+                    [key]: prevState[key].map((item, index) =>
+                        index === targetIndex ? { ...item, isDeleted: true } : item
+                    )
+                }));
+            }
+        })()
+    };
+
+    // HANDLE TAG MOUSE DOWN - START
+    // Updated handleTagMouseDown function with proper group border positioning
+    const handleTagMouseDown = (event: React.MouseEvent<HTMLDivElement>, key: string, index: number) => {
+        event.preventDefault();
+
+        let targetContainer = event?.currentTarget?.parentElement?.parentElement;
+        let targetElement = event?.currentTarget?.parentElement;
+
+        if (!targetContainer || !targetElement) return;
+
+        const containerRect = targetContainer.getBoundingClientRect();
+        const elementRect = targetElement.getBoundingClientRect();
+
+        // Calculate the initial offset (where the mouse was clicked inside the element)
+        const offsetX = event.clientX - elementRect.left;
+        const offsetY = event.clientY - elementRect.top;
+
+        const conScrollWidth = targetContainer?.scrollWidth;
+        const conScrollHeight = targetContainer?.scrollHeight;
+
+        let isGroupAttr = event.currentTarget.hasAttribute("group");
+        let groupId = null;
+        if (isGroupAttr) {
+            groupId = event.currentTarget.getAttribute("group");
+        }
+
+        let groupElements: NodeListOf<HTMLElement> | null = null;
+        if (isGroupAttr && groupId) {
+            groupElements = document.querySelectorAll(`div[group="${groupId}"]`);
+            // Show initial border position during drag start
+            handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY);
+        }
+
+        let timeOut = null
+        const handleMouseMove = (event: MouseEvent) => {
+            // Get new X and Y positions relative to the container
+            let left = event.clientX - containerRect.left - offsetX;
+            let top = event.clientY - containerRect.top - offsetY;
+
+            // Restrict movement within container bounds
+            left = Math.max(0, Math.min(left, conScrollWidth - elementRect.width));
+            top = Math.max(0, Math.min(top, conScrollHeight - elementRect.height));
+
+            // Apply the movement to the element first
+            setDroppedItems(prevState => ({
+                ...prevState,
+                [key]: Array.isArray(prevState[key])
+                    ? prevState[key].map((item, i) =>
+                        i === index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
+                    )
+                    : [],
+            }));
+            // Update group border position during drag if it's a group element
+            if (groupElements != null && groupElements.length) {
+                // Use a small timeout to ensure DOM is updated before recalculating borders
+                requestAnimationFrame(() => {
+                    handleGroupBorderPosition(groupElements!, containerRect, offsetX, offsetY);
+                });
+            }
+        };
+
+        const handleMouseUp = () => {
+            // CRITICAL: Ensure group borders are properly positioned after drag ends
+            if (groupElements != null && groupElements.length && groupId) {
+                // Multiple approaches to ensure the positioning works:
+
+                // 1. Immediate update
+                setTimeout(() => {
+                    handleIGroupBorderPosition(groupId);
+                }, 10);
+
+                // 2. Secondary update to ensure it's properly positioned
+                setTimeout(() => {
+                    handleIGroupBorderPosition(groupId);
+                }, 100);
+
+                // 3. Final update using requestAnimationFrame for DOM sync
+                requestAnimationFrame(() => {
+                    setTimeout(() => {
+                        handleIGroupBorderPosition(groupId);
+                    }, 50);
+                });
+            }
+
+            document.removeEventListener("pointermove", handleMouseMove);
+            document.removeEventListener("pointerup", handleMouseUp);
+        };
+
+        // Add event listeners
+        document.addEventListener("pointermove", handleMouseMove);
+        document.addEventListener("pointerup", handleMouseUp);
+    };
+    // HANDLE TAG MOUSE DOWN - END
+
+    return (
+        <>
+            {/* DROPPED ITEMS - Render only the dropped items for this specific docId and page - STARTS */}
+            {droppedItems[key]?.map((item, index) => {
+                if (item.isDeleted) return;
+
+                const type = item.type.toUpperCase();
+                const IconComponent = typeToIconMap[type] || <FaQuestionCircle />;
+                const selectedRecipient = selectedRecipients.filter((obj, indx) => obj.id === item.recipientId);
+                return (
+                    <React.Fragment key={index}>
+                        <div
+                            // key={index}
+                            draggable="false"
+                            className="absolute rounded dropped-item"
+                            onClick={() => handleTagClick(key, index)}
+                            style={{
+                                left: `${item.dimensions.left}px`,
+                                top: `${item.dimensions.top}px`,
+                                width: item.type === "radio" ? `${item.dimensions.width + 20}px` : `${item.dimensions.width}px`,
+                                height: item.type === "radio" ? `max-content` : `${item.dimensions.height}px`
+                            }}
+                        >
+
+
+                            {/* If Selected Tag Recipient Info- START */}
+                            {selectedTag?.key && selectedTag.key === key && selectedTag.index === index &&
+                                <div className='absolute flex justify-between items-center w-full max-w-max bg-white top-[-22px] shadow z-20 text-sm rounded-t-sm' >
+                                    <div className='flex justify-center items-center gap-1 bg-white px-2 shadow'>
+                                        <p className='w-2.5 h-2.5 rounded'
+                                            style={{ background: selectedRecipient[0]?.color }}
+                                        ></p>
+                                        <p
+                                            className=''>{IconComponent}
+                                        </p>
+                                        <p className='capitalize text-ellipsis whitespace-nowrap'>{item.label}</p>
+                                        <IoMdClose onClick={(e) => {
+                                            e.stopPropagation();
+                                            handleRemoveTag(key, index)
+                                        }} className='cursor-pointer' />
+                                    </div>
+                                </div>}
+                            {/* If Selected Tag Recipient Info- END */}
+
+
+
+
+                            {/* Expand Circle - STARTS */}
+                            {item.type !== "radio" && item.type !== "checkbox" && <div
+                                onPointerDown={(e) => handleExpandTag(e, key, index)}
+                                className='w-2.5 h-2.5 absolute bg-red-400 rounded-full bottom-[-8px] right-[-8px] cursor-nw-resize hover:bg-blue-400'>
+                            </div>}
+                            {/* Expand Circle - ENDS */}
+
+                            {/* Tag - START */}
+                            {
+                                <div
+                                    {...("group" in item && item.group ? { "group": item.group } : {})}
+                                    onPointerDown={(e) => handleTagMouseDown(e, key, index)}
+                                    className='p-2 rounded-sm h-full shadow opacity-40 cursor-grab w-full'
+                                    style={{ background: selectedRecipient[0]?.color }}
+                                >
+                                    <p
+                                        className={`flex justify-center items-center w-full text-xl text-white h-full`}
+                                    // style={{ color: selectedRecipients[item.recipientIndx]?.color }}
+                                    >
+                                        {IconComponent}
+                                    </p>
+                                </div>
+                            }
+                            {/* Tag - END */}
+
+                        </div>
+
+                        <>
+                            {
+                                "group" in item && item.group && "isGroupExist" in item && !item.isGroupExist &&
+                                <>
+                                    <div className="group-border" border-group={item.group} border-pos="top"></div>
+                                    <div className="group-border" border-group={item.group} border-pos="right"></div>
+                                    <div className="group-border bottom-border" border-group={item.group} border-pos="bottom">
+                                        <div
+                                            onClick={() => handleAddGroupItemClicked(key, item)}>
+                                            <IoAdd />
+                                        </div>
+                                    </div>
+                                    <div className="group-border" border-group={item.group} border-pos="left"></div>
+                                </>
+
+                            }
+                        </>
+
+                    </React.Fragment>
+                )
+            }
+
+            )}
+            {/* Render only the dropped items for this specific docId and page - ENDS */}
+        </>
+    )
+}
+
+export default DroppedItemsTagsCon

src/components/process/processStepTwo/FieldList.tsx

@@ -4,7 +4,7 @@ import fields from '../../../helper/fieldsListData';
 import { useParams } from 'react-router-dom';
 import typeToIconMap from '../../../helper/iconMap';
 import { FaQuestionCircle } from 'react-icons/fa';
-import { TagsProperties } from '../../../utlity/types';
+import { TagsProperties, TagsTypes } from '../../../utlity/types';
 import { v4 as uuidv4 } from "uuid";
 import axios from 'axios';
 
@@ -13,12 +13,25 @@ const handlePointerDown = (event: React.DragEvent<HTMLDivElement>, label: string
     let width = dragElemRect.width
     let height = dragElemRect.height
 
-    if (label === "radio" || label === "checkbox") {
+    if (label === TagsTypes.RADIO || label === TagsTypes.CHECKBOX) {
         const innerIconConRect = event.currentTarget.children[0].getBoundingClientRect();
         width = innerIconConRect.width + 10
         height = innerIconConRect.height + 10
     }
 
+    // Handling Initia Width and height of Some tags - START
+    if (label === TagsTypes.STAMP) {
+        width = 160
+        height = 160
+    } else if (label === TagsTypes.SIGNATURE) {
+        width = 200
+        height = 75
+    } else if (label === TagsTypes.INITIALS) {
+        width = 85
+        height = 75
+    }
+    // Handling Initia Width and height of Some tags - END
+
     const offsetX = event.clientX - dragElemRect.left;
     const offsetY = event.clientY - dragElemRect.top;
 
@@ -46,12 +59,12 @@ interface FieldListProps {
 }
 
 const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx, acntId = null }) => {
-    
+
     const [tagsData, setTagsData] = useState<TagsProperties[]>([]);
 
     let { accountId } = useParams<{ accountId: string }>();
 
-    if(acntId) {
+    if (acntId) {
         accountId = acntId;
     }
 
@@ -70,7 +83,10 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
             .then((res) => {
                 const priorityOrder = ['SIGNATURE', 'INITIALS', 'STAMP'];
 
-                const data = res.data;
+                const data = res.data.filter((obj, indx) => {
+                    if (obj.type === "STAMP" || obj.type === "RADIO" || obj.type === "CHECKBOX" || obj.type === "ATTACHMENT") return false
+                    return true
+                });
 
                 // Separate prioritized and other tags
                 const prioritized = data.filter((tag: any) =>
@@ -86,6 +102,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
                     .map((type) => prioritized.find((tag: any) => tag.type === type))
                     .filter(Boolean); // remove undefined in case not found
 
+
                 setTagsData([...prioritizedSorted, ...others]);
             })
             .catch((err) => {

src/components/process/processStepTwo/LeftSideBar.tsx

@@ -3,12 +3,13 @@ import { RootState } from '../../../store/store';
 import { useDispatch, useSelector } from 'react-redux';
 import FieldList from './FieldList';
 
-import { addColorsToRecipient, fetchRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice';
+import { addColorsToRecipient, fetchRecipients, recipientType, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice';
 
 import { IoCheckmark } from 'react-icons/io5'
-import { MdKeyboardArrowDown } from 'react-icons/md'
+import { MdKeyboardArrowDown, MdOutlineNavigateNext } from 'react-icons/md'
 import { useParams } from 'react-router-dom';
 import { fetchDocuments } from '../../../store/slices/documentSlice';
+import { GrFormPrevious } from 'react-icons/gr';
 
 interface LeftSideBarProps {
     isFields: boolean;
@@ -24,8 +25,8 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
     let transactionId = params.transactionId
     if (!transactionId) {
         transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
-        transactionId =  params.templateId;
-         dispatch(toggleToTemplates());
+        transactionId = params.templateId;
+        dispatch(toggleToTemplates());
     }
     if (!accountId || !transactionId) {
         window.location.href = "/";
@@ -36,6 +37,8 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
     const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients)
     const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
 
+    const [currentPage, setCurrentPage] = useState(0);
+
     useEffect(() => {
         if (selectedRecipients.length === 0) {
             dispatch(fetchRecipients({ accountId, transactionId }));
@@ -80,7 +83,13 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
                                 <div className='flex items-center gap-1.5'>
                                     <p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
                                     {/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
-                                    <p>{selectedRecipient.firstName} {selectedRecipient.lastName}</p>
+                                    <p>
+                                        {
+                                            selectedRecipient.firstName.length === 0 && selectedRecipient.lastName.length === 0 ?
+                                                (selectedRecipient.email.length === 0 ? selectedRecipient.roleName : selectedRecipient.email) :
+                                                `${selectedRecipient.firstName + " " + selectedRecipient.lastName}`
+                                        }
+                                    </p>
                                 </div>
                                 <MdKeyboardArrowDown />
                             </div>
@@ -88,6 +97,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
                             <div
                                 className={`absolute w-full shadow-md rounded-md mt-1 px-2 py-1 z-20 bg-white ${dropDownToggle ? '' : 'hidden'}`}>
                                 {selectedRecipients.length && selectedRecipients.map((recipient, indx) => {
+                                    if (recipient.type === recipientType.CC) return null; // Skip CC recipients
                                     return (<div
                                         key={indx}
                                         className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
@@ -101,7 +111,13 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
                                         <div className='flex items-center gap-1.5'>
                                             <p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
                                             {/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
-                                            <p>{recipient.firstName} {recipient.lastName} </p>
+                                            <p>
+                                                {
+                                                    recipient.firstName.length === 0 && recipient.lastName.length === 0 ?
+                                                        (recipient.email.length === 0 ? recipient.roleName : recipient.email) :
+                                                        `${recipient.firstName + " " + recipient.lastName}`
+                                                }
+                                            </p>
                                         </div>
                                         {selectedRecipientIndx === indx && <IoCheckmark className='text-[var(--primary)]' />}
                                     </div>)
@@ -111,9 +127,9 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
                         {/* Side Bar showing Recipients  - ENDS*/}
 
                         {/* Drag Drop Tags Start */}
-                        <div 
-                        id='tags-con-dash-left'
-                        className='mt-4'>
+                        <div
+                            id='tags-con-dash-left'
+                            className='mt-4'>
                             <FieldList color={selectedRecipient?.color || '#2d2d2d'} recipientId={selectedRecipient.id} recipientIndx={selectedRecipientIndx} />
                         </div>
 
@@ -139,7 +155,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
                                                 document.pages != undefined && <img
                                                     key={indx}
                                                     className='rounded-sm shadow'
-                                                    src={document.pages[0].src}
+                                                    src={"data:image/png;base64," + document.thumbnail}
                                                     alt="" />
                                             }
 
@@ -153,18 +169,57 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
 
                                         {
                                             dropDownTogglePage === 'pageDropDown' + indx &&
-                                            <div className='my-1 flex justify-center items-center gap-1 flex-wrap'>
-                                                {document.pages != undefined && document.pages.map((img, indx) => (
-                                                    <a
-                                                        href={"#" + document.id + indx}
-                                                        className='max-w-max px-4 py-2 shadow cursor-pointer border-1 rounded-sm border-slate-200 hover:border-[var(--primary)] transition-all duration-300 bg-slate-300'
-                                                    >
-                                                        <p className='text-center text-xs text-slate-600'>{indx + 1}</p>
-                                                    </a>
-                                                ))}
+                                            <div className="my-1 flex justify-center items-center gap-2 flex-wrap">
+                                                {/* Prev Button */}
+                                                <a
+                                                    href={"#" + document.id + (currentPage - 1)}
+                                                    className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === 0 ? "pointer-events-none opacity-50" : ""
+                                                        }`}
+                                                    onClick={(e) => {
+                                                        if (currentPage === 0) e.preventDefault();
+                                                        else setCurrentPage(currentPage - 1);
+                                                    }}
+                                                >
+                                                    <GrFormPrevious />
+                                                </a>
+
+                                                {/* Page Selector */}
+                                                <select
+                                                    className="w-[58px] py-1 text-xs text-slate-400 outline-none"
+                                                    value={currentPage}
+                                                    onChange={(e) => {
+                                                        const newPage = Number(e.target.value);
+                                                        setCurrentPage(newPage);
+                                                        window.location.hash = document.id +""+ newPage;
+                                                    }}
+                                                >
+                                                    {document.pages != undefined && document.pages.map((_, pageIndex) => (
+                                                        <option key={pageIndex} value={pageIndex}>
+                                                            {pageIndex + 1}
+                                                        </option>
+                                                    ))}
+                                                </select>
+
+                                                <span className="text-xs text-slate-600">
+                                                    / {document.pages?.length}
+                                                </span>
+
+                                                {/* Next Button */}
+                                                <a
+                                                    href={"#" + document.id + (currentPage + 1)}
+                                                    className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === document.pages?.length - 1 ? "pointer-events-none opacity-50" : ""
+                                                        }`}
+                                                    onClick={(e) => {
+                                                        if (currentPage === document.pages?.length - 1) e.preventDefault();
+                                                        else setCurrentPage(currentPage + 1);
+                                                    }}
+                                                >
+                                                    <MdOutlineNavigateNext />
+                                                </a>
                                             </div>
                                         }
 
+
                                     </div>
                                 )
                             })}

src/components/process/processStepTwo/NavTwo.tsx

@@ -8,12 +8,14 @@ import { IoIosDocument } from 'react-icons/io'
 import { LuTableOfContents } from 'react-icons/lu'
 import { MdKeyboardArrowDown } from 'react-icons/md'
 import { RiResetRightLine } from 'react-icons/ri'
-import { fetchRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice'
+import { fetchRecipients, recipientType, 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 {
+    transactionSaving: boolean;
+    // setTransactionSaving: React.Dispatch<React.SetStateAction<boolean>>
     isFields: boolean;
     setIsFields: React.Dispatch<React.SetStateAction<boolean>>
     isSend: boolean | null;
@@ -45,7 +47,7 @@ const fitObj = [
     },
 ]
 
-const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSend }) => {
+const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsFields, isSend, setIsSend }) => {
     let transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS;
     const dispatch = useDispatch();
     const params = useParams<{ accountId?: string; transactionId?: string; templateId?: string }>();
@@ -61,7 +63,8 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
         return null;
     }
 
-    const [transactionSaving, setTransactionSaving] = useState<boolean>(false);
+    
+    // const [transactionSaving, setTransactionSaving] = useState<boolean>(false);
     const [dotCount, setDotCount] = useState(0);
 
     const [isFitDd, setIsFitDd] = useState<boolean>(false)
@@ -88,7 +91,8 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
             let userEmailPresent = {
                 present: false,
                 routingOrder: 0,
-                recipientId: 0
+                recipientId: 0,
+                type: recipientType.CC
             };
             // Getting Minimum RoutingOrder
             for (let i = 0; i < selectedRecipients.length; i++) {
@@ -101,10 +105,11 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
                     userEmailPresent.present = true;
                     userEmailPresent.routingOrder = recipient.routingOrder;
                     userEmailPresent.recipientId = recipient.id;
+                    userEmailPresent.type = recipient.type;
                 }
             }
 
-            if (userEmailPresent.present && userEmailPresent.routingOrder === minRoutingOrder) {
+            if (userEmailPresent.present && userEmailPresent.routingOrder === minRoutingOrder && userEmailPresent.type !== recipientType.CC && userEmailPresent.type !== recipientType.INPERSONSIGNER) {
                 setSelfUserSign({ sign: true, recipientId: userEmailPresent.recipientId })
             }
         }
@@ -123,11 +128,11 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
         setTimeout(() => {
             if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
                 if (isSignSend) {
-                    navigate(`./../../../sign/${selfUserSign.recipientId}`);
+                    // window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self");
+                }
+                 else {
+                    // navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true })
                 }
-                //  else {
-                //     navigate(`/document-completion-screen/${accountId}/${transactionId}`)
-                // }
             } else {
                 navigate(`/templates`);
                 toast.success("Template Saved...!", {
@@ -142,7 +147,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
                     transition: Bounce,
                 });
             }
-        }, 0)
+        }, 1000)
     }
 
     const handleSetIsFields = (setTo: boolean) => {
@@ -164,25 +169,6 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
         zoom(Number(indx), 'zoom-con')
     }, [selFitIndx])
 
-    // 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);
-
-    //     // Cleanup on unmount
-    //     return () => clearTimeout(timeoutId);
-    // }, []);
-
     useEffect(() => {
         if (!transactionSaving) return;
 
@@ -218,16 +204,6 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
                         <p className='tracking-wide'>Pages</p>
                     </div>
 
-                    {/* <div className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
-                        <RiResetLeftLine />
-                        <p className='tracking-wide'>Reset</p>
-                    </div> */}
-
-                    {/* <div className='flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm'>
-                        <p className='tracking-wide'>Fit</p>
-                        <MdKeyboardArrowDown />
-                    </div> */}
-
                     <div
                         tabIndex={1}
                         onBlur={() => setIsFitDd(false)}
@@ -278,7 +254,6 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
                             <MdKeyboardArrowDown className={`${nav2DocToggle ? 'rotate-180' : ''} transition-all`} />
                         </div>
 
-
                         <div
                             className={`absolute max-w-max shadow rounded-md mt-1 px-2 py-1 z-20 bg-white ${nav2DocToggle ? '' : 'hidden'}`}>
 
@@ -309,7 +284,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ isFields, setIsFields, isSend, setIsSen
                                 return (<div key={indx} className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-default'>
                                     <div className='flex items-center gap-1.5'>
                                         <p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
-                                        <p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[12ch]'>{recipient.firstName} {recipient.lastName} segfsdtzgszrdtgrs serdgvsrdgs dtrgv</p>
+                                        <p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[22ch]'>{recipient.type + " | "} {recipient.firstName} {recipient.lastName}</p>
                                     </div>
                                 </div>)
                             })}

src/components/process/processStepTwo/ProcessStepTwo.tsx

@@ -8,6 +8,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../../../store/store';
 import Loader from '../../dashboard/Loader';
 import { hideLoader } from '../../../store/slices/loaderSlice';
+import { useNavigate } from 'react-router-dom';
+import api from '../../../config/api';
 
 export interface IsSendInterface {
   send: boolean | null;
@@ -15,13 +17,16 @@ export interface IsSendInterface {
 }
 
 const ProcessStepTwo = () => {
-  
+
   const [isFields, setIsFields] = useState(true);
   const [selectedRecipient, setSelectedRecipient] = useState(0);
 
+  const [transactionSaving, setTransactionSaving] = useState<boolean>(false);
+
   const [isSend, setIsSend] = useState<boolean | null>(null);
   const globalLoader = useSelector((state: RootState) => state.loader)
   const dispatch = useDispatch();
+  const navigate = useNavigate();
 
   useEffect(() => {
     setTimeout(() => {
@@ -31,11 +36,11 @@ const ProcessStepTwo = () => {
 
   return (
     <div className={`min-w-full relative h-screen bg-slate-100 overflow-hidden ${(globalLoader.isLoading) ? 'pointer-events-none' : ''}`}>
-      <NavTwo isFields={isFields} setIsFields={setIsFields} isSend={isSend} setIsSend={setIsSend} />
+      <NavTwo transactionSaving={transactionSaving} isFields={isFields} setIsFields={setIsFields} isSend={isSend} setIsSend={setIsSend} />
 
       <div className='grid grid-cols-12 gap-1 mt-1 h-[calc(100vh-46px)] overflow-hidden'>
         <LeftSideBar isFields={isFields} selectedRecipientIndx={selectedRecipient} setSelectedRecipient={setSelectedRecipient} />
-        <DocumentContainer isSend={isSend} setIsSend={setIsSend} />
+        <DocumentContainer transactionSaving={transactionSaving} setTransactionSaving={setTransactionSaving} isSend={isSend} setIsSend={setIsSend} />
       </div>
 
       {globalLoader.isLoading && <Loader />}

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

@@ -1,44 +0,0 @@
-
-import { MdKeyboardArrowDown } from 'react-icons/md';
-import { DROPDOWNTOGGLE } from './RightSideBar';
-
-interface CommonAttrDropDownInt {
-    selectedType: any;
-    subType: string | undefined;
-    dropDownToggle: DROPDOWNTOGGLE | null;
-    setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>;
-    handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
-}
-
-const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({selectedType, subType, dropDownToggle, setDropDownToggle, handlePropertyChange}) => {
-
-    console.log("selectedType, subType,",selectedType, subType)
-
-    return (
-        <div className="flex flex-col">
-            <label htmlFor="" className="">Type</label>
-            <div
-                onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)}
-                className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
-                <p className="capitalize cursor-pointer">{subType ? (subType === "date_time" ? "Date Time" : subType) : selectedType[Object.keys(selectedType)[0] as keyof typeof selectedType]}</p>
-                <MdKeyboardArrowDown />
-            </div>
-
-            {dropDownToggle === DROPDOWNTOGGLE.TYPE &&
-                <div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
-                    {Object.keys(selectedType).map((val, indx) => (
-                        <div
-                            key={indx}
-                            onClick={() => handlePropertyChange("subType", selectedType[val as keyof typeof selectedType])}
-                            className={`capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer`}
-                        >
-                            {selectedType[val as keyof typeof selectedType] === "date_time" ? "Date Time" : selectedType[val as keyof typeof selectedType]}
-                        </div>
-                    ))}
-                </div>
-            }
-        </div>
-    )
-}
-
-export default CommonAttrDropDown

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

@@ -1,21 +0,0 @@
-import React from 'react'
-
-interface LabelAttrInt {
-    label: string;
-    handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
-}
-
-const LabelAttr: React.FC<LabelAttrInt> = ({ label, handlePropertyChange }) => {
-    return (
-        <div className="flex flex-col">
-            <label htmlFor="" className="">Label</label>
-            <input
-                value={label}
-                onChange={(e) => handlePropertyChange('label', e.target.value)}
-                type="text"
-                className="outline-none border-1 rounded px-2 py-1 border-slate-200" />
-        </div>
-    )
-}
-
-export default LabelAttr

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

@@ -1,42 +1,31 @@
 import { DroppedItemsObj } from "../DocumentContainer";
 import React, { useEffect, useState } from "react";
 
-import { dateFormats, dateTimeFormats, timeFormats } from "../../../../utlity/dateTimeFormats";
-import { DroppedItem } from "../../../../utlity/types";
+import { DroppedItem, StylesInterface } from "../../../../utlity/types";
 import { IoIosArrowDown } from "react-icons/io";
 
 import { TagsTypes } from "../../../../utlity/types";
 
-import LabelAttr from "./LabelAttr";
-import RequiredAttr from "./RequiredAttr";
-import CurrTimeStampAttr from "./currTimeStampAttr";
-import CommonAttrDropDown from "./CommonAttrDropDown";
-import MaskTypePassAttr from "./MaskTypePassAttr";
-import TemporalDateAttr from "./TemporalDateAttr";
-import SelectTagAttr from "./SelectTagAttr";
-import MaxMinLenAttr from "./MaxMinLenAttr";
-import RecipientsAttrCon from "./RecipientsAttrCon";
-import MovableFieldContainer from "./MovableField";
-import DirectionalControls from "./DirectionalControls";
-
-// interface DirectionalControlsProps {
-//     onMove: (direction: 'up' | 'down' | 'left' | 'right') => void;
-//     disabled?: boolean;
-//     stepSize?: number;
-//     className?: string;
-// }
+import LabelAttr from "./attributes/LabelAttr";
+import RequiredAttr from "./attributes/RequiredAttr";
+import CommonAttrDropDown from "./attributes/CommonAttrDropDown";
+import MaskTypePassAttr from "./attributes/MaskTypePassAttr";
+import TemporalDateAttr from "./attributes/TemporalDateAttr";
+import SelectTagAttr from "./attributes/SelectTagAttr";
+import MaxMinLenAttr from "./attributes/MaxMinLenAttr";
+import RecipientsAttrCon from "./attributes/RecipientsAttrCon";
+import DirectionalControls from "./attributes/DirectionalControls";
+import TextValueFIll from "./attributes/TextValueFIll";
+import CurrTimeStampAttr from "./attributes/CurrTimeStampAttr";
+import ToolTipAttr from "./attributes/ToolTipAttr";
 
 export interface DroppedItemProps {
+    droppedItems: DroppedItem[]
     selectedTag: DroppedItem
-    setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>
+    setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>> | React.Dispatch<React.SetStateAction<DroppedItem[]>>
     selTagKey: string,
     selTagIndx: number,
-    DirectionalControlsProps: {
-        onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
-        disabled?: boolean;
-        stepSize?: number;
-        className?: string;
-    }
+    signClient: boolean,
 }
 
 export enum TEXT {
@@ -92,7 +81,7 @@ export enum DROPDOWNTOGGLE {
     DDMMYY_FORMAT
 }
 
-const defaultStyles = {
+const defaultStyles: StylesInterface = {
     font: "",
     italic: false,
     bold: false,
@@ -103,116 +92,19 @@ const defaultStyles = {
 
 
 
-const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems, selTagKey, selTagIndx, DirectionalControlsProps }) => {
-
-    const selectedType = selectedTag.type in enumMap && enumMap[selectedTag.type as keyof typeof enumMap];
-
-    console.log("selectedTag", selectedTag, selectedType)
-
-
+const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, setDroppedItems, selTagKey, selTagIndx, signClient = false }) => {
+    const selectedType = selectedTag.type.toLowerCase() in enumMap && enumMap[selectedTag.type.toLowerCase() as keyof typeof enumMap];
 
     const [styles, setStyles] = useState(defaultStyles);
 
     const [dropDownToggle, setDropDownToggle] = useState<DROPDOWNTOGGLE | null>(null);
-    const [decimalPlace, setDecimalPlace] = useState<number>(2)
+    const [decimalPlace, setDecimalPlace] = useState<number>(selectedTag.decimalPlace ?? 0);
     const [styleOpen, setStyleOpen] = useState(false);
 
-    const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number, is24Hrs = null) => {
+    const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number | StylesInterface, is24Hrs = null) => {
+        if (changeTo === '') return
 
-        console.log("changeTo", changeTo, "changeWith", changeWith)
-        if (changeTo === '' || changeWith === '') return
-
-        // if (changeTo === "subType" && (changeWith === TEMPORAL.DATE || changeWith === TEMPORAL.DATE_TIME || changeWith === TEMPORAL.TIME)) {
-        //     // let change: string = changeWith;
-        //     // if (change === "DATE TIME") {
-        //     //     change = "DATE_TIME"
-        //     // }
-        //     setDroppedItems((prev) => {
-        //         console.log("Temporal30", prev);
-        //         return {
-        //             ...prev,
-        //             [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
-        //                 ? prev[selTagKey].map((item, i) =>
-        //                     i === selTagIndx ? { ...item, [changeTo]: changeWith || "", format: "", update: true } : item
-        //                 )
-        //                 : [], // Fallback in case it's undefined or not an array
-        //         };
-        //     });
-
-        // } else 
-            
-            if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
-            console.log("Second check")
-            console.log("Line 161")
-            setDroppedItems((prev) => (
-                {
-                    ...prev,
-                    [selTagKey]: Array.isArray(prev[selTagKey])
-                        ? prev[selTagKey].map((item, i) =>
-                            i === selTagIndx ? { ...item, [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true } : item
-                        )
-                        : [],
-                }
-            ));
-        }
-        else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
-            console.log("Third check")
-            let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace;
-            const isCurrency = changeWith === NUMBER.CURRENCY;
-            // const currencyType = null
-
-            setDroppedItems((prev) => (
-                {
-                    ...prev,
-                    [selTagKey]: Array.isArray(prev[selTagKey]) // Ensure it's an array
-                        ? prev[selTagKey].map((item, i) =>
-                            i === selTagIndx ? { ...item, [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true } : item
-                        )
-                        : [],
-                }// Provide a fallback in case it's undefined or not an array
-            ));
-
-        } 
-        
-        
-        
-        else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
-            console.log("Fourth Check")
-            let val = timeFormats[0].format;
-            console.log(is24Hrs, "is24Hrs Line 176")
-            if (is24Hrs === null) {
-                val = timeFormats[0].format
-            } else if(!is24Hrs) {
-                val = timeFormats[1].format
-            } else {
-                val = timeFormats[0].format
-            }
-            // console.log("val", val, is24Hrs)
-
-            // if(is24Hrs === null) {
-            //     changeWith = changeWith + " " + val;
-            // }
-
-            setDroppedItems((prev) => {
-                const updatedArray = Array.isArray(prev[selTagKey])
-                    ? prev[selTagKey].map((item, i) => {
-                        if (i === selTagIndx) {
-                            const updatedItem = { ...item, [changeTo]: changeWith + " " + val, update: true };
-                            console.log('Updating item at index', i, 'with:', updatedItem);
-                            return updatedItem;
-                        }
-                        return item;
-                    })
-                    : [];
-
-                return {
-                    ...prev,
-                    [selTagKey]: updatedArray,
-                };
-            });
-        } 
-        
-        else {
+        if (!signClient) {
             setDroppedItems((prev) => {
 
                 const updatedItems = Array.isArray(prev[selTagKey])
@@ -221,40 +113,40 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
                     )
                     : [];
 
-                console.log('Updated items:', updatedItems);
-
                 return {
                     ...prev,
                     [selTagKey]: updatedItems,
                 };
             });
-
+        } else {
+            // setDroppedItems((prev) => {
+            //     const updated = [...prev];
+            //     updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
+            //     return updated;
+            // })
+            setDroppedItems((prev) => {
+                return (prev.map((item, idx) => {
+                    if (idx === selTagIndx) {
+                        return { ...item, [changeTo]: changeWith, update: true }
+                    }
+                    return item;
+                }))
+            })
         }
+
         setDropDownToggle(null)
     }
 
     useEffect(() => {
-        if (selectedTag.subType === TEMPORAL.DATE || selectedTag.subType === TEMPORAL.DATE_TIME || selectedTag.subType === TEMPORAL.TIME) {
-
-            if (selectedTag.subType === TEMPORAL.DATE) {
-                handlePropertyChange("format", dateFormats[0].format)
-            }
-            else if (selectedTag.subType === TEMPORAL.DATE_TIME) {
-                handlePropertyChange("format", dateTimeFormats[0].format)
-            }
-            else if (selectedTag.subType === TEMPORAL.TIME) {
-                handlePropertyChange("format", timeFormats[0].format)
-            }
-        }
-    }, [selectedTag.subType])
-
-
-    useEffect(() => {
-        if (selectedTag.label === "temporal") {
-            handlePropertyChange("subType", TEMPORAL.DATE);
+        if (selectedTag.label === "temporal" && !("dateFormat" in selectedTag)) {
+            handlePropertyChange("dateFormat", TEMPORAL.DATE);
             handlePropertyChange("format", "DD/MM/YY");
         }
-    }, [])
+
+        if (selectedTag.label === TagsTypes.TEXT && !("multiLine" in selectedTag)) {
+            handlePropertyChange("multiLine", true);
+        }
+    }, [selectedTag])
 
     const handleDecimalPlace = (e: React.ChangeEvent<HTMLInputElement>) => {
         const val = Number(e.target.value)
@@ -262,23 +154,11 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
         handlePropertyChange("decimalPlace", val)
     }
 
-    // useEffect(() => {
-    //     if ("styles" in selectedTag) {
-    //         console.log("styles" in selectedTag)
-    //         const fontSize = selectedTag?.styles?.textSize;
-    //         const tagHeight = selectedTag?.dimensions?.height - 18;
-
-    //         console.log(fontSize)
-
-    //         if (selectedTag.subType !== TEXT.PASSWORD && selectedTag.subType !== TEXT.PARAGRAPH && tagHeight > (fontSize + fontSize)) {
-    //             handlePropertyChange("subType", TEXT.PARAGRAPH)
-    //         } else if (selectedTag.subType !== TEXT.PASSWORD && selectedTag.subType !== TEXT.SINGLE_LINE && tagHeight <= (fontSize + fontSize)) {
-    //             console.log("Change subType Called from elseif")
-    //             handlePropertyChange("subType", TEXT.SINGLE_LINE)
-    //         }
-    //     }
-    // }, [selectedTag])
-
+    useEffect(() => {
+        if (selectedTag.decimalPlace === undefined) return;
+        if (selectedTag.decimalPlace === decimalPlace) return;
+        setDecimalPlace(selectedTag.decimalPlace ?? 0)
+    }, [selectedTag.decimalPlace ?? 0])
 
     useEffect(() => {
         if (!selectedTag) return;
@@ -290,24 +170,6 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
             setStyles({ ...defaultStyles, ...selectedTag.styles });
         }
 
-        // Optional subType logic
-        const fontSize = selectedTag?.styles?.textSize || defaultStyles.textSize;
-        const tagHeight = selectedTag?.dimensions?.height - 18;
-
-        if (
-            selectedTag.type === TagsTypes.TEXT &&
-            selectedTag.subType !== TEXT.PASSWORD &&
-            selectedTag.subType !== TEXT.PARAGRAPH &&
-            tagHeight > fontSize * 2
-        ) {
-            handlePropertyChange("subType", TEXT.PARAGRAPH);
-        } else if (
-            selectedTag.subType !== TEXT.PASSWORD &&
-            selectedTag.subType !== TEXT.SINGLE_LINE &&
-            tagHeight <= fontSize * 2
-        ) {
-            handlePropertyChange("subType", TEXT.SINGLE_LINE);
-        }
     }, [selectedTag]);
 
     const handleStyleChange = (key, value) => {
@@ -319,33 +181,130 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
         handlePropertyChange("styles", updatedStyles);
     };
 
+    const handleDirectionalMove = (direction: 'up' | 'down' | 'left' | 'right', stepSize: number = 5) => {
+        if (!selectedTag) return;
+
+        const currentItem = droppedItems[selTagKey]?.[selTagIndx];
+
+        if (!currentItem) return;
+
+        let newLeft = currentItem.dimensions.left;
+        let newTop = currentItem.dimensions.top;
+
+        switch (direction) {
+            case 'up':
+                newTop = Math.max(0, newTop - stepSize);
+                break;
+            case 'down':
+                newTop = newTop + stepSize;
+                break;
+            case 'left':
+                newLeft = Math.max(0, newLeft - stepSize);
+                break;
+            case 'right':
+                newLeft = newLeft + stepSize;
+                break;
+        }
+
+        if (!signClient) {
+            setDroppedItems({
+                ...droppedItems,
+                [selTagKey]: Array.isArray(droppedItems[selTagKey])
+                    ? droppedItems[selTagKey].map((item, i) =>
+                        i === selTagIndx
+                            ? { ...item, dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true }
+                            : item
+                    )
+                    : [],
+            });
+        } else {
+            setDroppedItems((prev) => {
+                const updated = [...prev];
+                updated[selTagIndx] = { ...updated[selTagIndx], dimensions: { ...item.dimensions, left: newLeft, top: newTop }, update: true }
+                return updated;
+            })
+        }
+    };
+
+    const directionalControlsHandler = (direction: 'up' | 'down' | 'left' | 'right') => {
+        handleDirectionalMove(direction, 5); // Use default stepSize of 5
+    };
+
+    const handleDirectPositionChange = (newLeft: number, newTop: number) => {
+        if (!selectedTag) return;
+
+        const currentItem = droppedItems[selTagKey]?.[selTagIndx];
+
+        if (!currentItem) return;
+
+        // Ensure values are not negative
+        const clampedLeft = Math.max(0, newLeft);
+        const clampedTop = Math.max(0, newTop);
+
+        if (!signClient) {
+            setDroppedItems({
+                ...droppedItems,
+                [selTagKey]: Array.isArray(droppedItems[selTagKey])
+                    ? droppedItems[selTagKey].map((item, i) =>
+                        i === selTagIndx
+                            ? {
+                                ...item,
+                                dimensions: {
+                                    ...item.dimensions,
+                                    left: clampedLeft,
+                                    top: clampedTop
+                                },
+                                update: true
+                            }
+                            : item
+                    )
+                    : [],
+            });
+        } else {
+            setDroppedItems((prev) => {
+                const updated = [...prev];
+                updated[selTagIndx] = {
+                    ...item,
+                    dimensions: {
+                        ...item.dimensions,
+                        left: clampedLeft,
+                        top: clampedTop
+                    },
+                    update: true
+                }
+                return updated
+            })
+        }
+    };
+
+    const DirectionalControlsProps = {
+        onMove: directionalControlsHandler,
+        onPositionChange: handleDirectPositionChange,
+        disabled: false,
+        stepSize: 5,
+        className: ''
+    }
 
     return (
         <>
             {/* Right Side Bar Start */}
             <div className='col-span-2 w-full h-full bg-white text-sm overflow-y-auto'>
-                <p className="p-2 font-semibold text-md">Properties</p>
+                <p className="p-2 font-semibold text-md"><span className="capitalize">{selectedTag.type.toLowerCase()}</span> Attributes:</p>
                 <hr className="text-slate-200" />
 
                 <div className="p-3 text-sm text-slate-600 flex flex-col gap-2">
 
-                    {
-                        <RecipientsAttrCon selectedRecipientId={selectedTag.recipientId} handlePropertyChange={handlePropertyChange} />
-                    }
-
+                    <RecipientsAttrCon selectedRecipientId={selectedTag.recipientId} handlePropertyChange={handlePropertyChange} />
                     <DirectionalControls {...DirectionalControlsProps} selectedType={selectedTag.dimensions} />
 
-
                     {selectedTag.label &&
                         <LabelAttr label={selectedTag.label} handlePropertyChange={handlePropertyChange} />}
 
-                    {(selectedTag.type !== TagsTypes.SIGNATURE && selectedTag.type !== TagsTypes.INITIALS) &&
-
-                        <>
-                            <RequiredAttr required={selectedTag.required ? selectedTag.required : false} handlePropertyChange={handlePropertyChange} />
-                        </>
-
+                    <ToolTipAttr tooltip={selectedTag.tooltip ?? ""} handlePropertyChange={handlePropertyChange} />
 
+                    {
+                        (selectedTag.type !== TagsTypes.SIGNATURE && selectedTag.type !== TagsTypes.INITIALS) &&
+                        <RequiredAttr required={selectedTag.required ? selectedTag.required : false} handlePropertyChange={handlePropertyChange} />
                     }
 
                     {selectedTag.type.toLowerCase() === TagsTypes.TEMPORAL &&
@@ -355,7 +314,8 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
                         selectedType && Object.keys(selectedType).length > 0 &&
                         <CommonAttrDropDown
                             selectedType={selectedType}
-                            subType={selectedTag.subType}
+                            // subType={selectedTag.subType}
+                            selectedTag={selectedTag}
                             dropDownToggle={dropDownToggle}
                             setDropDownToggle={setDropDownToggle}
                             handlePropertyChange={handlePropertyChange} />
@@ -363,7 +323,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
 
                     {/* Mask Type  */}
                     {
-                        selectedTag?.subType === TEXT.PASSWORD &&
+                        selectedTag.maskType && selectedTag.maskType?.length > 0 &&
                         <MaskTypePassAttr
                             maskType={selectedTag.maskType ? selectedTag.maskType : MASKTYPE.ALL}
                             maskCharacter={selectedTag.maskCharacter ? selectedTag.maskCharacter : MASKCHARACTER.ASTERISK}
@@ -372,15 +332,25 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
                             handlePropertyChange={handlePropertyChange} />
                     }
 
+                    {/* Mask Type  */}
+                    {
+                        selectedTag.type.toLowerCase() === TagsTypes.TEXT &&
+                        <TextValueFIll
+                            value={selectedTag.value ?? ""}
+                            multiLine={selectedTag.multiLine ?? false}
+                            handlePropertyChange={handlePropertyChange}
+                        />
+                    }
 
                     {/* TEMPORAL DATE FORMAT - START */}
                     {
-                        (selectedTag?.subType === TEMPORAL.DATE ||
-                            selectedTag?.subType === TEMPORAL.TIME ||
-                            selectedTag?.subType === TEMPORAL.DATE_TIME) &&
+                        selectedTag && (selectedTag?.dateFormat === TEMPORAL.DATE ||
+                            selectedTag?.dateFormat === TEMPORAL.TIME ||
+                            selectedTag?.dateFormat === TEMPORAL.DATE_TIME) &&
                         <TemporalDateAttr
-                            subType={selectedTag.subType}
+                            dateFormat={selectedTag.dateFormat ?? TEMPORAL.DATE_TIME}
                             format={selectedTag.format}
+                            selectedTag={selectedTag}
                             dropDownToggle={dropDownToggle}
                             setDropDownToggle={setDropDownToggle}
                             handlePropertyChange={handlePropertyChange} />
@@ -389,7 +359,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
 
                     {/* NUMBER - DECIMAL PLACES */}
                     {
-                        selectedTag?.subType === NUMBER.DECIMAL &&
+                        selectedTag?.type.toLowerCase() === TagsTypes.NUMBER &&
                         <div>
                             <label htmlFor="" className="">Decimal Places</label>
                             <input
@@ -401,9 +371,9 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
                     }
 
                     {
-                        (selectedTag?.subType === SELECT.SINGLE_SELECT || selectedTag?.subType === SELECT.MULTI_SELECT) &&
+                        (selectedTag.type.toLowerCase() === TagsTypes.SELECT) &&
                         <SelectTagAttr
-                            options={selectedTag.options}
+                            options={selectedTag.options ?? []}
                             selTagKey={selTagKey}
                             selTagIndx={selTagIndx}
                             setDroppedItems={setDroppedItems}
@@ -416,9 +386,6 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ selectedTag, setDroppedItems
                         <MaxMinLenAttr maxLength={selectedTag.maxLength} minLength={selectedTag.minLength} handlePropertyChange={handlePropertyChange} />
                     }
 
-
-
-
                     {(selectedTag.type.toLowerCase() !== TagsTypes.SIGNATURE && selectedTag.type.toLowerCase() !== TagsTypes.INITIALS) &&
                         <div className="">
                             <div className="flex items-center justify-between mr-2 cursor-pointer"

src/components/process/processStepTwo/rightSideBar/attributes/CommonAttrDropDown.tsx

@@ -0,0 +1,193 @@
+
+import { MdKeyboardArrowDown } from 'react-icons/md';
+import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE, NUMBER, SELECT, TEMPORAL, TEXT } from '../RightSideBar';
+import { DroppedItem, TagsTypes } from '../../../../../utlity/types';
+import { dateFormats, timeFormats } from '../../../../../utlity/dateTimeFormats';
+import { FaCommentsDollar } from 'react-icons/fa';
+
+interface CommonAttrDropDownInt {
+    selectedType: any;
+    // subType: string | undefined;
+    selectedTag: DroppedItem;
+    dropDownToggle: DROPDOWNTOGGLE | null;
+    setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>;
+    handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
+}
+
+const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, selectedTag, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
+
+    let subType = "";
+    let subTypeKey = ""
+
+    switch (selectedTag.type.toLowerCase()) {
+        case "number":
+            if (selectedTag.decimalPlace === undefined) {
+                subType = NUMBER.INTEGER;
+                subTypeKey = "decimalPlace";
+            } else if (selectedTag.isCurrency !== undefined && selectedTag.isCurrency) {
+                subType = NUMBER.CURRENCY;
+                subTypeKey = "isCurrency";
+            } else if (selectedTag.decimalPlace === 0) {
+                subType = NUMBER.INTEGER;
+                subTypeKey = "decimalPlace";
+            } else if (selectedTag.decimalPlace > 0) {
+                subType = NUMBER.DECIMAL;
+                subTypeKey = "decimalPlace";
+            }
+            break;
+        case "text":
+            if (selectedTag.multiLine === undefined) {
+                subType = TEXT.PARAGRAPH
+            } else if (selectedTag.multiLine) {
+                subType = TEXT.PARAGRAPH;
+            } else if (!selectedTag.multiLine) {
+                subType = TEXT.SINGLE_LINE;
+            }
+
+            if ("maskType" in selectedTag && selectedTag.maskType !== null && selectedTag.maskType?.length) subType = TEXT.PASSWORD;
+
+            subTypeKey = "multiLine";
+            break;
+        case "temporal":
+            if (selectedTag.dateFormat === undefined) {
+                subType = TEMPORAL.DATE;
+            } else {
+                subType = TEMPORAL[selectedTag.dateFormat.toUpperCase() as keyof typeof TEMPORAL];
+            }
+            subTypeKey = "dateFormat";
+            break;
+        case "select":
+            if (selectedTag.multiSelect !== undefined && selectedTag.multiSelect) {
+                subType = SELECT.MULTI_SELECT;
+            } else {
+                subType = SELECT.SINGLE_SELECT;
+            }
+            subTypeKey = "multiSelect";
+            break;
+        case "checkbox":
+            console.log("Date type selected");
+            break;
+        case "radio":
+            console.log("Date type selected");
+            break;
+    }
+
+    return (
+        <div className="flex flex-col">
+            <label htmlFor="" className="">Type</label>
+            <div
+                onClick={() => setDropDownToggle(dropDownToggle === DROPDOWNTOGGLE.TYPE ? null : DROPDOWNTOGGLE.TYPE)}
+                className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
+                <p className="capitalize cursor-pointer">{subType}</p>
+                {/* <p className="capitalize cursor-pointer">{subType ? (subType === "date_time" ? "Date Time" : subType) : selectedType[Object.keys(selectedType)[0] as keyof typeof selectedType]}</p> */}
+                <MdKeyboardArrowDown />
+            </div>
+
+            {dropDownToggle === DROPDOWNTOGGLE.TYPE &&
+                <div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
+                    {Object.keys(selectedType).map((val, indx) => {
+
+                        let value = val.toLowerCase() as keyof typeof selectedType | number | boolean;
+                        let isCurrency = false;
+                        let isPassword = false;
+
+                        // Handling NUMBER - START
+                        if (value === NUMBER.INTEGER || value === NUMBER.CURRENCY) {
+                            if (value === NUMBER.CURRENCY) {
+                                isCurrency = true;
+                            }
+                            value = 0;
+                        }
+                        if (value === NUMBER.DECIMAL) {
+                            value = selectedTag.decimalPlace ?? 0 > 0 ? selectedTag.decimalPlace ?? 2 : 2;
+                        }
+                        // Handling NUMBER - END
+
+                        // Handling SELECT - START
+                        if (subTypeKey === "multiSelect") {
+                            if (value === "multi_select") {
+                                value = true;
+                            } else {
+                                value = false
+                            }
+                        }
+                        // Handling SELECT - END
+
+                        // Handling TEXT - START
+                        if (subTypeKey === "multiLine") {
+                            if (value === "single_line") {
+                                value = false;
+                            } else {
+                                value = true;
+                            }
+
+                            if (val.toLowerCase() === TEXT.PASSWORD) {
+                                isPassword = true;
+                            }
+                        }
+                        // Handling TEXT - END
+
+                        return (
+                            <div
+                                key={indx}
+                                onClick={() => {
+                                    if (selectedTag.type.toLowerCase() === TagsTypes.NUMBER) {
+                                        if (isCurrency) {
+                                            handlePropertyChange("isCurrency", true);
+                                            return;
+                                        }
+                                        handlePropertyChange(subTypeKey, value as number);
+                                        if (selectedTag.isCurrency) handlePropertyChange("isCurrency", false)
+
+                                    } else if (selectedTag.type.toLowerCase() === TagsTypes.SELECT) {
+
+                                        handlePropertyChange(subTypeKey, value as boolean);
+
+                                    } else if (selectedTag.type.toLowerCase() === TagsTypes.TEXT) {
+                                        if (isPassword) {
+                                            handlePropertyChange("maskType", MASKTYPE.ALL.toUpperCase());
+                                            handlePropertyChange("maskCharacter", MASKCHARACTER.ASTERISK.toUpperCase());
+                                        } else {
+
+                                            handlePropertyChange("maskType", null);
+                                            handlePropertyChange("maskCharacter", null);
+
+                                        }
+                                        handlePropertyChange(subTypeKey, value as boolean);
+                                    } else if (selectedTag.type.toLowerCase() === TagsTypes.TEMPORAL) {
+                                        handlePropertyChange(subTypeKey, selectedType[val as keyof typeof selectedType]);
+                                        if (subTypeKey === "dateFormat") {
+                                            let format = null;
+                                            switch (value) {
+                                                case "date":
+                                                    format = dateFormats[0].format;
+                                                    break;
+                                                case "time":
+                                                    format = timeFormats[0].format;
+                                                    break;
+                                                case "date_time":
+                                                    format = dateFormats[0].format + " " + timeFormats[0].format;
+                                                    break;
+                                                default:
+                                                    format = dateFormats[0].format;
+                                            }
+
+                                            handlePropertyChange("format", format as string);
+                                        }
+                                    } else {
+                                        handlePropertyChange(subTypeKey, selectedType[val as keyof typeof selectedType]);
+                                    }
+                                }}
+                                className={`capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer`}
+                            >
+                                {selectedType[val as keyof typeof selectedType] === "date_time" ? "Date Time" : selectedType[val as keyof typeof selectedType]}
+                            </div>
+                        )
+                    })}
+                </div>
+            }
+        </div>
+    )
+}
+
+export default CommonAttrDropDown

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

@@ -67,7 +67,10 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
   };
 
   const handleKeyPress = (e: React.KeyboardEvent, type: 'left' | 'top') => {
-    if (e.key === 'Enter') handlePositionInputBlur(type);
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handlePositionInputBlur(type)
+    };
   };
 
   useEffect(() => {
@@ -106,13 +109,13 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
   return (
     <div className={`inline-flex flex-col items-center space-y-2 text-[12px] ${className}`}>
       {/* Top */}
-      <button onClick={() => handleMove('up')} disabled={disabled} className={buttonClass} title="Move Up">
+      <button type="button" onClick={() => handleMove('up')} disabled={disabled} className={buttonClass} title="Move Up">
         <FaArrowUp />
       </button>
 
       {/* Middle: Left / Inputs / Right */}
       <div className="flex items-center space-x-3">
-        <button onClick={() => handleMove('left')} disabled={disabled} className={buttonClass} title="Move Left">
+        <button type="button" onClick={() => handleMove('left')} disabled={disabled} className={buttonClass} title="Move Left">
           <FaArrowLeft />
         </button>
 
@@ -121,7 +124,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
           <input
             type="number"
             value={leftValue}
-            onChange={(e) => handlePositionInputChange('left', e.target.value)}
+            onChange={(e) => {e.preventDefault; handlePositionInputChange('left', e.target.value)}}
             onBlur={() => handlePositionInputBlur('left')}
             onKeyPress={(e) => handleKeyPress(e, 'left')}
             disabled={disabled}
@@ -131,7 +134,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
           <input
             type="number"
             value={topValue}
-            onChange={(e) => handlePositionInputChange('top', e.target.value)}
+            onChange={(e) => {e.preventDefault; handlePositionInputChange('top', e.target.value)}}
             onBlur={() => handlePositionInputBlur('top')}
             onKeyPress={(e) => handleKeyPress(e, 'top')}
             disabled={disabled}
@@ -140,88 +143,18 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
           />
         </div>
 
-        <button onClick={() => handleMove('right')} disabled={disabled} className={buttonClass} title="Move Right">
+        <button type="button" onClick={() => handleMove('right')} disabled={disabled} className={buttonClass} title="Move Right">
           <FaArrowRight />
         </button>
       </div>
 
-      {/* Bottom */}
-      <button onClick={() => handleMove('down')} disabled={disabled} className={buttonClass} title="Move Down">
+      <button type="button" onClick={() => handleMove('down')} disabled={disabled} className={buttonClass} title="Move Down">
         <FaArrowDown />
       </button>
-      {/* Middle Row: Left - Center (Inputs) - Right */}
       <div className="flex items-center space-x-1">
-        {/* Left Button */}
-        {/* <div className="flex flex-col items-center">
-          <button
-            onClick={() => handleMove('left')}
-            disabled={disabled}
-            className={buttonClass}
-            title="Move left"
-            type="button"
-          >
-            <FaArrowLeft size={12} />
-          </button>
-          <span className="mt-1">Left</span>
-        </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]">
-            <input
-              type="number"
-              value={leftValue}
-              onChange={(e) => handlePositionInputChange('left', e.target.value)}
-              onBlur={() => handlePositionInputBlur('left')}
-              onKeyPress={(e) => handleKeyPress(e, 'left')}
-              disabled={disabled}
-              className="w-[40px]   h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono"
-            />
-            <span className="mx-[1px]">×</span>
-            <input
-              type="number"
-              value={topValue}
-              onChange={(e) => handlePositionInputChange('top', e.target.value)}
-              onBlur={() => handlePositionInputBlur('top')}
-              onKeyPress={(e) => handleKeyPress(e, 'top')}
-              disabled={disabled}
-              className="w-[40px] h-[16px] text-[10px] text-center border-none focus:outline-none text-black font-mono"
-            />
-          </div> */}
         </div>
-
-
-        {/* Right Button */}
-        {/* <div className="flex flex-col items-center">
-          <button
-            onClick={() => handleMove('right')}
-            disabled={disabled}
-            className={buttonClass}
-            title="Move right"
-            type="button"
-          >
-            <FaArrowRight size={12} />
-          </button>
-          <span className="mt-1">Right</span>
-        </div> */}
       </div>
-
-      {/* Bottom Button */}
-      {/* <div className="flex justify-center me-4">
-        <div className="flex flex-col items-center">
-          <button
-            onClick={() => handleMove('down')}
-            disabled={disabled}
-            className={buttonClass}
-            title="Move down"
-            type="button"
-          >
-            <FaArrowDown size={12} />
-          </button>
-          <span className="mt-1">Bottom</span>
-        </div>
-      </div> */}
     </div>
   );
 };

src/components/process/processStepTwo/rightSideBar/attributes/LabelAttr.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+interface LabelAttrInt {
+    label: string;
+    handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
+}
+
+const LabelAttr: React.FC<LabelAttrInt> = ({ label, handlePropertyChange }) => {
+    return (
+        <>
+            <div className="flex flex-col">
+                <label>Label</label>
+                <input
+                    value={label}
+                    onChange={(e) => handlePropertyChange('label', e.target.value)}
+                    type="text"
+                    className="outline-none border-1 rounded px-2 py-1 border-slate-200" />
+            </div>
+        </>
+    )
+}
+
+export default LabelAttr

src/components/process/processStepTwo/rightSideBar/attributes/MaskTypePassAttr.tsx

@@ -1,5 +1,5 @@
 import { MdKeyboardArrowDown } from "react-icons/md";
-import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE } from "./RightSideBar";
+import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE } from "../RightSideBar";
 import { LuAsterisk } from "react-icons/lu";
 import { GoDotFill } from "react-icons/go";
 import { IoClose } from "react-icons/io5";
@@ -32,7 +32,7 @@ const MaskTypePassAttr: React.FC<MaskTypePassAttrInt> = ({ maskType, maskCharact
                         (
                             <div
                                 key={indx}
-                                onClick={() => handlePropertyChange("maskType", MASKTYPE[val])}
+                                onClick={() => handlePropertyChange("maskType", MASKTYPE[val].toUpperCase())}
                                 className="capitalize px-2 py-1 hover:bg-slate-200 cursor-pointer"
                             >
                                 {(MASKTYPE[val]).replace("_", " ")}
@@ -71,7 +71,7 @@ const MaskTypePassAttr: React.FC<MaskTypePassAttrInt> = ({ maskType, maskCharact
                         (
                             <div
                                 key={indx}
-                                onClick={() => handlePropertyChange("maskCharacter", MASKCHARACTER[val])}
+                                onClick={() => handlePropertyChange("maskCharacter", MASKCHARACTER[val].toUpperCase())}
                                 className="capitalize p-2 hover:bg-slate-200 cursor-pointer"
                             >
                                 {

src/components/process/processStepTwo/rightSideBar/attributes/RecipientsAttrCon.tsx

@@ -2,7 +2,8 @@ import React, { useEffect, useState } from 'react'
 import { IoCheckmark } from 'react-icons/io5';
 import { MdKeyboardArrowDown } from 'react-icons/md';
 import { useSelector } from 'react-redux';
-import { RootState } from '../../../../store/store';
+import { RootState } from '../../../../../store/store';
+import { recipientType } from '../../../../../store/slices/selectedRecipientsSlice';
 
 
 interface SelectedRecipientsIntr {
@@ -53,7 +54,13 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
                     <div className='flex items-center gap-1.5'>
                         <p className='w-3 h-3 rounded-sm' style={{ background: selectedRecipient.color }}></p>
                         {/* <FaUserTie className='w-3 h-3 text-2xl mt-[1px]' style={{ color: selectedRecipient.color }} /> */}
-                        <p>{"firstName" in selectedRecipient && selectedRecipient.firstName} {"lastName" in selectedRecipient && selectedRecipient.lastName}</p>
+                        <p>
+                            {
+                                selectedRecipient.firstName.length === 0 && selectedRecipient.lastName.length === 0 ?
+                                    (selectedRecipient.email.length === 0 ? selectedRecipient.roleName : selectedRecipient.email) :
+                                    `${selectedRecipient.firstName + " " + selectedRecipient.lastName}`
+                            }
+                        </p>
                     </div>
                     <MdKeyboardArrowDown />
                 </div>
@@ -61,11 +68,12 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
                 <div
                     className={`absolute w-full shadow-md rounded-md mt-1 px-2 py-1 z-20 bg-white ${dropDownToggle ? '' : 'hidden'}`}>
                     {selectedRecipients.length && selectedRecipients.map((recipient, indx) => {
+                        if (recipient.type === recipientType.CC) return null; // Skip CC recipients
                         return (<div
                             key={indx}
                             className='flex items-center justify-between gap-2 w-full p-2 text-xs rounded-sm cursor-pointer hover:bg-slate-100'
                             onClick={() => {
-                             handlePropertyChange('recipientId', recipient.id);
+                                handlePropertyChange('recipientId', recipient.id);
                                 setTimeout(() => {
                                     setDropDownToggle(false);
                                 }, 0)
@@ -74,7 +82,13 @@ const RecipientsAttrCon: React.FC<RecipientsAttrConIntr> = ({ selectedRecipientI
                             <div className='flex items-center gap-1.5'>
                                 <p className='w-3 h-3 rounded-sm' style={{ background: recipient.color }}></p>
                                 {/* <FaUser className='w-3 h-3 text-2xl mt-[1px]' style={{ color: recipient.color }} /> */}
-                                <p>{recipient.firstName} {recipient.lastName} </p>
+                                <p>
+                                    {
+                                        recipient.firstName.length === 0 && recipient.lastName.length === 0 ?
+                                            (recipient.email.length === 0 ? recipient.roleName : recipient.email) :
+                                            `${recipient.firstName + " " + recipient.lastName}`
+                                    }
+                                </p>
                             </div>
                             {selectedRecipientId === recipient.id && <IoCheckmark className='text-[var(--primary)]' />}
                         </div>)

src/components/process/processStepTwo/rightSideBar/attributes/SelectTagAttr.tsx

@@ -2,9 +2,11 @@ import { useState } from "react";
 import { DROPDOWNTOGGLE } from "./RightSideBar";
 import { DroppedItemsObj } from "../DocumentContainer";
 import { IoMdClose } from "react-icons/io";
+import { TagOptionAttrType } from "../../../../utlity/types";
+import { DroppedItem } from "../../../../store/slices/droppedItemsSlice";
 
 interface SelectTagAttrInt {
-    options: string[] | undefined;
+    options: TagOptionAttrType[];
     selTagKey: string;
     selTagIndx: number;
     setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>;
@@ -12,30 +14,44 @@ interface SelectTagAttrInt {
 }
 
 const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagIndx, setDroppedItems, handlePropertyChange }) => {
-    const [selectedOption, setSelectedOption] = useState<string>()
+    const [selectedOption, setSelectedOption] = useState<TagOptionAttrType>({ label: "", value: "" });
 
     const handleAddSelectOption = () => {
-        if (selectedOption && selectedOption.length) {
+        if (selectedOption && selectedOption.label && selectedOption.value) {
+
+
             setDroppedItems((prev) => {
-                console.log("Previous droppedItems:", prev);
+                let newState: DroppedItem | {} = {};
 
-                const newState = {
-                    ...prev,
-                    [selTagKey]: Array.isArray(prev[selTagKey])
-                        ? prev[selTagKey].map((item, i) => {
-                            if (i === selTagIndx) {
-                                return {
-                                    ...item,
-                                    options: item.options ? [...item.options, selectedOption] : [selectedOption],
-                                    update: true,
-                                };
-                            }
-                            return item;
-                        })
-                        : [],
-                };
+                if (Array.isArray(prev)) {
+                    newState = prev.map((item, indx) => {
+                        if (indx === selTagIndx) {
+                            return {
+                                ...item,
+                                options: item.options ? [...item.options, { ...selectedOption }] : [{ ...selectedOption }],
+                                update: true,
+                            };
+                        }
+                        return item;
+                    })
+                } else {
+                    newState = {
+                        ...prev,
+                        [selTagKey]: Array.isArray(prev[selTagKey])
+                            ? prev[selTagKey].map((item, i) => {
+                                if (i === selTagIndx) {
+                                    return {
+                                        ...item,
+                                        options: item.options ? [...item.options, { ...selectedOption }] : [{ ...selectedOption }],
+                                        update: true,
+                                    };
+                                }
+                                return item;
+                            })
+                            : [],
+                    };
+                }
 
-                console.log("New droppedItems state:", newState);
                 return newState;
             });
         }
@@ -43,19 +59,35 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
 
 
     const handleSelectOptionDel = (indx: number) => {
-        setDroppedItems((prev) => (
-            {
-                ...prev,
-                [selTagKey]: Array.isArray(prev[selTagKey])
-                    ? prev[selTagKey].map((item, i) => {
-                        if (i === selTagIndx) {
-                            return { ...item, options: item.options ? item.options.filter((_, i) => i !== indx) : [] };
-                        }
-                        return item;
-                    })
-                    : [],
+        setDroppedItems((prev) => {
+            let newState = {};
+
+
+            if (Array.isArray(prev)) {
+                newState = prev.map((item, indx) => {
+                    if (indx === selTagIndx) {
+                        return {
+                            ...item, options: item.options ? item.options.filter((_, i) => i !== indx) : []
+                        };
+                    }
+                    return item;
+                })
+            } else {
+                newState = {
+                    ...prev,
+                    [selTagKey]: Array.isArray(prev[selTagKey])
+                        ? prev[selTagKey].map((item, i) => {
+                            if (i === selTagIndx) {
+                                return { ...item, options: item.options ? item.options.filter((_, i) => i !== indx) : [] };
+                            }
+                            return item;
+                        })
+                        : [],
+                };
             }
-        ));
+
+            return newState
+        });
     }
 
     return (
@@ -64,7 +96,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
                 <label htmlFor="" className="">Add Options</label>
                 <input
                     type="text"
-                    onChange={(e) => setSelectedOption(e.target.value)}
+                    onChange={(e) => setSelectedOption({ label: e.target.value, value: e.target.value })}
                     // value={selectedOption}
                     onKeyUp={(e) => {
                         if (e.code === "Enter") {
@@ -74,13 +106,13 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
                     }}
                     className="bg-slate-100 w-full outline-none p-2 rounded" />
 
-                <div className="h-[150px] mt-1 overflow-hidden overflow-y-auto">
+                <div className="max-h-[150px] mt-1 overflow-hidden overflow-y-auto">
                     {
-                        options && options.map((val, indx) => (
+                        options && options.map((obj, indx) => (
                             <div
                                 key={indx}
                                 className="flex justify-between items-center px-2 py-1 my-1 rounded bg-slate-100">
-                                <p>{val}</p>
+                                <p>{obj.label}</p>
                                 <IoMdClose
                                     onClick={() =>
                                         // setSelectedOptions(prev =>

src/components/process/processStepTwo/rightSideBar/attributes/TemporalDateAttr.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from "react";
-import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, yearFormats } from "../../../../utlity/dateTimeFormats";
-import { DROPDOWNTOGGLE, TEMPORAL } from "./RightSideBar";
+import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, yearFormats } from "../../../../../utlity/dateTimeFormats";
+import { DROPDOWNTOGGLE, TEMPORAL } from "../RightSideBar";
 import { MdKeyboardArrowDown } from "react-icons/md";
 import dayjs from "dayjs";
+import { DroppedItem } from "../../../../../utlity/types";
 
 const dateTimeFormatMap = {
     "date": dateFormats,
@@ -14,29 +15,39 @@ const dateTimeFormatMap = {
 }
 
 interface TemporalDateAttrInt {
-    subType: string;
+    dateFormat: string;
     format: string | undefined;
+    selectedTag: DroppedItem;
     dropDownToggle: DROPDOWNTOGGLE | null;
     setDropDownToggle: React.Dispatch<React.SetStateAction<DROPDOWNTOGGLE | null>>;
     handlePropertyChange: (changeTo: string, changeWith: string | boolean | number, is24Hrs: boolean) => void;
 }
 
-const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
+const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, selectedTag, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
+
+    let is24HourFormat = true
+
+    if (selectedTag.format && selectedTag.format.split(/hh|mm/).length > 0) {
+        if ((selectedTag.format.split(/:mm/)[0]).at(-1) === "h") {
+            is24HourFormat = false;
+        }
+    }
 
 
-    const [is24Hrs, setIs24Hrs] = useState<boolean>(true);
+    const [is24Hrs, setIs24Hrs] = useState<boolean>(is24HourFormat);
 
     const handleIs24HrsClick = (checked: boolean) => {
-        console.log(is24Hrs, checked, "line 30")
-        if (subType === TEMPORAL.TIME) {
+        if (dateFormat === TEMPORAL.TIME) {
             if (!checked) {
-                handlePropertyChange("format", timeFormats[1].format, is24Hrs)
+                handlePropertyChange("format", timeFormats[1].format, !is24Hrs)
             } else {
                 handlePropertyChange("format", timeFormats[0].format, is24Hrs)
             }
         }
-        else if (subType === TEMPORAL.DATE_TIME) {
-            handlePropertyChange("format", (format.split(" ").slice(0, -1).join(" ")), !is24Hrs)
+        else if (dateFormat === TEMPORAL.DATE_TIME) {
+            const timeFormat = format = timeFormats[checked ? 0 : 1].format;
+            const dateFormat = selectedTag.format && selectedTag.format.split(/hh|HH/)[0]
+            handlePropertyChange("format", dateFormat+" "+timeFormat, checked ? is24Hrs : !is24Hrs)
         }
         setIs24Hrs(checked)
     }
@@ -53,7 +64,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
         <div>
             <div className="flex justify-between">
                 <label htmlFor="" className="">Formats</label>
-                {(subType === TEMPORAL.DATE_TIME || subType === TEMPORAL.TIME) &&
+                {(dateFormat === TEMPORAL.DATE_TIME || dateFormat === TEMPORAL.TIME) &&
                     <div className="flex justify-center items-center gap-1.5">
                         <input
                             checked={is24Hrs ? is24Hrs : false}
@@ -72,7 +83,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
                 className="flex justify-between items-center border-1 rounded px-2 py-1 border-slate-200">
                 <p className="cursor-pointer py-1">
                     {format ? format : dateTimeFormatMap['date'][0].format}
-                    {/* {(subType !== TEMPORAL.DATE && subType !== TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */}
+                    {/* {(dateFormat !== TEMPORAL.DATE && dateFormat !== TEMPORAL.TIME) ? (is24Hrs ? " " + timeFormats[0].format : " " + timeFormats[1].format) : ""} */}
                 </p>
                 <MdKeyboardArrowDown />
             </div>
@@ -80,21 +91,21 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ subType, format, drop
             {
                 dropDownToggle === DROPDOWNTOGGLE.DDMMYY_FORMAT &&
                 <div className="shadow bg-slate-100 mt-1 border-[1px] max-h-[200px] overflow-y-auto border-slate-100 rounded">
-                    {dateTimeFormatMap[subType].map((valObj, indx) => {
+                    {dateTimeFormatMap[dateFormat].map((valObj, indx) => {
                         // let val = showFormatEg ? valObj["example"] : valObj["format"]
                         let val = valObj["format"]
-                        if (subType === TEMPORAL.DATE_TIME) {
+                        if (dateFormat === TEMPORAL.DATE_TIME) {
                             if (is24Hrs) {
-                                val = val + " " + timeFormats[0].format;
+                                val = val+" "+timeFormats[0].format;
                             } else {
-                                val = val + " " + timeFormats[1].format;
+                                val = val+" "+timeFormats[1].format;
                             }
                         }
-                        console.log('line 89', val)
+
                         return (
                             <div
                                 key={indx}
-                                onClick={() => handlePropertyChange("format", valObj["format"], is24Hrs)}
+                                onClick={() => handlePropertyChange("format", val, is24Hrs)}
                                 className="px-2 py-1 hover:bg-slate-200 cursor-pointer"
                             >
                                 {val}

src/components/process/processStepTwo/rightSideBar/attributes/TextValueFIll.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react'
+
+interface TextValueFIllProps {
+    value: string | number;
+    multiLine: boolean;
+    handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
+}
+
+const TextValueFIll: React.FC<TextValueFIllProps> = ({ value = "", multiLine, handlePropertyChange }) => {
+    const [textValue, setTextValue] = useState<string | number>(value);
+
+    return (
+        <div className="flex flex-col">
+            <label htmlFor="textValue">Value</label>
+            {multiLine ?
+                <textarea
+                    onBlur={() => handlePropertyChange("value", textValue)}
+                    id="textValue"
+                    value={textValue}
+                    className="outline-none border-1 rounded px-2 py-1 border-slate-200"
+                    onChange={e => setTextValue(e.target.value)}
+                ></textarea>
+                : <input
+                    onBlur={() => handlePropertyChange("value", textValue)}
+                    id="textValue"
+                    value={textValue}
+                    className="outline-none border-1 rounded px-2 py-1 border-slate-200"
+                    onChange={e => setTextValue(e.target.value)}
+                />
+            }
+        </div>
+    )
+}
+
+export default TextValueFIll

src/components/process/processStepTwo/rightSideBar/attributes/ToolTipAttr.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+interface ToolTipAttrInt {
+    tooltip: string;
+    handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
+}
+
+const ToolTipAttr: React.FC<ToolTipAttrInt> = ({ tooltip, handlePropertyChange }) => {
+    return (
+        <>
+            <div className="flex flex-col">
+                <label>ToolTip</label>
+                <input
+                    value={tooltip}
+                    onChange={(e) => handlePropertyChange('tooltip', e.target.value)}
+                    type="text"
+                    className="outline-none border-1 rounded px-2 py-1 border-slate-200" />
+            </div>
+        </>
+    )
+}
+
+export default ToolTipAttr

src/components/routes_helper/PageGuard.tsx

@@ -4,8 +4,6 @@ import { useParams } from 'react-router-dom'
 const PageGuard = () => {
     const allowedPages = ["settings", "contacts"]
 
-    console.log("Allowed Pages: ", allowedPages)
-
     const {page1} = useParams<{page1: string}>()
     if (page1 && !allowedPages.includes(page1)) {
       return <div>Access Denied</div>

src/components/setting/AsideSection.tsx

@@ -22,7 +22,7 @@ const AsideSection = ({
   }
 
   return (
-    <div className="w-[16vw] p-4">
+    <div className="">
       <div className="mb-4">
         <h3 className="text-lg font-semibold text-gray-800">{mainTabTitle}</h3>
         <p className="text-sm text-gray-500 mt-1">Navigate through sections</p>

src/components/setting/ContactForm.tsx

@@ -1,230 +1,232 @@
 // ContactForm.tsx
-import React, { useState } from 'react';
-import { FaSpinner } from 'react-icons/fa';
+import React, { useState } from "react";
+import { FaSpinner } from "react-icons/fa";
 
 export interface ContactData {
-    contactId?: number;
-    email: string;
-    firstName: string;
-    lastName: string;
-    title: string;
-    company: string;
-    website: string;
-    phones: string[];
+  contactId?: number;
+  email: string;
+  firstName: string;
+  lastName: string;
+  title: string;
+  company: string;
+  website: string;
+  phone: string;
 }
 
 interface Props {
-    onSubmit: (data: ContactData) => void;
-    loading: boolean;
+  onSubmit: (data: ContactData) => void;
+  loading: boolean;
 }
 
 const ContactForm = ({ onSubmit, loading }: Props) => {
-    const [formData, setFormData] = useState<ContactData>({
-        email: '',
-        firstName: '',
-        lastName: '',
-        title: '',
-        company: '',
-        website: '',
-        phones: [''],
-    });
+  const [formData, setFormData] = useState<ContactData>({
+    email: "",
+    firstName: "",
+    lastName: "",
+    title: "",
+    company: "",
+    website: "",
+    phone: "",
+  });
 
-    const [errors, setErrors] = useState<{ [key: string]: string }>({});
+  const [errors, setErrors] = useState<{ [key: string]: string }>({});
 
-    const handleChange = (field: keyof ContactData, value: string) => {
-        setFormData((prev) => ({ ...prev, [field]: value }));
-        if (errors[field]) {
-            setErrors((prev) => ({ ...prev, [field]: '' }));
-        }
-    };
+  const handleChange = (field: keyof ContactData, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    if (errors[field]) {
+      setErrors((prev) => ({ ...prev, [field]: "" }));
+    }
+  };
 
-    const handlePhoneChange = (index: number, value: string) => {
-        const numericValue = value.replace(/\D/g, ''); // Remove non-numeric
-        const updatedPhones = [...formData.phones];
-        updatedPhones[index] = numericValue;
-        setFormData((prev) => ({ ...prev, phones: updatedPhones }));
+//   const handlePhoneChange = (index: number, value: string) => {
+//     const numericValue = value.replace(/\D/g, ""); // Remove non-numeric
+//     const updatedPhone = [...formData.phone];
+//     updatedPhone[index] = numericValue;
+//     setFormData((prev) => ({ ...prev, phone: updatedPhone }));
 
-        const errorKey = `phones_${index}`;
-        if (errors[errorKey]) {
-            setErrors((prev) => ({ ...prev, [errorKey]: '' }));
-        }
-    };
+//     const errorKey = `phone_${index}`;
+//     if (errors[errorKey]) {
+//       setErrors((prev) => ({ ...prev, [errorKey]: "" }));
+//     }
+//   };
 
+//   const addPhoneField = () => {
+//     setFormData((prev) => ({ ...prev, phone: [...prev.phone, ""] }));
+//   };
 
-    const addPhoneField = () => {
-        setFormData((prev) => ({ ...prev, phones: [...prev.phones, ''] }));
-    };
+//   const removePhoneField = (index: number) => {
+//     const updatedPhone = formData.phone.filter((_, i) => i !== index);
+//     setFormData((prev) => ({ ...prev, phone: updatedPhone }));
+//   };
 
-    const removePhoneField = (index: number) => {
-        const updatedPhones = formData.phones.filter((_, i) => i !== index);
-        setFormData((prev) => ({ ...prev, phones: updatedPhones }));
-    };
+  const validate = () => {
+    const newErrors: { [key: string]: string } = {};
 
-    const validate = () => {
-        const newErrors: { [key: string]: string } = {};
+    // const nameRegex = /^[a-zA-Z\s\-']+$/;
+    const urlRegex = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/.*)?$/;
+     const phoneRegex =
+      /^\+?\d{1,4}?[-.\s]?\(?\d{2,5}\)?[-.\s]?\d{3,5}[-.\s]?\d{3,5}$/;
 
-        const nameRegex = /^[a-zA-Z\s\-']+$/;
-        const urlRegex = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/.*)?$/;
-        const phoneRegex = /^\d+$/;
+    // Email
+    if (!formData.email.trim()) {
+      newErrors.email = "Email is required";
+    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
+      newErrors.email = "Invalid email address";
+    }
 
-        // Email
-        if (!formData.email.trim()) {
-            newErrors.email = 'Email is required';
-        } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
-            newErrors.email = 'Invalid email address';
-        }
+    // // First Name
+    // if (!formData.firstName.trim()) {
+    //     newErrors.firstName = 'First name is required';
+    // } else if (!nameRegex.test(formData.firstName)) {
+    //     newErrors.firstName = 'First name contains invalid characters';
+    // }
 
-        // // First Name
-        // if (!formData.firstName.trim()) {
-        //     newErrors.firstName = 'First name is required';
-        // } else if (!nameRegex.test(formData.firstName)) {
-        //     newErrors.firstName = 'First name contains invalid characters';
-        // }
+    // Last Name
+    if (!formData.lastName.trim()) {
+      newErrors.lastName = "Last name is required";
+    }
 
-        // Last Name
-        if (!formData.lastName.trim()) {
-            newErrors.lastName = 'Last name is required';
-        } else if (!nameRegex.test(formData.lastName)) {
-            newErrors.lastName = 'Last name contains invalid characters';
-        }
+    // // Title
+    // if (!formData.title.trim()) {
+    //     newErrors.title = 'Title is required';
+    // }
 
-        // // Title
-        // if (!formData.title.trim()) {
-        //     newErrors.title = 'Title is required';
-        // }
+    // Website (optional but validate if present)
+     if (formData.website.trim() && !urlRegex.test(formData.website)) {
+      newErrors.website = "Invalid website URL";
+    }
 
+    // Phone
+    if (formData.phone.trim() && !phoneRegex.test(formData.phone)) {
+      newErrors.phone = "Phone number must contain only digits";
+    }
 
-        // Website (optional but validate if present)
-        if (formData.website.trim() && !urlRegex.test(formData.website)) {
-            newErrors.website = 'Invalid website URL';
-        }
+    return newErrors;
+  };
 
-        // Phones
-        // formData.phones.forEach((phone, index) => {
-        //     if (!phone.trim()) {
-        //         newErrors[`phones_${index}`] = 'Phone number is required';
-        //     } else if (!phoneRegex.test(phone)) {
-        //         newErrors[`phones_${index}`] = 'Phone number must contain only digits';
-        //     }
-        // });
+  const handleSubmit = async () => {
+    const validationErrors = validate();
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors);
+      return;
+    }
 
-        return newErrors;
-    };
+    try {
+      await onSubmit(formData);
 
+      setFormData({
+        email: "",
+        firstName: "",
+        lastName: "",
+        title: "",
+        company: "",
+        website: "",
+        phone: "",
+      });
+      setErrors({});
+    } catch (err) {
+      console.error("Submit failed:", err);
+    }
+  };
 
-    const handleSubmit = async () => {
-        const validationErrors = validate();
-        if (Object.keys(validationErrors).length > 0) {
-            setErrors(validationErrors);
-            return;
-        }
+  return (
+    <div className="ms-2 space-y-2 max-w-[60vw]">
+      <h2 className="text-lg font-medium text-slate-500">Add Contact</h2>
 
-        try {
-            await onSubmit(formData);
+      <div className="grid grid-cols-2 gap-3">
+        {[
+          { label: "First Name", field: "firstName" },
+          { label: "Last Name", field: "lastName" },
+          { label: "Email", field: "email", fieldType: "email" },
+          { label: "Title", field: "title" },
+          { label: "Company", field: "company" },
+          { label: "Website", field: "website", fieldType: "url" },
+          { label: "Phone", field: "phone", fieldType: "tel" },
+        ].map(({ label, field, fieldType }) => (
+          <div key={field} className="flex flex-col">
+            <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">
+              {label}
+            </label>
+            <input
+              type={fieldType ? fieldType : "text"}
+              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"
+              placeholder={`Enter ${label}`}
+            />
+            {errors[field] && (
+              <span className="text-sm text-red-500 mt-1">{errors[field]}</span>
+            )}
+          </div>
+        ))}
+      </div>
 
-            setFormData({
-                email: '',
-                firstName: '',
-                lastName: '',
-                title: '',
-                company: '',
-                website: '',
-                phones: [''],
-            });
-            setErrors({});
-        } catch (err) {
-            console.error('Submit failed:', err);
-        }
-    };
-
-
-    return (
-        <div className="ms-2 space-y-2 max-w-[60vw]">
-            <h2 className="text-lg font-medium text-slate-500">Add Contact</h2>
-
-            <div className="grid grid-cols-2 gap-3">
-                {[
-                    { label: 'First Name', field: 'firstName' },
-                    { label: 'Last Name', field: 'lastName' },
-                    { label: 'Email', field: 'email' },
-                    { label: 'Title', field: 'title' },
-                    { label: 'Company', field: 'company' },
-                    { label: 'Website', field: 'website' },
-                ].map(({ label, field }) => (
-                    <div key={field} className="flex flex-col">
-                        <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}
-                            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"
-                            placeholder={`Enter ${label}`}
-                        />
-                        {errors[field] && <span className="text-sm text-red-500 mt-1">{errors[field]}</span>}
-                    </div>
-                ))}
-            </div>
-
-            <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) => (
-                        <div key={index} className="flex flex-col gap-1">
-                            <div className="flex items-center gap-2">
-                                <input
-                                    type="text"
-                                    value={phone}
-                                    onChange={(e) => handlePhoneChange(index, e.target.value)}
-                                    className="flex-1 px-3 py-1.5 border border-gray-400 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--primary)] text-sm"
-                                    maxLength={15}
-                                    placeholder='Enter Phone Numbers'
-                                />
-                                {formData.phones.length > 1 && (
-                                    <button
-                                        type="button"
-                                        onClick={() => removePhoneField(index)}
-                                        className="text-xs text-red-500 hover:underline"
-                                    >
-                                        Remove
-                                    </button>
-                                )}
-                            </div>
-                            {errors[`phones_${index}`] && (
-                                <span className="text-sm text-red-500">{errors[`phones_${index}`]}</span>
-                            )}
-                        </div>
-                    ))}
-
-                    <button
-                        type="button"
-                        onClick={addPhoneField}
-                        className="text-sm text-blue-500 hover:underline mt-1 cursor-pointer"
-                    >
-                        + Add another phone
-                    </button>
-                </div>
-            </div>
-
-            <div className="flex justify-end">
-                <button
+      {/* <div>
+        <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">
+          Phone Numbers
+        </label>
+        <div className="space-y-2">
+          {formData.phone.map((phone, index) => (
+            <div key={index} className="flex flex-col gap-1">
+              <div className="flex items-center gap-2">
+                <input
+                  type="text"
+                  value={phone}
+                  onChange={(e) => handlePhoneChange(index, e.target.value)}
+                  className="flex-1 px-3 py-1.5 border border-gray-400 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--primary)] text-sm"
+                  maxLength={15}
+                  placeholder="Enter Phone Numbers"
+                />
+                {formData.phone.length > 1 && (
+                  <button
                     type="button"
-                    onClick={handleSubmit}
-                    disabled={loading}
-                    className="bg-gray-300 px-5 py-2 rounded-md text-slate-700 text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
-                >
-                    {loading ? (
-                        <>
-                            <FaSpinner className="animate-spin inline-block mr-2" />
-                            SAVING...
-                        </>
-                    ) : (
-                        'SAVE CONTACT'
-                    )}
-                </button>
+                    onClick={() => removePhoneField(index)}
+                    className="text-xs text-red-500 hover:underline"
+                  >
+                    Remove
+                  </button>
+                )}
+              </div>
+              {errors[`phone_${index}`] && (
+                <span className="text-sm text-red-500">
+                  {errors[`phone_${index}`]}
+                </span>
+              )}
             </div>
+          ))}
+
+          <button
+            type="button"
+            onClick={addPhoneField}
+            className="text-sm text-blue-500 hover:underline mt-1 cursor-pointer"
+          >
+            + Add another phone
+          </button>
         </div>
-    );
+      </div> */}
+
+      <div className="flex justify-end">
+        <button
+          type="button"
+          onClick={handleSubmit}
+          disabled={loading}
+          className="bg-gradient-to-br from-[var(--primary)] to-blue-600 px-5 py-2 rounded-md text-white text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
+        >
+          {loading ? (
+            <>
+              <FaSpinner className="animate-spin inline-block mr-2" />
+              SAVING...
+            </>
+          ) : (
+            "SAVE CONTACT"
+          )}
+        </button>
+      </div>
+    </div>
+  );
 };
 
 export default ContactForm;

src/components/setting/CreateAndInvite.tsx

@@ -177,7 +177,7 @@ const CreateAndInvite = ({
             <button
               type="button"
               onClick={handleCreateSubmit}
-              className="ms-1 flex items-center text-[14px] px-3 py-[1.1] bg-gray-300 text-slate-600 font-medium rounded-md border border-gray-300 hover:bg-opacity-90 transition cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
+              className="ms-1 flex items-center text-[14px] px-3 py-[1.1] bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white font-medium rounded-md border border-gray-300 hover:bg-opacity-90 transition cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
               disabled={createAndInviteLoader}
             >
               {createAndInviteLoader ? (
@@ -321,7 +321,7 @@ const CreateAndInvite = ({
           <button
             type="button"
             onClick={handleInviteSubmit}
-            className="px-4 py-2 text-sm font-medium rounded-md cursor-pointer hover:bg-opacity-90 transition text-[14px] bg-gray-300 text-slate-600 disabled:opacity-60 disabled:cursor-not-allowed"
+            className="px-4 py-2 text-sm font-medium rounded-md cursor-pointer hover:bg-opacity-90 transition text-[14px] bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white disabled:opacity-60 disabled:cursor-not-allowed"
             disabled={createAndInviteLoader}
           >
             {createAndInviteLoader ? (

src/components/setting/Setting.tsx

@@ -9,7 +9,7 @@ import AsideSection from "./AsideSection";
 import Signature from "./Signature/Signature";
 import { Bounce, toast } from "react-toastify";
 import AccountNav from "../accounts/AccountNav";
-import ContactForm , {ContactData} from "./ContactForm";
+import ContactForm, { ContactData } from "./ContactForm";
 
 // Define the shape of state object
 interface Account {
@@ -43,9 +43,7 @@ interface AccountOption {
 
 const Setting = () => {
   const { page1 } = useParams<{ page1: string }>();
-  console.log("page1", page1)
   const location = useLocation();
-  console.log("location", location)
   const navigate = useNavigate();
 
   const [activeAccountId, setActiveAccountId] = useState<string | null>(
@@ -310,7 +308,6 @@ const Setting = () => {
   // Set initial subsection when component mounts or activeTab changes
   useEffect(() => {
     const subSections = getSubSections(activeTab);
-    console.log("subSections", subSections)
     const hash = location.hash.replace('#', '');
 
     if (subSections.length > 0) {
@@ -345,23 +342,19 @@ const Setting = () => {
       let res;
       let toastMesaage;
       if (action === 'create') {
-        console.log('Creating account:', data);
         const payloadAccount = {
           name: data.accountName
         }
         res = await api.post(`/api/user/accounts`, payloadAccount)
-        console.log("resAccountName", res)
         if (res.status === 201) {
           toastMesaage = `${action.toUpperCase()} Created Successfull...!`
         }
       } else if (action === 'invite') {
-        console.log('Inviting user:', data);
         const payloadInvite = {
           email: data.email,
           role: data.role
         }
         res = await api.post(`/api/accounts/${data.i_accountName}/invite`, payloadInvite)
-        console.log("InviteNAme", res)
         toastMesaage = "Invite Successfull...!"
       }
 
@@ -392,7 +385,7 @@ const Setting = () => {
   const handleContactSubmit = async (data: ContactData) => {
     try {
       setCreateAndInviteLoader(true);
-      const res = await api.post(`/api/accounts/${activeAccountId}/contacts`, [data]); 
+      const res = await api.post(`/api/accounts/${activeAccountId}/contacts`, [data]);
       if (res.status === 200) {
         toast.success('Contact created successfully!', {
           position: "top-center",
@@ -415,16 +408,16 @@ const Setting = () => {
       {/* <SettingNav /> */}
       {/* <AccountNav/> */}
       <div className="bg-[#f9fafa] h-[calc(90vh-20px)] flex flex-col mt-2">
-        {/* Main Navigation Tabs */}
-        <div className="sticky top-0 z-10 bg-white border-b border-gray-200 px-8 pt-5">
-          <div className="flex gap-6">
+        {/* Tabs */}
+        <div className="sticky top-0 z-10 bg-white border-b border-gray-200 px-4 md:px-6 lg:px-8 pt-4">
+          <div className="flex flex-wrap gap-4 md:gap-6">
             {tabs.map((tab) =>
               tab.type === page1 && (
                 <button
                   key={tab.id}
                   onClick={() => handleMainTabClick(tab.id)}
                   className={`cursor-pointer relative pb-3 text-sm font-medium transition-all duration-200
-                  ${activeTab === tab.id
+              ${activeTab === tab.id
                       ? "text-blue-600 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-blue-600"
                       : "text-gray-600 hover:text-blue-500"
                     }`}
@@ -436,11 +429,12 @@ const Setting = () => {
           </div>
         </div>
 
-        {/* Content with Aside Navigation */}
-        <div className="flex mt-3 px-8 flex-1 min-h-0">
-          {/* Fixed Aside Navigation - Shows subsections of active tab */}
-          {activeTab === 'userProfile' &&
-            <section className="flex-shrink-0 mr-6 w-50 relative">
+        {/* Responsive Layout */}
+        <div className="flex-1 min-h-0 flex flex-col lg:flex-row px-4 md:px-6 lg:px-8 mt-3 gap-6">
+
+          {/* Sidebar (hidden on small, shown on lg) */}
+          {activeTab === 'userProfile' && (
+            <section className="hidden lg:block flex-shrink-0 w-56">
               <div className="sticky top-6 z-20">
                 <AsideSection
                   activeSubSection={activeSubSection}
@@ -450,8 +444,28 @@ const Setting = () => {
                 />
               </div>
             </section>
-          }
-          {/* Scrollable Main Content */}
+          )}
+
+          {/* Sidebar as horizontal nav (only on mobile) */}
+          {activeTab === 'userProfile' && (
+            <section className="lg:hidden mb-4">
+              <div className="flex overflow-x-auto no-scrollbar gap-4 border-b pb-2">
+                {getSubSections(activeTab).map((sub) => (
+                  <button
+                    key={sub.id}
+                    onClick={() => handleSubSectionClick(sub.id)}
+                    className={`whitespace-nowrap text-sm font-medium px-2 py-1 rounded-md
+                ${activeSubSection === sub.id ? "bg-blue-100 text-blue-600" : "text-gray-600"}
+              `}
+                  >
+                    {sub.label}
+                  </button>
+                ))}
+              </div>
+            </section>
+          )}
+
+          {/* Main Content */}
           <div
             ref={scrollContainerRef}
             className="flex-1 min-w-0 overflow-y-auto no-scrollbar"
@@ -460,6 +474,7 @@ const Setting = () => {
           </div>
         </div>
       </div>
+
     </>
   )
 }

src/components/setting/Signature/AddSignatureModal.tsx

@@ -55,7 +55,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
     getAllSignatures,
     editingSignature
 }) => {
-    const [activeTab, setActiveTab] = useState<'TYPE' | 'DRAW' | 'UPLOAD' >('TYPE');
+    const [activeTab, setActiveTab] = useState<'SELECT' | 'DRAW' | 'UPLOAD'>('SELECT');
     const [fullName, setFullName] = useState('');
     const [initials, setInitials] = useState('');
     const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
@@ -107,18 +107,17 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
 
     // Navigation items
     const navigationItems = [
-        { id: 'TYPE', label: 'TYPE', icon: <GrCheckboxSelected className="w-4 h-4" /> },
-        { id: 'DRAW', label: 'DRAW', icon: <AiOutlineEdit className="w-5 h-5" /> },
-        { id: 'UPLOAD', label: 'UPLOAD', icon: <AiOutlineUpload className="w-5 h-5" /> },
-        // { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
+        { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-3 h-3 md:w-4 md:h-4" /> },
+        { id: 'DRAW', label: 'DRAW', icon: <AiOutlineEdit className="w-3 h-3 md:w-4 md:h-4" /> },
+        { id: 'UPLOAD', label: 'UPLOAD', icon: <AiOutlineUpload className="w-3 h-3 md:w-4 md:h-4" /> },
     ];
 
     // Initialize form with editing signature data
     useEffect(() => {
         if (editingSignature) {
             setFullName(`${editingSignature.firstName} ${editingSignature.lastName}`);
-            setInitials(`${editingSignature.firstName.slice(0, 1)}${editingSignature.lastName.slice(0, 1)}`);
-            setActiveTab(editingSignature.signatureType as 'TYPE' | 'DRAW' | 'UPLOAD');
+            setInitials((`${editingSignature.firstName.slice(0, 1)}${editingSignature.lastName.slice(0, 1)}`).toUpperCase());
+            setActiveTab(editingSignature.signatureType as 'SELECT' | 'DRAW' | 'UPLOAD');
 
             // Set font for SELECT tab
             const fontOption = signatureOptions.find(option => option.style === editingSignature.font);
@@ -193,23 +192,41 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
     const handleSubmit = async () => {
         setIsSubmitting(true);
 
-        if (!signatures.fullSignature || !signatures.initials) {
-            alert('Please provide both signature and initials');
+        // Only validate for DRAW and UPLOAD
+        if ((activeTab === 'DRAW' || activeTab === 'UPLOAD') &&
+            (!signatures.fullSignature || !signatures.initials)) {
+            // alert('Please provide both signature and initials');
+            toast.error('Please provide both signature and initials in draw and upload case', {
+                position: "top-center",
+                autoClose: 2000,
+                hideProgressBar: false,
+                closeOnClick: false,
+                pauseOnHover: true,
+                draggable: true,
+                progress: undefined,
+                theme: "light",
+                transition: Bounce,
+            });
             setIsSubmitting(false);
             return;
         }
 
         try {
+            // Base payload
             const payload = {
                 signatureType: activeTab,
-                signatureBase64: signatures.fullSignature,
-                initialsBase64: signatures.initials,
                 firstName: fullName.split(' ')[0] || user.firstName,
                 lastName: fullName.split(' ')[1] || user.lastName,
                 font: selectedSignature.style,
-                default:checked
+                default: checked
             };
 
+            // Only add signatures if not SELECT
+            if (activeTab !== 'SELECT') {
+                payload.signatureBase64 = signatures.fullSignature;
+                payload.initialsBase64 = signatures.initials;
+            }
+
             let res;
             if (isEditMode && editingSignature) {
                 // Update existing signature
@@ -218,7 +235,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                     signatureId: editingSignature.id
                 };
                 res = await api.put(`/api/user/signatures`, updatePayload);
-                console.log("handleUpdate", res);
 
                 toast.success("Signature Updated Successfully", {
                     position: "top-center",
@@ -234,7 +250,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
             } else {
                 // Create new signature
                 res = await api.post(`/api/user/signatures`, payload);
-                console.log("handleSubmit", res);
 
                 toast.success("Signature Created Successfully", {
                     position: "top-center",
@@ -271,32 +286,57 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
         }
     };
 
+
+    // Fixed renderContent function for SELECT case with proper radio button styling
     const renderContent = () => {
         switch (activeTab) {
-            case 'TYPE':
+            case 'SELECT':
                 return (
-                    <div className="h-full flex flex-col ">
-                        <div className="mb-6">
-                            <h2 className="text-xl font-semibold text-gray-900 mb-2">Choose Signature Style</h2>
-                            <p className="text-sm text-gray-600">Select from pre-designed signature styles</p>
+                    <div className="h-full flex flex-col">
+                        <div className="mb-1 md:mb-4 lg:mb-6 flex-shrink-0">
+                            <h2 className="text-base md:text-lg lg:text-xl font-semibold text-gray-900 mb-1">Choose Signature Style</h2>
+                            <p className="text-xs md:text-sm text-gray-600 hidden md:block">Select from pre-designed signature styles</p>
                         </div>
 
-                        <div className="flex-1 overflow-y-auto">
-                            <div className="space-y-4">
+                        <div className="flex-1 min-h-0 overflow-y-auto no-scrollbar">
+                            <div className="space-y-2 md:space-y-3 pb-2">
                                 {signatureOptions.map((option) => (
-                                    <div key={option.id} className="flex items-center space-x-4 px-2 py-1 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
+                                    <div
+                                        key={option.id}
+                                        className={`flex items-center space-x-2 md:space-x-3 p-2 md:p-3 border rounded-lg transition-all duration-200 cursor-pointer ${selectedSignature.id === option.id
+                                            ? 'border-gray-100 shadow-sm'
+                                            : 'border-gray-200 hover:bg-gray-50 hover:border-gray-300'
+                                            }`}
+                                        onClick={() => setSelectedSignature({ id: option.id, style: option.style })}
+                                    >
+                                        {/* Custom Radio Button */}
+                                        <div className="flex-shrink-0">
+                                            <div
+                                                className={`w-4 h-4 md:w-3 md:h-3 rounded-full border-2 flex items-center justify-center transition-all duration-200 ${selectedSignature.id === option.id
+                                                    ? 'border-gray-300 bg-blue-600'
+                                                    : 'border-gray-300 bg-white hover:border-gray-400'
+                                                    }`}
+                                            >
+                                                {selectedSignature.id === option.id && (
+                                                    <div className="w-2 h-2 md:w-3 md:h-2 rounded-full bg-blue-500"></div>
+                                                )}
+                                            </div>
+                                        </div>
+
+                                        {/* Hidden native radio button for accessibility */}
                                         <input
                                             type="radio"
                                             id={`signature-${option.id}`}
                                             name="signature"
                                             checked={selectedSignature.id === option.id}
                                             onChange={() => setSelectedSignature({ id: option.id, style: option.style })}
-                                            className="w-4 h-4 text-blue-600 focus:ring-blue-500"
+                                            className="sr-only"
                                         />
-                                        <div className="flex-1 grid grid-cols-2 gap-2">
-                                            <div className=" border-gray-300 rounded-lg px-2 py-1 bg-white ">
-                                                <div className="text-xs text-gray-500 mb-2">Signed by:</div>
-                                                <div className={`text-lg ${option.style === 'cursive' ? 'font-serif italic' :
+
+                                        <div className="flex-1 min-w-0 grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-3">
+                                            <div className="border border-gray-300 rounded-lg px-2 md:px-3 py-2 md:py-3 bg-white min-w-0">
+                                                <div className="text-xs text-gray-500 mb-1">Signed by:</div>
+                                                <div className={`text-sm md:text-base truncate ${option.style === 'cursive' ? 'font-serif italic' :
                                                     option.style === 'script' ? 'font-mono' :
                                                         option.style === 'elegant' ? 'font-serif' :
                                                             option.style === 'modern' ? 'font-sans tracking-wide' :
@@ -304,13 +344,13 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                                                     }`}>
                                                     {fullName || option.name}
                                                 </div>
-                                                <div className="text-xs text-gray-400 mt-2">
+                                                <div className="text-xs text-gray-400 mt-1 truncate">
                                                     dca3e646-62cd-4cc...
                                                 </div>
                                             </div>
-                                            <div className=" rounded-lg px-2 py-2 bg-white ">
-                                                <div className="text-xs text-gray-500 mb-2">DS</div>
-                                                <div className={`text-2xl ${option.style === 'cursive' ? 'font-serif italic' :
+                                            <div className="border border-gray-300 rounded-lg px-2 md:px-3 py-2 md:py-3 bg-white min-w-0">
+                                                <div className="text-xs text-gray-500 mb-1">DS</div>
+                                                <div className={`text-lg md:text-xl truncate ${option.style === 'cursive' ? 'font-serif italic' :
                                                     option.style === 'script' ? 'font-mono' :
                                                         option.style === 'elegant' ? 'font-serif' :
                                                             option.style === 'modern' ? 'font-sans tracking-wide' :
@@ -329,79 +369,73 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
 
             case 'DRAW':
                 return (
-                    <DrawSignatureCanvas
-                        onSignatureChange={handleSignatureChange}
-                        initialSignatures={isEditMode ? signatures : undefined}
-                    />
+                    <div className="h-full">
+                        <DrawSignatureCanvas
+                            onSignatureChange={handleSignatureChange}
+                            initialSignatures={isEditMode ? signatures : undefined}
+                        />
+                    </div>
                 );
 
             case 'UPLOAD':
                 return (
                     <div className="h-full flex flex-col">
-                        <div className="mb-6">
-                            <h2 className="text-xl font-semibold text-gray-900 mb-2">Upload Signature</h2>
+                        <div className="mb-3 md:mb-4 lg:mb-6 flex-shrink-0">
+                            <h2 className="text-base md:text-lg lg:text-xl font-semibold text-gray-900 mb-1">Upload Signature</h2>
+                            <p className="text-xs md:text-sm text-gray-600 hidden md:block">Upload your signature images</p>
                         </div>
-                        <div className="flex-1 overflow-y-auto">
-                            <div>
-                                <div className="grid grid-cols-12 gap-6">
-                                    {/* Upload 1 */}
-                                    <div className="col-span-8">
-                                        <label className="block text-sm font-medium text-gray-700 mb-2">Full Signature</label>
-                                        <label htmlFor="upload1" className=" border-2 border-dashed border-gray-300 rounded-lg h-62 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
-                                            {preview1 ? (
-                                                <img src={preview1} alt="Signature Preview" className="max-h-44 object-contain" />
-                                            ) : (
-                                                <div className="text-center">
-                                                    <MdCloudUpload className="mx-auto h-12 w-12 text-gray-400 mb-3" />
-                                                    <p className="text-sm text-gray-500 mb-1">Click to upload or drag and drop</p>
-                                                    <p className="text-xs text-gray-400">PNG, JPG, GIF up to 10MB</p>
-                                                </div>
-                                            )}
-                                        </label>
-                                        <input
-                                            id="upload1"
-                                            type="file"
-                                            accept="image/*"
-                                            className="hidden"
-                                            onChange={(e) => handleImageChange(e, setFile1, setPreview1, "fullSignature")}
-                                        />
-                                    </div>
+                        <div className="flex-1 min-h-0 overflow-y-auto">
+                            <div className="grid grid-cols-1 lg:grid-cols-12 gap-3 md:gap-4 pb-2">
+                                {/* Upload 1 - Full Signature */}
+                                <div className="lg:col-span-8">
+                                    <label className="block text-xs md:text-sm font-medium text-gray-700 mb-2">Full Signature</label>
+                                    <label htmlFor="upload1" className="block border-2 border-dashed border-gray-300 rounded-lg h-32 md:h-40 lg:h-48 xl:h-56 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
+                                        {preview1 ? (
+                                            <img src={preview1} alt="Signature Preview" className="max-h-full max-w-full object-contain p-2" />
+                                        ) : (
+                                            <div className="text-center px-4">
+                                                <MdCloudUpload className="mx-auto h-6 w-6 md:h-8 md:w-8 lg:h-10 lg:w-10 text-gray-400 mb-2" />
+                                                <p className="text-xs md:text-sm text-gray-500 mb-1">Click to upload or drag and drop</p>
+                                                <p className="text-xs text-gray-400">PNG, JPG, GIF up to 10MB</p>
+                                            </div>
+                                        )}
+                                    </label>
+                                    <input
+                                        id="upload1"
+                                        type="file"
+                                        accept="image/*"
+                                        className="hidden"
+                                        onChange={(e) => handleImageChange(e, setFile1, setPreview1, "fullSignature")}
+                                    />
+                                </div>
 
-                                    {/* Upload 2 */}
-                                    <div className="col-span-4">
-                                        <label className="block text-sm font-medium text-gray-700 mb-2">Initials</label>
-                                        <label htmlFor="upload2" className=" border-2 border-dashed border-gray-300 rounded-lg h-62 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
-                                            {preview2 ? (
-                                                <img src={preview2} alt="Initials Preview" className="max-h-44 object-contain" />
-                                            ) : (
-                                                <div className="text-center">
-                                                    <MdCloudUpload className="mx-auto h-8 w-8 text-gray-400 mb-2" />
-                                                    <p className="text-xs text-gray-500">Upload initials</p>
-                                                </div>
-                                            )}
-                                        </label>
-                                        <input
-                                            id="upload2"
-                                            type="file"
-                                            accept="image/*"
-                                            className="hidden"
-                                            onChange={(e) => handleImageChange(e, setFile2, setPreview2, "initials")}
-                                        />
-                                    </div>
+                                {/* Upload 2 - Initials */}
+                                <div className="lg:col-span-4">
+                                    <label className="block text-xs md:text-sm font-medium text-gray-700 mb-2">Initials</label>
+                                    <label htmlFor="upload2" className="block border-2 border-dashed border-gray-300 rounded-lg h-32 md:h-40 lg:h-48 xl:h-56 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
+                                        {preview2 ? (
+                                            <img src={preview2} alt="Initials Preview" className="max-h-full max-w-full object-contain p-2" />
+                                        ) : (
+                                            <div className="text-center px-2">
+                                                <MdCloudUpload className="mx-auto h-5 w-5 md:h-6 md:w-6 lg:h-8 lg:w-8 text-gray-400 mb-2" />
+                                                <p className="text-xs md:text-sm text-gray-500 mb-1">Upload initials</p>
+                                                <p className="text-xs text-gray-400 hidden md:block">PNG, JPG, GIF</p>
+                                            </div>
+                                        )}
+                                    </label>
+                                    <input
+                                        id="upload2"
+                                        type="file"
+                                        accept="image/*"
+                                        className="hidden"
+                                        onChange={(e) => handleImageChange(e, setFile2, setPreview2, "initials")}
+                                    />
                                 </div>
                             </div>
                         </div>
                     </div>
                 );
 
-            // case 'SELECT':
-            //     return (
-            //         <div className="h-full flex flex-col">
-            //             <div className="mb-6">
-            //                 <h2 className="text-xl font-semibold text-gray-900 mb-2">Select Signature</h2>
-            //             </div>
-            //         </div>
-            //     );
             default:
                 return null;
         }
@@ -410,7 +444,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
     const getUserDetails = async () => {
         try {
             let res = await api.get(`/api/user/details`);
-            console.log("getuser", res);
+
             let currUser = res?.data;
             setUser(currUser);
 
@@ -428,25 +462,147 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
         getUserDetails();
     }, []);
 
-    return (
-        <div className="fixed inset-0 backdrop-blur-sm bg-opacity-50 flex items-center justify-center z-50 p-4">
-            <div className="bg-white rounded-md shadow-xl w-full max-w-[80vw] h-[80vh] flex relative">
 
-                {/* Sidebar Navigation */}
-                <div className="w-64 bg-gray-50 rounded-l-lg border-r border-gray-200 flex flex-col">
-                    {/* Header */}
-                    <div className="px-4 py-4 border-b border-gray-200">
-                        <div className="flex items-center space-x-3">
-                            <div className='px-1 py-1'>
-                                <h3 className="text-md font-semibold text-gray-900">Add Signature </h3>
-                                <p className="text-xs text-gray-500">Create your digital signature</p>
+
+
+    return (
+        <div className="fixed inset-0 backdrop-blur-sm bg-opacity-50 bg-black/30 flex items-center  justify-center z-50 p-2 md:p-4">
+            <div className="bg-white rounded-md shadow-xl w-full h-full md:max-w-[95vw] lg:max-w-[85vw] xl:max-w-[80vw] md:max-h-[95vh] lg:max-h-[90vh] flex flex-col md:flex-row relative overflow-hidden ">
+
+                {/* Mobile Navigation - Fixed at top on mobile only */}
+                <div className="md:hidden flex-1 flex flex-col min-h-0">
+
+                    {/* Scrollable area (mobile: inputs + nav + content) */}
+                    <div className="flex-1 min-h-0 overflow-y-auto no-scrollbar">
+                        <div className="px-3 lg:px-6 py-2 border-b border-gray-200 flex-shrink-0">
+                            <h3 className="text-sm font-semibold text-gray-900">
+                                {isEditMode ? 'Edit Signature' : 'Add Signature'}
+                            </h3>
+                        </div>
+                        {/* Mobile Inputs */}
+                        <div className="md:hidden w-full bg-white border-b border-gray-200 flex-shrink-0 px-3 py-2">
+                            <div className="grid grid-cols-3 gap-2">
+                                <div className='col-span-2'>
+                                    <label className="block text-xs font-medium text-gray-700 mb-1">
+                                        Full Name
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={fullName}
+                                        onChange={(e) => setFullName(e.target.value)}
+                                        placeholder="Enter full name"
+                                        className="w-full px-2 py-2 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                    />
+                                </div>
+                                <div className='col-span-1'>
+                                    <label className="block text-xs font-medium text-gray-700 mb-1">
+                                        Initials
+                                    </label>
+                                    <input
+                                        type="text"
+                                        value={initials}
+                                        onChange={(e) => setInitials(e.target.value)}
+                                        placeholder="Enter initials"
+                                        className="w-full px-2 py-2 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                    />
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Mobile Navigation - Sticky inside scroll */}
+                        <div className="md:hidden w-full bg-gray-50 border-b border-gray-200 sticky top-0 z-20">
+                            <div className="px-3 py-1.5">
+                                <nav className="flex gap-1">
+                                    {navigationItems.map((item) => (
+                                        <button
+                                            key={item.id}
+                                            onClick={() => setActiveTab(item.id as 'SELECT' | 'DRAW' | 'UPLOAD')}
+                                            className={`flex-1 flex items-center justify-center space-x-1 px-2 py-2 text-xs font-medium rounded-lg transition-all duration-200 whitespace-nowrap ${activeTab === item.id
+                                                ? 'bg-blue-50 text-blue-700 border border-blue-200 shadow-sm'
+                                                : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+                                                }`}
+                                        >
+                                            <span className={activeTab === item.id ? 'text-blue-600' : 'text-gray-400'}>
+                                                {item.icon}
+                                            </span>
+                                            <span className="hidden sm:block">{item.label}</span>
+                                        </button>
+                                    ))}
+                                </nav>
+                            </div>
+                        </div>
+
+                        {/* Main Content */}
+                        <div className="md:hidden p-3 md:p-4 lg:py-5 lg:px-5">
+                            <div className="h-full min-h-[300px] md:min-h-[400px]">
+                                {renderContent()}
                             </div>
                         </div>
                     </div>
 
-                    {/* Form Inputs */}
-                    <div className="px-6 py-2.5 border-b border-gray-200">
-                        <div className="space-y-2">
+                    {/* Checkbox - Fixed */}
+                    <div className="px-3 md:px-4 lg:px-6 py-2 md:py-3 text-gray-700 border-t border-gray-100 flex-shrink-0">
+                        <label className="inline-flex items-center cursor-pointer text-xs md:text-sm hover:text-gray-900 transition-colors">
+                            <input
+                                type="checkbox"
+                                checked={checked}
+                                onChange={toggleCheckbox}
+                                className="sr-only"
+                            />
+                            <div
+                                className={`w-3 h-3 md:w-4 md:h-4 border rounded flex items-center justify-center mr-2 md:mr-3 transition-colors flex-shrink-0 ${checked
+                                    ? 'bg-[var(--modalSubmitBG)] border-[var(--modalSubmitBG)]'
+                                    : 'bg-white border-gray-400 hover:border-gray-500'
+                                    }`}
+                            >
+                                {checked && <FiCheck className="text-white text-xs" />}
+                            </div>
+                            <span>Save as default signature</span>
+                        </label>
+                    </div>
+
+                    {/* Footer Buttons - Fixed */}
+                    <div className="p-3 md:p-4 lg:p-3 border-t border-gray-200 flex sm:flex-row justify-end gap-2 md:gap-3 flex-shrink-0">
+                        <button
+                            className="w-full sm:w-auto px-3 md:px-4 lg:px-6 py-2 md:py-3 text-xs md:text-sm font-medium rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400 disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-200"
+                            onClick={() => setShowAddSignature?.(false)}
+                            disabled={isSubmitting}
+                        >
+                            CANCEL
+                        </button>
+                        <button
+                            className="w-full sm:w-auto px-3 md:px-4 lg:px-6 py-2 md:py-3 text-xs md:text-sm font-medium rounded-md bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white hover:opacity-90 hover:shadow-lg flex items-center justify-center gap-1 md:gap-2 disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-200"
+                            onClick={handleSubmit}
+                            disabled={isSubmitting}
+                        >
+                            {isSubmitting ? (
+                                <>
+                                    <FaSpinner className="animate-spin w-3 h-3 md:w-4 md:h-4" />
+                                    <span>{isEditMode ? 'UPDATING...' : 'CREATING...'}</span>
+                                </>
+                            ) : (
+                                <span>{isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE'}</span>
+                            )}
+                        </button>
+                    </div>
+                </div>
+
+
+                {/* Desktop Sidebar Navigation */}
+                <div className="hidden md:flex md:w-64 lg:w-72 xl:w-80 bg-gray-50 md:border-r border-gray-200 flex-col">
+                    {/* Header - Fixed */}
+                    <div className="px-4 lg:px-6 py-4 border-b border-gray-200 flex-shrink-0">
+                        <h3 className="text-base lg:text-lg font-semibold text-gray-900">
+                            {isEditMode ? 'Edit Signature' : 'Add Signature'}
+                        </h3>
+                        <p className="text-sm text-gray-500">
+                            {isEditMode ? 'Update your digital signature' : 'Create your digital signature'}
+                        </p>
+                    </div>
+
+                    {/* Form Inputs - Fixed */}
+                    <div className="px-4 lg:px-6 py-4 border-b border-gray-200 flex-shrink-0">
+                        <div className="grid grid-cols-1 gap-3">
                             <div>
                                 <label className="block text-sm font-medium text-gray-700 mb-2">
                                     Full Name
@@ -456,10 +612,9 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                                     value={fullName}
                                     onChange={(e) => setFullName(e.target.value)}
                                     placeholder="Enter full name"
-                                    className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                                    className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                 />
                             </div>
-
                             <div>
                                 <label className="block text-sm font-medium text-gray-700 mb-2">
                                     Initials
@@ -469,109 +624,94 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                                     value={initials}
                                     onChange={(e) => setInitials(e.target.value)}
                                     placeholder="Enter initials"
-                                    className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                                    className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                 />
                             </div>
                         </div>
                     </div>
 
-                    {/* Navigation Menu */}
-                    <div className="flex-1 px-6 py-2.5">
-                        <nav className="space-y-2">
+                    {/* Navigation Menu - Fixed */}
+                    <div className="px-4 lg:px-6 py-4 flex-shrink-0">
+                        <nav className="flex flex-col gap-2">
                             {navigationItems.map((item) => (
                                 <button
                                     key={item.id}
-                                    onClick={() => setActiveTab(item.id as 'TYPE' | 'DRAW' | 'UPLOAD')}
-                                    className={`w-full flex items-center space-x-3 px-2 py-2 text-sm font-medium rounded-lg cursor-pointer transition-colors ${activeTab === item.id
-                                        ? 'bg-blue-50 text-blue-700 border border-blue-200'
+                                    onClick={() => setActiveTab(item.id as 'SELECT' | 'DRAW' | 'UPLOAD')}
+                                    className={`w-full flex items-center justify-start space-x-2 px-3 py-3 text-sm font-medium rounded-lg transition-all duration-200 whitespace-nowrap ${activeTab === item.id
+                                        ? 'bg-blue-50 text-blue-700 border border-blue-200 shadow-sm'
                                         : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
                                         }`}
                                 >
                                     <span className={activeTab === item.id ? 'text-blue-600' : 'text-gray-400'}>
                                         {item.icon}
                                     </span>
-
                                     <span>{item.label}</span>
                                 </button>
                             ))}
                         </nav>
                     </div>
 
+                    {/* Spacer for desktop */}
+                    <div className="flex-1"></div>
                 </div>
 
                 {/* Main Content Area */}
-                <div className="flex-1 flex flex-col ">
-                    {/* Header with close button */}
-
-                    {/* Content */}
-                    <div className="flex-1 py-5 px-5 overflow-hidden ">
-                        {/* <button
-                            onClick={() => setShowAddSignature?.(false)}
-                            className="absolute top-2 right-3 p-2 hover:bg-gray-100 rounded-full transition-colors z-20"
-                        >
-                            <AiOutlineClose className="w-5 h-5 text-gray-500" />
-                        </button> */}
-                        {renderContent()}
+                <div className="hidden flex-1 md:flex flex-col min-h-0">
+                    {/* Content - Scrollable */}
+                    <div className="flex-1 min-h-0 p-3 md:p-4 lg:py-5 lg:px-5 overflow-y-auto no-scrollbar">
+                        <div className="h-full min-h-[300px] md:min-h-[400px]">
+                            {renderContent()}
+                        </div>
                     </div>
-                    <div className="text-right px-6 py-1 text-white">
-                        <label className="inline-flex items-center cursor-pointer group">
+
+                    {/* Checkbox - Fixed */}
+                    <div className="px-3 md:px-4 lg:px-6 py-2 md:py-3 text-gray-700 border-t border-gray-100 flex-shrink-0">
+                        <label className="inline-flex items-center cursor-pointer text-xs md:text-sm hover:text-gray-900 transition-colors">
                             <input
                                 type="checkbox"
                                 checked={checked}
                                 onChange={toggleCheckbox}
                                 className="sr-only"
                             />
-
-                            {/* Custom checkbox UI */}
                             <div
-                                className={`w-4 h-4 border rounded transition-all duration-300 flex items-center justify-center
-            ${checked ? 'bg-[var(--modalSubmitBG)] border-[var(--modalSubmitBG)] scale-110' : 'bg-white border-gray-400'}
-          `}
+                                className={`w-3 h-3 md:w-4 md:h-4 border rounded flex items-center justify-center mr-2 md:mr-3 transition-colors flex-shrink-0 ${checked ? 'bg-[var(--modalSubmitBG)] border-[var(--modalSubmitBG)]' : 'bg-white border-gray-400 hover:border-gray-500'
+                                    }`}
                             >
-                                {checked && (
-                                    <FiCheck className="text-white text-sm transform scale-100 transition-transform duration-300" />
-                                )}
+                                {checked && <FiCheck className="text-white text-xs" />}
                             </div>
-
-                            <p className="text-sm text-gray-700 opacity-80 ms-1">
-                                {checked
-                                    ? 'Signature will be used by default.'
-                                    : 'Signature will not be used by default.'}
-                            </p>
+                            <span>Save as default signature</span>
                         </label>
-
-                        {/* Caption text below */}
                     </div>
 
-                    {/* Footer Buttons in Main Area */}
-                    <div className="p-4 border-t border-gray-200 flex justify-end gap-3">
+                    {/* Footer Buttons - Fixed */}
+                    <div className="p-3 md:p-4 lg:p-3 border-t border-gray-200 flex sm:flex-row justify-end gap-2 md:gap-3 flex-shrink-0">
                         <button
-                            className="cursor-pointer px-4 py-2 text-sm font-medium rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+                            className="w-full sm:w-auto px-3 md:px-4 lg:px-6 py-2 md:py-3 text-xs md:text-sm font-medium rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400 disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-200"
                             onClick={() => setShowAddSignature?.(false)}
                             disabled={isSubmitting}
                         >
                             CANCEL
                         </button>
                         <button
-                            className="cursor-pointer px-4 py-2 text-sm font-medium rounded-md bg-[var(--modalSubmitBG)] text-white hover:bg-[var(--modalSubmitBGHover)] transition-colors flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
+                            className="w-full sm:w-auto px-3 md:px-4 lg:px-6 py-2 md:py-3 text-xs md:text-sm font-medium rounded-md bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white hover:opacity-90 hover:shadow-lg flex items-center justify-center gap-1 md:gap-2 disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-200"
                             onClick={handleSubmit}
                             disabled={isSubmitting}
                         >
                             {isSubmitting ? (
                                 <>
-                                    <FaSpinner className="animate-spin" />
-                                    {isEditMode ? 'UPDATING...' : 'CREATING...'}
+                                    <FaSpinner className="animate-spin w-3 h-3 md:w-4 md:h-4" />
+                                    <span>{isEditMode ? 'UPDATING...' : 'CREATING...'}</span>
                                 </>
                             ) : (
-                                isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE'
+                                <span>{isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE'}</span>
                             )}
                         </button>
                     </div>
-
                 </div>
             </div>
         </div>
     );
+
 };
 
 export default AddSignatureModal;

src/components/setting/Signature/DrawSignatureCanvas.tsx

@@ -224,20 +224,20 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
 
     return (
         <div className="h-full flex flex-col">
-            <div className="mb-6">
-                <h2 className="text-xl font-semibold text-gray-900 mb-2">Draw Signature</h2>
-                <p className="text-sm text-gray-600">Create your signature by drawing directly on the canvas</p>
+            <div className="mb-2 lg:mb-6">
+                <h2 className="text-lg sm:text-xl lg:text-2xl font-semibold text-gray-900 mb-1 sm:mb-2 ">Draw Signature</h2>
+                <p className="text-xs sm:text-sm text-gray-600 hidden sm:block">Create your signature by drawing directly on the canvas</p>
             </div>
 
-            <div className="flex-1 flex flex-col">
-                <div className="grid grid-cols-12 gap-6 mb-2">
+            <div className="flex-1 overflow-y-auto">
+                <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-6">
                     {/* Full Signature Canvas */}
-                    <div className="col-span-8">
-                        <label className="block text-sm font-medium text-gray-700 mb-2">Full Signature</label>
+                    <div className="lg:col-span-8">
+                        <label className="block text-xs sm:text-sm font-medium text-gray-700 mb-2">Full Signature</label>
                         <div className="border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors">
                             <canvas
                                 ref={canvasRef1}
-                                className="w-full h-48 cursor-crosshair"
+                                className="w-full h-51 cursor-crosshair"
                                 onMouseDown={handleMouseDown}
                                 onMouseMove={handleMouseMove}
                                 onMouseUp={handleMouseUp}
@@ -247,12 +247,12 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
                     </div>
 
                     {/* Initials Canvas */}
-                    <div className="col-span-4">
+                    <div className="lg:col-span-4">
                         <label className="block text-sm font-medium text-gray-700 mb-2">Initials</label>
                         <div className="border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors">
                             <canvas
                                 ref={canvasRef2}
-                                className="w-full h-48 cursor-crosshair"
+                                className="w-full h-51 cursor-crosshair"
                                 onMouseDown={handleMouseDown}
                                 onMouseMove={handleMouseMove}
                                 onMouseUp={handleMouseUp}
@@ -263,7 +263,7 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
                 </div>
 
                 {/* Controls */}
-                <div className="flex gap-4">
+                <div className="flex gap-4 mt-3">
                     <button
                         className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
                         onClick={clearCanvas}

src/components/setting/Signature/Signature.tsx

@@ -19,8 +19,8 @@ interface Signature {
     signatureBlob: string;
     signatureStampedBlob: string;
     default: boolean;
-    signatureMimeType:string;
-    initialsMimeType:string
+    signatureMimeType: string;
+    initialsMimeType: string
 }
 
 const SignatureManager: React.FC = () => {
@@ -30,11 +30,19 @@ const SignatureManager: React.FC = () => {
     const [showAddSignature, setShowAddSignature] = useState<boolean>(false);
     const [editingSignature, setEditingSignature] = useState<Signature | null>(null);
 
+    const signatureOptions = [
+        { id: 1, name: 'print', initials: 'LA', style: 'print' },
+        { id: 2, name: 'cursive', initials: 'LA', style: 'cursive' },
+        { id: 3, name: 'script', initials: 'LA', style: 'script' },
+        { id: 4, name: 'elegant', initials: 'LA', style: 'elegant' },
+        { id: 5, name: 'modern', initials: 'LA', style: 'modern' },
+        { id: 6, name: 'classic', initials: 'LA', style: 'classic' },
+    ];
+
     const getAllSignatures = async () => {
         setLoading(true)
         try {
             let res = await api.get("/api/user/signatures")
-            console.log("getAllSignatures", res.data)
             let signatureData = res?.data
             setSignatures(signatureData)
         } catch (error) {
@@ -49,10 +57,8 @@ const SignatureManager: React.FC = () => {
     }, [])
 
     const handleEdit = (id: string) => {
-        console.log('Edit signature:', id);
         let editSignature = signatures.find((item) => item.id === id);
-        console.log("editSignature", editSignature);
-        
+
         if (editSignature) {
             setEditingSignature(editSignature);
             setShowAddSignature(true);
@@ -65,7 +71,7 @@ const SignatureManager: React.FC = () => {
         setLoading(true)
         try {
             let res = await api.delete(`/api/user/signatures/${id}`)
-            console.log(res.data)
+            
             toast.success("Signature Delete Successfull", {
                 position: "top-center",
                 autoClose: 500,
@@ -100,6 +106,32 @@ const SignatureManager: React.FC = () => {
         setEditingSignature(null);
     };
 
+
+    const renderSignatureText = (type, font, firstName, lastName, mode = 'name') => {
+        if (type !== 'SELECT') return null;
+
+        const selectedFont = signatureOptions.find(opt => opt.style === font);
+        const fontClass = `${selectedFont?.style || 'print'}`;
+
+        if (mode === 'initials') {
+            const initials = `${(firstName?.[0] ?? '')}${(lastName?.[0] ?? '')}`.toUpperCase();
+            return (
+                <div className={`text-center text-[24px]`} style={{fontFamily:selectedFont?.style}}>
+                    {initials}
+                </div>
+            );
+        }
+
+        const fullName = `${firstName ?? ''} ${lastName ?? ''}`.trim();
+        return (
+            <div className={`text-center text-[20px]`}style={{fontFamily:selectedFont?.style}}>
+                <div>{fullName}</div>
+            </div>
+        );
+    };
+
+
+
     return (
         <>
             {loading ? <div className=' flex items-center justify-center'>
@@ -111,128 +143,142 @@ const SignatureManager: React.FC = () => {
                 </div>
             </div> :
                 <div className="min-h-screen bg-white p-3 rounded-md px-4 mb-6">
-                    <div className="max-w-[84vw] mx-auto">
+                    <div className="max-w-[84vw] mx-auto ">
                         <>
                             {/* Header */}
-                            <div className="flex items-center justify-between mb-8">
+                            <div className="flex items-center justify-between mb-3">
                                 <div>
                                     <h1 className="text-[17px] font-medium text-gray-500 mb-2">Signatures</h1>
                                     <p className="text-gray-300 text-sm">Add or update your name and signature styles.</p>
                                 </div>
-                                <button className="bg-[var(--modalSubmitBG)] hover:bg-[var(--modalSubmitBGHover)] text-white px-4 py-2 rounded-lg font-semibold text-sm text-[14px] flex items-center cursor-pointer transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" onClick={handleAddNew}>
+                                <button className="bg-gradient-to-br from-[var(--primary)] to-blue-600 hover:bg-[var(--modalSubmitBGHover)] text-white px-3 gap-1 py-1.5 rounded-lg font-semibold text-sm text-[14px] flex items-center cursor-pointer transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" onClick={handleAddNew}>
                                     <FiPlus className="" />
                                     ADD
                                 </button>
                             </div>
 
                             {/* Table Card */}
-                            <div className="bg-white rounded-md shadow-md overflow-hidden border border-gray-100">
-                                {/* Table Header */}
-                                <div className="bg-gray-50 border-b border-gray-200">
-                                    <div className="grid grid-cols-12 gap-4 px-6 py-4">
-                                        <div className="col-span-5">
-                                            <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Signature</h3>
-                                        </div>
-                                        <div className="col-span-5">
-                                            <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Initial</h3>
-                                        </div>
-                                        <div className="col-span-2">
-                                            <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider text-right">Actions</h3>
+
+                            <div className="overflow-x-auto">
+                                <div className="bg-white rounded-md min-w-[800px] md:min-w-full overflow-hidden border border-gray-100">
+                                    {/* Table Header */}
+                                    <div className="bg-gray-50 border-b border-gray-200 ">
+                                        <div className="grid grid-cols-12 gap-4 px-6 py-4">
+                                            <div className="col-span-5">
+                                                <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Signature</h3>
+                                            </div>
+                                            <div className="col-span-5">
+                                                <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Initial</h3>
+                                            </div>
+                                            <div className="col-span-2">
+                                                <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider text-right">Actions</h3>
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
 
-                                {/* Table Body */}
-                                <div className="divide-y divide-gray-100">
-                                    {signatures.map((signature, index) => (
-                                        <div key={signature.id} className="grid grid-cols-12 gap-4 px-6 py-9 hover:bg-gray-50 transition-colors duration-150">
-                                            {/* Signature Column */}
-                                            <div className="col-span-5">
-                                                <div className="flex flex-col space-y-2 relative ps-6 border-l-3 border-blue-600 rounded-bl-2xl rounded-tl-2xl">
-                                                    {/* Label */}
-                                                    <div className="text-sm text-gray-600 font-medium mb-1">
-                                                        Signed by:
-                                                    </div>
-
-                                                    {/* Signature Image */}
-                                                    <div className="bg-white rounded-lg p-1 flex items-center justify-center ">
-                                                        <img
-                                                            src={`data:${signature.signatureMimeType};base64,${signature.signatureBlob}`}
-                                                            className="h-[50px] w-[250px] object-contain"
-                                                            alt="Signature"
-                                                        />
-                                                    </div>
-
-                                                    {/* Signature ID */}
-                                                    <div className="text-xs text-gray-500 truncate">
-                                                        {signature.signatureHash}
-                                                    </div>
-                                                </div>
-                                            </div>
-
-                                            {/* Initial Column */}
-                                            <div className="col-span-5">
-                                                <div className="flex flex-col space-y-2 relative ps-6 border-l-3 border-green-600 rounded-bl-2xl rounded-tl-2xl">
-                                                    {/* Label */}
-                                                    <div className="text-sm text-gray-600 font-medium mb-1">
-                                                    Initials
-                                                    </div>
-
-                                                    {/* Signature Image */}
-                                                    <div className="bg-white rounded-lg p-1 flex items-center justify-center ">
-                                                        <img
-                                                            src={`data:${signature.initialsMimeType};base64,${signature.initialsBlob}`}
-                                                            className="h-[50px] object-contain"
-                                                            alt="DS Signature"
-                                                        />
-                                                    </div>
-                                                    {/* Initial ID */}
-                                                    <div className="text-xs text-gray-500 truncate">
-                                                        {signature.initialsHash}
-                                                    </div>
-                                                </div>
-                                            </div>
-
-                                            {/* Actions Column */}
-                                            <div className="col-span-2 flex justify-between items-start pt-9 ps-8 ">
-                                                <div className="relative ">
-                                                    <button
-                                                        onClick={() => toggleDropdown(signature.id)}
-                                                        className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-1.5 py-1.5 text-[13px] rounded-lg font-semibold flex items-center  transition-all duration-200 border border-gray-300 "
-                                                    >
-                                                        ACTIONS
-                                                        <FiMoreVertical />
-                                                    </button>
-
-                                                    {/* Dropdown Menu */}
-                                                    {activeDropdown === signature.id && (
-                                                        <div className="absolute right-0 mt-0.5  w-28 bg-white rounded-lg shadow-xl border border-gray-200 z-10 py-1">
-                                                            <button
-                                                                onClick={() => handleEdit(signature.id)}
-                                                                className="w-full px-4 py-1 text-left text-gray-500  hover:bg-blue-50 hover:text-blue-700 flex items-center gap-3 text-sm  transition-colors duration-150"
-                                                            >
-                                                                <FiEdit3 />
-                                                                Edit
-                                                            </button>
-                                                            <button
-                                                                onClick={() => handleDelete(signature.id)}
-                                                                className="w-full px-4 py-1 text-left text-gray-500 hover:bg-red-50 hover:text-red-700 flex items-center gap-3  text-sm transition-colors duration-150"
-                                                            >
-                                                                <FiTrash2 />
-                                                                Delete
-                                                            </button>
+                                    {/* Table Body */}
+                                    <div className="divide-y divide-gray-100">
+                                        {signatures.map((signature, index) => (
+                                            <div key={signature.id} className="grid grid-cols-12 gap-4 px-6 py-9 hover:bg-gray-50 transition-colors duration-150">
+                                                {/* Signature Column */}
+                                                <div className="col-span-5">
+                                                    <div className="flex flex-col space-y-2 relative ps-6 border-l-3 border-blue-600 rounded-bl-2xl rounded-tl-2xl">
+                                                        {/* Label */}
+                                                        <div className="text-sm text-gray-600 font-medium mb-1">
+                                                            Signed by:
                                                         </div>
-                                                    )}
+
+                                                        {/* Signature Image or Name/Initials */}
+                                                        <div className="bg-white rounded-lg p-1 flex items-center justify-center">
+                                                            {signature?.signatureType !== 'SELECT' ? (
+                                                                <img
+                                                                    src={`data:${signature?.signatureMimeType};base64,${signature?.signatureBlob}`}
+                                                                    className="h-[50px] w-[250px] object-contain"
+                                                                    alt="Signature"
+                                                                />
+                                                            ) : (
+                                                                renderSignatureText(signature?.signatureType, signature?.font, signature?.firstName, signature?.lastName, 'name')
+                                                            )}
+                                                        </div>
+
+                                                        {/* Signature ID */}
+                                                        <div className="text-xs text-gray-500 truncate">
+                                                            {signature.signatureHash}
+                                                        </div>
+                                                    </div>
+
+                                                </div>
+
+                                                {/* Initial Column */}
+                                                <div className="col-span-5">
+                                                    <div className="flex flex-col space-y-2 relative ps-6 border-l-3 border-green-600 rounded-bl-2xl rounded-tl-2xl">
+                                                        {/* Label */}
+                                                        <div className="text-sm text-gray-600 font-medium mb-1">
+                                                            Initials
+                                                        </div>
+
+                                                        {/* Signature Initials: Image or Generated Text */}
+                                                        <div className="bg-white rounded-lg p-1 flex items-center justify-center">
+                                                            {signature?.signatureType !== 'SELECT' ? (
+                                                                <img
+                                                                    src={`data:${signature.initialsMimeType};base64,${signature.initialsBlob}`}
+                                                                    className="h-[50px] object-contain"
+                                                                    alt="Initials"
+                                                                />
+                                                            ) : (
+                                                                renderSignatureText(signature?.signatureType, signature?.font, signature?.firstName, signature?.lastName, 'initials')
+                                                            )}
+                                                        </div>
+
+                                                        {/* Initial ID */}
+                                                        <div className="text-xs text-gray-500 truncate">
+                                                            {signature.initialsHash}
+                                                        </div>
+                                                    </div>
+                                                </div>
+
+
+                                                {/* Actions Column */}
+                                                <div className="col-span-2 flex justify-between items-start pt-9 ps-8 ">
+                                                    <div className="relative ">
+                                                        <button
+                                                            onClick={() => toggleDropdown(signature.id)}
+                                                            className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-1.5 py-1.5 text-[13px] rounded-lg font-semibold flex items-center  transition-all duration-200 border border-gray-300 "
+                                                        >
+                                                            ACTIONS
+                                                            <FiMoreVertical />
+                                                        </button>
+
+                                                        {/* Dropdown Menu */}
+                                                        {activeDropdown === signature.id && (
+                                                            <div className={`absolute right-0 mt-0.5 -top-5  w-28 bg-white rounded-lg border border-gray-200 z-10 py-1`}>
+                                                                <button
+                                                                    onClick={() => handleEdit(signature.id)}
+                                                                    className="w-full px-4 py-1 text-left text-gray-500  hover:bg-blue-50 hover:text-blue-700 flex items-center gap-3 text-sm  transition-colors duration-150"
+                                                                >
+                                                                    <FiEdit3 />
+                                                                    Edit
+                                                                </button>
+                                                                <button
+                                                                    onClick={() => handleDelete(signature.id)}
+                                                                    className="w-full px-4 py-1 text-left text-gray-500 hover:bg-red-50 hover:text-red-700 flex items-center gap-3  text-sm transition-colors duration-150"
+                                                                >
+                                                                    <FiTrash2 />
+                                                                    Delete
+                                                                </button>
+                                                            </div>
+                                                        )}
+                                                    </div>
                                                 </div>
                                             </div>
-                                        </div>
-                                    ))}
+                                        ))}
+                                    </div>
                                 </div>
                             </div>
 
                             {/* Empty State (if no signatures) */}
                             {signatures.length === 0 && (
-                                <div className=" rounded-xl shadow-lg p-12 text-center mt-8">
+                                <div className=" rounded-xl p-12 text-center mt-8">
                                     <div className="text-gray-400 mb-4">
                                         <FiEdit3 className="w-16 h-16 mx-auto" />
                                     </div>
@@ -252,8 +298,8 @@ const SignatureManager: React.FC = () => {
                     )}
 
                     {showAddSignature && (
-                        <AddSignatureModal 
-                            setShowAddSignature={handleModalClose} 
+                        <AddSignatureModal
+                            setShowAddSignature={handleModalClose}
                             getAllSignatures={getAllSignatures}
                             editingSignature={editingSignature}
                         />

src/components/setting/UserProfile.tsx

@@ -1,62 +1,57 @@
-import { FiX, FiEdit2 } from 'react-icons/fi';
+import { FiX, FiEdit2 } from "react-icons/fi";
+
 interface Account {
-    id: number;
-    isDefault: boolean;
-    name: string;
+  id: number;
+  isDefault: boolean;
+  name: string;
 }
 
 interface UserData {
-    id: number;
-    name:string
-    email: string;
-    language: string;
-    account: Account;
+  id: number;
+  name: string;
+  email: string;
+  language: string;
+  account: Account;
 }
 
 interface UserProfileProps {
-    userData: UserData;
+  userData: UserData;
 }
+
 const UserProfile: React.FC<UserProfileProps> = ({ userData }) => {
-    const getInitials = (firstName: string, lastName: string) => {
-        return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
-    };
-    return (
-        <div className="bg-white rounded-md shadow-sm flex w-full p-6">
-            {/* Profile Picture */}
-            <div className="flex-shrink-0 text-center">
-                <div className="w-20 h-20 bg-green-800 text-white font-bold text-2xl rounded-full flex items-center justify-center shadow-lg">
-                    {userData.name.slice(0,2).toUpperCase()}
-                </div>
-            </div>
+  return (
+    <div className="bg-white rounded-md shadow-sm flex flex-col sm:flex-row items-center sm:items-start w-full p-6 gap-6">
+      {/* Profile Picture */}
+      <div className="flex-shrink-0 text-center">
+        <div className="w-20 h-20 bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white font-bold text-2xl rounded-full flex items-center justify-center shadow-lg">
+          {userData.name.slice(0, 2).toUpperCase()}
+        </div>
+      </div>
 
-            {/* Info Fields */}
-            <div className="flex flex-col justify-center flex-1 ms-10">
-                {/* Row: Name */}
-                <div className="flex py-1">
-                    <div className="text-gray-500 font-medium text-[13px] w-32">Name</div>
-                    <div className="text-gray-400 font-medium text-[13px]">
-                        {userData.name}
-                    </div>
-                </div>
-
-                {/* Row: Email */}
-                <div className="flex py-1">
-                    <div className="text-gray-500 font-medium text-[13px] w-32">Email</div>
-                    <div className="text-gray-400 font-medium text-[13px]">{userData.email}</div>
-                </div>
-
-                {/* Row: Account Name */}
-                <div className="flex py-1">
-                    <div className="text-gray-500 font-medium text-[13px] w-32">Account name</div>
-                    <div className="text-gray-400 font-medium text-[13px]">
-                        {userData.account.name}
-                    </div>
-                </div>
-            </div>
+      {/* Info Fields */}
+      <div className="flex flex-col justify-center flex-1 w-full">
+        {/* Row: Name */}
+        <div className="flex flex-col sm:flex-row py-1">
+          <div className="text-gray-500 font-medium text-[13px] sm:w-32">Name</div>
+          <div className="text-gray-400 font-medium text-[13px]">{userData.name}</div>
         </div>
 
+        {/* Row: Email */}
+        <div className="flex flex-col sm:flex-row py-1">
+          <div className="text-gray-500 font-medium text-[13px] sm:w-32">Email</div>
+          <div className="text-gray-400 font-medium text-[13px]">{userData.email}</div>
+        </div>
 
-    );
+        {/* Row: Account Name */}
+        <div className="flex flex-col sm:flex-row py-1">
+          <div className="text-gray-500 font-medium text-[13px] sm:w-32">Account name</div>
+          <div className="text-gray-400 font-medium text-[13px]">
+            {userData.account.name}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };
 
-export default UserProfile
+export default UserProfile;

src/components/signature/SignCon.tsx

@@ -26,7 +26,7 @@ import { FaSpinner } from "react-icons/fa";
 import { GrCheckboxSelected } from "react-icons/gr";
 import { Bounce, toast } from "react-toastify";
 import axios from 'axios';
-import { SaveType } from '../client/SignDocument';
+import { SaveType, SaveTypeEnum } from '../client/SignDocument';
 import { CiSaveDown1 } from 'react-icons/ci';
 import api from '../../config/api';
 
@@ -55,7 +55,7 @@ interface AddSignatureModalProps {
     setOpenSign: React.Dispatch<React.SetStateAction<boolean>>;
     saved: SaveType;
     setSaved: React.Dispatch<React.SetStateAction<SaveType>>;
-    signTagId: boolean
+    signTagId: number
 }
 
 interface Account {
@@ -87,7 +87,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
     signTagId
 }) => {
 
-    console.log("savedModal", recipient)
     const [activeTab, setActiveTab] = useState<'TYPED' | 'DRAW' | 'UPLOAD' | 'SAVED'>('TYPED');
     const [fullName, setFullName] = useState('');
     const [initials, setInitials] = useState('');
@@ -120,8 +119,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
         },
     });
 
-    console.log("User data", user)
-
     const [selectedSignature, setSelectedSignature] = useState<SelectStyle>(
         signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" }
     );
@@ -160,6 +157,20 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
             })
             if (res?.data) {
                 let preSavedSignatures = res?.data
+                if (res.data.length) {
+                    const defaultVal = res.data.filter((obj, indx) => "default" in obj && obj.default);
+                    const { initialsBlob, signatureBlob } = defaultVal[0];
+
+                    if (initialsBlob && signatureBlob) {
+                        setSaved({
+                            signatureId: res.data.id,
+                            saveType: SaveTypeEnum.DRAW,
+                            save: true,
+                            signature: signatureBlob,
+                            initial: initialsBlob,
+                        });
+                    }
+                }
                 setPreSaveSignatures(preSavedSignatures)
             }
         })()
@@ -208,7 +219,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
 
     const handleSubmit = async () => {
         setIsSubmitting(true);
-        console.log("handleSubmit Called")
         if (!signatures.fullSignature || !signatures.initials) {
             alert('Please provide both signature and initials');
             setIsSubmitting(false);
@@ -228,7 +238,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                 font: selectedSignature.style
             };
 
-            console.log("payload", payload)
             // if (isEditMode && editingSignature) {
             //     // Update existing signature
             //     const updatePayload = {
@@ -258,7 +267,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                         "ngrok-skip-browser-warning": "69420"
                     }
                 });
-            console.log("handleSubmit", res);
 
             toast.success("Signature Created Successfully", {
                 position: "top-center",
@@ -279,6 +287,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                     initials: "",
                 })
                 setSaved({
+                    signatureId: res.data.id ?? null,
                     saveType: res.data.signatureType ?? null,
                     save: true,
                     signature: res.data.signatureBlob ?? null,
@@ -516,7 +525,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
             // let currUser = res?.data;
             setUser(recipient);
             setFullName(recipient.firstName + " " + recipient.lastName);
-            setInitials(recipient.firstName.slice(0, 1) + recipient.lastName.slice(0, 1));
+            setInitials((recipient.firstName.slice(0, 1) + recipient.lastName.slice(0, 1)).toUpperCase());
         } catch (error) {
             console.error("Error fetching user details:", error);
         }
@@ -527,7 +536,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
     }, []);
 
     return (
-        <div className="fixed inset-0 backdrop-blur-sm bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div className="fixed inset-0 backdrop-blur-sm bg-opacity-50 bg-black/30 flex items-center justify-center z-50 p-4">
             <div className="bg-white rounded-md shadow-xl w-full max-w-[80vw] h-[80vh] flex relative">
 
                 {/* Sidebar Navigation */}
@@ -633,7 +642,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                                 </>
                             ) : (
                                 <>
-                                    CREATE SIGNATURE
+                                    {activeTab === "SAVED" ? "CHANGE SIGNATURE" : "CREATE SIGNATURE"}
                                     {/* isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE' */}
                                 </>
                             )}

src/components/signature_pad/InitialCon.tsx

@@ -13,7 +13,6 @@ interface InitialConProps {
 const InitialCon: React.FC<InitialConProps> = ({ openInitial, setOpenInitial, savedInitial, setSavedInitial }) => {
 
     const handleSaveInitial = (signatureDataUrl: string) => {
-        console.log(signatureDataUrl, "savedInitial ------ 123");
         setSavedInitial(signatureDataUrl);
         setOpenInitial(false)
 

src/components/signature_pad/SignatureCon.tsx

@@ -14,7 +14,6 @@ interface SignatureConProps {
 const SignatureCon: React.FC<SignatureConProps> = ({ recipientId, openSign, setOpenSign, savedSignature, setSavedSignature }) => {
 
     const handleSaveSignature = (signatureDataUrl: string) => {
-        console.log('Signature saved:', signatureDataUrl);
         axios.post(`${import.meta.env.VITE_BASE_URI}/api/sign/signature?recipientId=${recipientId}`,
             {
                 signature: signatureDataUrl,
@@ -23,9 +22,7 @@ const SignatureCon: React.FC<SignatureConProps> = ({ recipientId, openSign, setO
             },
             { headers: { "ngrok-skip-browser-warning": "69420", } })
             .then((res) => {
-                console.log(res, "Signature saved response")
                 if (res.status === 200 || res.status === 201) {
-                    console.log('Signature saved successfully');
                     setSavedSignature(signatureDataUrl);
                     setOpenSign(false)
                 }

src/components/stamp/StampUpload.tsx

@@ -9,9 +9,6 @@ interface StampUploadType {
 
 const StampUpload: React.FC<StampUploadType> = ({ stamp, setStamp }) => {
 
-    console.log(stamp, "stamp upload component");
-
-
     // const [preview, setStamp] = useState<string | null>(null);
     const fileInputRef = useRef<HTMLInputElement | null>(null);
 
@@ -23,7 +20,6 @@ const StampUpload: React.FC<StampUploadType> = ({ stamp, setStamp }) => {
 
             reader.onload = () => {
                 if (typeof reader.result === 'string') {
-                    console.log(reader.result, "reader result");
                     setStamp((prev) => {
                         return (
                             {

src/components/templates/TemplateTable.tsx

@@ -0,0 +1,258 @@
+import React, { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux';
+import { useLocation, useNavigate } from 'react-router-dom';
+import logoRecord from '../../assets/record.svg';
+import LoaderUi from '../../helper/LoaderUi';
+import api from '../../config/api';
+import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
+
+const TemplateTable = () => {
+    const loaction = useLocation()
+
+    const [loading, setLoading] = useState(false)
+    const [templates, setTemplates] = useState([])
+    const accountDetails = useSelector((state: any) => state.user.account);
+    const accountId = accountDetails.id || "";
+    const [showMenu, setShowMenu] = useState(null);
+
+    const [activeAccountId, setActiveAccountId] = useState<string | null>(
+        JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
+    );
+
+    const navigate = useNavigate();
+
+    const getAllTemplates = async () => {
+        setLoading(true)
+        try {
+            let res = await api.get(`/api/accounts/${activeAccountId}/templates?sortBy=lastModifiedAt desc`)
+            let templateData = res?.data
+            setTemplates(templateData)
+        } catch (error) {
+            console.log(error)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    useEffect(() => {
+        if (activeAccountId) {
+            getAllTemplates()
+        }
+    }, [activeAccountId])
+
+
+    // Listen for sessionStorage changes
+    useEffect(() => {
+        const handleStorageChange = (e: StorageEvent) => {
+            if (e.key === 'activeAccountId') {
+                const newActiveAccountId = e.newValue ? JSON.parse(e.newValue) : null;
+                setActiveAccountId(newActiveAccountId);
+            }
+        };
+
+        // Listen for storage events (works for changes from other tabs)
+        window.addEventListener('storage', handleStorageChange);
+
+        // Custom event listener for same-tab changes
+        const handleCustomStorageChange = (e: CustomEvent) => {
+            if (e.detail.key === 'activeAccountId') {
+                setActiveAccountId(e.detail.newValue);
+            }
+        };
+
+        window.addEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
+
+        return () => {
+            window.removeEventListener('storage', handleStorageChange);
+            window.removeEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
+        };
+    }, []);
+
+
+    const formatDate = (timestamp: number) => {
+        return new Date(timestamp * 1000).toLocaleString();
+    };
+
+    const handleUseClick = async (item: any) => {
+        try {
+            const payload = {
+                name: item?.name ?? "",
+                subject: item.subject,
+                message: item.message,
+                description: item.description,
+                expireAfter: item.expireAfter,
+                enableIdStamping: item.enableIdStamping,
+                allowViewAudit: item.allowViewAudit,
+                allowReassign: item.allowReassign,
+                enableSignatureIdStamping: item.enableSignatureIdStamping,
+                templateId: item.id,
+            };
+            let res = await api.post(`/api/accounts/${activeAccountId}/transactions`, payload)
+            
+            // /process-step-one/:accountId/:transactionId
+            navigate(`/process-step-one/${activeAccountId}/${res?.data?.id}?useTemplate=true`);
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
+    const handleEditClick = (templateId: string) => {
+        setShowMenu(null);
+        navigate(`/process-step-one/${accountId}/template/${templateId}`);
+    }
+
+    function formatTimestamp(isoString, options = { timeZone: 'local' }) {
+        // Parse the ISO string to a Date object
+        const date = new Date(isoString);
+
+        if (isNaN(date)) {
+            return 'Invalid date';
+        }
+
+        // Return formatted date string
+        if (options.timeZone === 'UTC') {
+            return date.toUTCString(); // e.g. "Mon, 04 Aug 2025 13:46:46 GMT"
+        } else {
+            return date.toLocaleString(); // e.g. "8/4/2025, 9:46:46 AM" (based on local time zone)
+        }
+    }
+    return (
+        <>
+            <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
+                {/* Header */}
+                {location.pathname !== '/templates' &&
+                    <div className="flex justify-between items-center px-6 py-4 border-b border-gray-100">
+                        <h2 className="text-sm font-semibold text-gray-800">Recent Template</h2>
+                        <span className=' text-[var(--primary)] text-xs hover:underline cursor-pointer font-semibold'>View all</span>
+                    </div>}
+
+                {/* Scrollable Table Container */}
+                <div className={`overflow-auto no-scrollbar ${location.pathname === '/templates' ? "min-h-[76vh] max-h-[76vh]" : "min-h-[70vh] max-h-[70vh]"}`}>
+                    <table className="w-full text-sm">
+                        {/* Sticky Header */}
+                        <thead className="bg-gray-50 sticky top-0 z-10">
+                            <tr className="text-gray-600 text-xs uppercase tracking-wider border-b border-gray-200">
+                                <th className="px-6 py-4 text-left font-semibold">Name</th>
+                                {location.pathname === '/templates' && (
+                                    <>
+                                        <th className="px-6 py-4 text-center font-semibold">Created</th>
+                                        <th className="px-6 py-4 text-center font-semibold">Last Updated</th>
+                                    </>
+                                )}
+                                <th className="px-6 py-4 text-center font-semibold">Use</th>
+                                <th className="px-6 py-4 text-center font-semibold">Action</th>
+                            </tr>
+                        </thead>
+                        {loading ? (
+                            <tbody>
+                                <tr>
+                                    <td colSpan="6" className="relative h-100">
+                                        <LoaderUi />
+                                    </td>
+                                </tr>
+                            </tbody>
+                        ) : templates.length > 0 ? (
+                            <>
+                                {/* Scrollable Body */}
+                                <tbody className="bg-white divide-y divide-gray-100">
+                                    {templates.map((item, index) => (
+                                        <tr
+                                            key={index}
+                                            className="hover:bg-gray-50 transition-colors duration-150"
+                                        >
+                                            <td className="px-6 py-4 text-left">
+                                                <div className="text-gray-800 font-medium truncate max-w-xs">
+                                                    {item.name || 'Untitled'}
+                                                </div>
+                                            </td>
+
+                                            {location.pathname === '/templates' && (
+                                                <>
+                                                    <td className="px-6 py-4 text-center">
+                                                        <span className="text-gray-600 whitespace-nowrap">
+                                                            {formatTimestamp(item.createdAt)}
+                                                        </span>
+                                                    </td>
+                                                    <td className="px-6 py-4 text-center">
+                                                        <span className="text-gray-600 whitespace-nowrap">
+                                                            {formatTimestamp(item.lastModifiedAt)}
+                                                        </span>
+                                                    </td>
+                                                </>
+                                            )}
+
+                                            <td className="px-6 py-4 text-center">
+                                                <button
+                                                    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-xs transition-colors duration-150"
+                                                    onClick={() => handleUseClick(item)}
+                                                >
+                                                    Use
+                                                </button>
+                                            </td>
+
+                                            <td className="px-6 py-4 text-center">
+                                                <div
+                                                    className="relative inline-block"
+                                                    tabIndex={0}
+                                                    onBlur={(e) => {
+                                                        if (!e.currentTarget.contains(e.relatedTarget)) {
+                                                            setShowMenu(null);
+                                                        }
+                                                    }}
+                                                >
+                                                    <button
+                                                        className="text-gray-400 hover:text-gray-600 transition-colors duration-150 p-1 rounded-md hover:bg-gray-100"
+                                                        onClick={() =>
+                                                            setShowMenu(showMenu === index ? null : index)
+                                                        }
+                                                    >
+                                                        <PiDotsThreeOutlineVerticalFill className="text-lg" />
+                                                    </button>
+
+                                                    {showMenu === index && (
+                                                        <div className="absolute -top-9 right-4 bg-white border border-gray-200 rounded-lg shadow-lg z-20 min-w-[100px]">
+                                                            <button
+                                                                onMouseDown={() => handleEditClick(item.id)}
+                                                                className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600"
+                                                            >
+                                                                Edit
+                                                            </button>
+                                                            <button
+                                                                onMouseDown={() => {
+                                                                    setShowMenu(null);
+                                                                }}
+                                                                className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-red-600"
+                                                            >
+                                                                Delete
+                                                            </button>
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </>
+                        ) : (
+                            <tbody>
+                                <tr>
+                                    <td colSpan="6" className="text-center py-10 text-gray-500">
+                                        <div className="flex flex-col items-center justify-center">
+                                            <img
+                                                src={logoRecord}
+                                                alt="Record Not Found"
+                                                className="w-70 h-70 mb-4 opacity-70"
+                                            />
+                                        </div>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        )}
+                    </table>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default TemplateTable

src/components/templates/Templates.tsx

@@ -8,6 +8,8 @@ import { useSelector } from "react-redux";
 import { FaSpinner } from "react-icons/fa";
 import LoaderUi from "../../helper/LoaderUi";
 
+import TemplateTable from "./TemplateTable";
+
 
 
 const Templates = () => {
@@ -26,8 +28,9 @@ const Templates = () => {
 
   const filters = ["All", "My Templates", "Shared"];
 
+  
+
   const handleAddTemplate = async () => {
-    console.log("handleAddTemplate called");
     try {
       const res = await api.post(`/api/accounts/${activeAccountId}/templates`);
       navigate(`/process-step-one/${activeAccountId}/template/${res.data.id}`)
@@ -37,70 +40,23 @@ const Templates = () => {
 
   }
 
-  const getAllTemplates = async () => {
-    setLoading(true)
-    try {
-      let res = await api.get(`/api/accounts/${activeAccountId}/templates?sortBy=lastModifiedAt desc`)
-      let templateData = res?.data
-      setTemplates(templateData)
-    } catch (error) {
-      console.log(error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  useEffect(() => {
-    if (activeAccountId) {
-      getAllTemplates()
-    }
-  }, [activeAccountId])
 
 
-  const formatDate = (timestamp: number) => {
-    return new Date(timestamp * 1000).toLocaleString();
-  };
 
-  const handleUseClick = async (item: any) => {
-    try {
-      const payload = {
-        name: item?.name ?? "",
-        subject: item.subject,
-        message: item.message,
-        description: item.description,
-        expireAfter: item.expireAfter,
-        enableIdStamping: item.enableIdStamping,
-        allowViewAudit: item.allowViewAudit,
-        allowReassign: item.allowReassign,
-        enableSignatureIdStamping: item.enableSignatureIdStamping,
-        templateId: item.id,
-      };
-      let res = await api.post(`/api/accounts/${activeAccountId}/transactions`, payload)
-      console.log("handleUseClick", res.data)
-      // /process-step-one/:accountId/:transactionId
-      navigate(`/process-step-one/${activeAccountId}/${res?.data?.id}`);
-    } catch (error) {
-      console.log(error)
-    }
-  }
 
-  const handleEditClick = (templateId: string) => {
-      setShowMenu(null);
-      navigate(`/process-step-one/${accountId}/template/${templateId}`);
-  }
 
   return (
     <div className="p-3 text-sm">
       {/* Header */}
-      <div className="flex items-center justify-between mb-3">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3">
         {/* Filter as pill buttons */}
-        <div className="flex gap-2">
+        <div className="flex flex-wrap gap-2">
           {filters.map((filter) => (
             <button
               key={filter}
               onClick={() => setActiveFilter(filter)}
-              className={`px-3 py-1 rounded-full text-xs border transition 
-                ${activeFilter === filter
+              className={`px-3 py-1 rounded-full text-xs border transition
+          ${activeFilter === filter
                   ? "bg-[var(--primary)] text-white"
                   : "border-gray-300 text-gray-600 hover:bg-gray-100"
                 }`}
@@ -110,115 +66,22 @@ const Templates = () => {
           ))}
         </div>
 
+        {/* Add Template Button */}
         <div
           onClick={handleAddTemplate}
-          className="flex items-center gap-2 bg-[var(--primary)] px-3 py-1.5 rounded-sm cursor-pointer hover:opacity-90">
-          <IoMdAdd className="text-white" />
-          <button
-            className="text-white rounded text-sm hover:opacity-90">
+          className="flex items-center justify-center gap-1 bg-gradient-to-br from-[var(--primary)] to-blue-600 px-3 py-2 rounded-sm cursor-pointer hover:opacity-90"
+        >
+          <IoMdAdd className="text-white text-lg" />
+          <button className="text-white text-sm font-medium">
             Add Template
           </button>
         </div>
       </div>
 
+
       {/* Table */}
-      <div className="max-h-[77vh]  pb-16 overflow-y-auto relative no-scrollbar">
-        <table className="min-w-full border border-gray-200 bg-white shadow rounded table-fixed">
-          <thead className="bg-gray-100 text-xs text-gray-700 uppercase tracking-wider sticky top-0 z-10">
-            <tr>
-              <th className="px-4 py-3 w-10 bg-gray-100">
-                <div className="w-4 h-4 border border-slate-300 rounded flex items-center justify-center">
-                  {/* <FaCheck className="text-purple-600 text-xs" /> */}
-                </div>
-              </th>
-              <th className="px-4 py-2 text-center bg-gray-100">Name</th>
-              <th className="px-4 py-2 text-center bg-gray-100">Created</th>
-              <th className="px-4 py-2 text-center bg-gray-100">Last Updated</th>
-              <th className="px-4 py-2 text-center bg-gray-100">Use</th>
-              <th className="px-4 py-2 text-center bg-gray-100">Action</th>
-            </tr>
-          </thead>
-
-          {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 (
-                  <tr key={index} className="hover:bg-gray-50 relative">
-                    <td className="px-4 py-2">
-                      <div className="w-4 h-4 border border-slate-300 rounded flex items-center justify-center">
-                        {/* <FaCheck className="text-purple-600 text-xs" /> */}
-                      </div>
-                    </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>
-                    {/* Dropdown Trigger + Tooltip */}
-                    <td className="px-4 py-2 text-center relative">
-                      <button
-                        onClick={() => setShowMenu(showMenu === index ? null : index)}
-                        className="text-slate-400 hover:text-black focus:outline-none"
-                      >
-                        <PiDotsThreeOutlineVerticalFill className="text-lg" />
-                      </button>
-
-                      {showMenu === index && (
-                        <div
-                          className="absolute right-15 top-5 mt-2 w-32 bg-white border border-gray-200 rounded shadow-lg z-10 transition-opacity duration-300 ease-in-out"
-                          tabIndex={0} // Make it focusable
-                          onBlur={(e) => {
-                            // Ensure it only closes if focus truly leaves the container
-                            if (!e.currentTarget.contains(e.relatedTarget)) {
-                              setShowMenu(null);
-                            }
-                          }}
-                        >
-                          <button
-                            className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
-                            onClick={() => handleEditClick(item.id)}
-                          >
-                            Edit
-                          </button>
-                          <button
-                            className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-100"
-                            onClick={() => {
-                              setShowMenu(null);
-                              console.log('Delete clicked', item);
-                            }}
-                          >
-                            Delete
-                          </button>
-                        </div>
-                      )}
-                    </td>
-
-                  </tr>
-                );
-              })}
-            </tbody>
-
-          ) : (
-            <tbody>
-              <tr>
-                <td colSpan="6" className="text-center py-10 text-gray-500">
-                  No templates found.
-                </td>
-              </tr>
-            </tbody>
-
-          )}
-        </table>
-      </div>
-
-
+      <section className="my-4 mx-3"></section>
+      <TemplateTable />
     </div>
   );
 };

src/components/transactions/AuditModal.tsx

@@ -0,0 +1,303 @@
+import React, { useEffect, useState } from "react";
+import {
+    FiX,
+    FiCheckCircle,
+    FiXCircle,
+    FiClock,
+    FiUser,
+    FiCalendar,
+    FiFileText,
+    FiAlertTriangle,
+    FiTruck,
+    FiUserCheck,
+    FiUserX,
+    FiPackage,
+    FiMapPin,
+    FiEye,
+    FiRotateCcw,
+    FiSend,
+    FiMail,
+    FiActivity,
+    FiRefreshCw,
+    FiLock,
+    FiUnlock,
+    FiUserPlus,
+    FiEdit
+} from "react-icons/fi";
+import api from "../../config/api";
+import { useParams } from "react-router-dom";
+import logoRecord from '../../assets/record.svg'
+import LoaderUi from "../../helper/LoaderUi";
+import { FaRegEyeSlash } from "react-icons/fa";
+import { MdAccessTime, MdCancel } from "react-icons/md";
+
+interface AuditModalProps {
+    closeModal: () => void;
+}
+
+const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
+    const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
+    const userDetails = JSON.parse(sessionStorage.getItem('userDetails') || '{}');
+
+    if (!accountId || !transactionId) {
+        window.location.href = "/";
+        return null;
+    }
+
+    let [auditStatus, setAuditStatus] = useState([])
+    let [loading, setLoading] = useState(false)
+    const getAuditDetails = async () => {
+        setLoading(true)
+        try {
+            let res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/audit?lang=${userDetails.language || ''}`)
+            // let res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/audit?lang=hi`)
+            if (res?.status === 200) {
+                // console.log(res?.data?.events)
+                let auditResponse = res?.data?.events
+                setAuditStatus(auditResponse)
+            }
+        } catch (error) {
+            console.log(error)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    useEffect(() => {
+        if (accountId && transactionId) {
+            getAuditDetails()
+        }
+    }, [accountId, transactionId])
+
+
+    const statusHistory = [
+        {
+            "action": "SENT",
+            "message": "Transaction Sent by John Doe <john@email.com>",
+            "status": "SENT",
+            "eventData": {
+                "ip": "192.168.1.1",
+                "longitude": "3.3792",
+                "latitude": "6.5244",
+                "timezone": "WAT"
+            },
+            "timestamp": "2025-01-15T10:30:00Z",
+            "language": "en"
+        },
+        {
+            "action": "INVITED",
+            "message": "Invitation Sent to Jane Smith <jane@email.com> to sign documents",
+            "status": "SENT",
+            "eventData": {
+                "ip": "0.0.0.0",
+                "longitude": "11",
+                "latitude": "12",
+                "timezone": ""
+            },
+            "timestamp": "2025-01-15T11:45:00Z",
+            "language": "es"
+        },
+        {
+            "action": "VIEWED",
+            "message": "Document viewed by recipient Alice Johnson <alice@email.com>",
+            "status": "VIEWED",
+            "eventData": {
+                "ip": "203.0.113.5",
+                "longitude": "-74.0059",
+                "latitude": "40.7128",
+                "timezone": "EST"
+            },
+            "timestamp": "2025-01-15T14:20:00Z",
+            "language": "en"
+        },
+        {
+            "action": "SIGNED",
+            "message": "Document signed by Bob Wilson <bob@email.com>",
+            "status": "COMPLETED",
+            "eventData": {
+                "ip": "198.51.100.10",
+                "longitude": "-122.4194",
+                "latitude": "37.7749",
+                "timezone": "PST"
+            },
+            "timestamp": "2025-01-15T16:10:00Z",
+            "language": "en"
+        }
+    ];
+
+    const getActionIcon = (action: string) => {
+
+        const icons = {
+            'CREATED': <FiFileText className="w-4 h-4 text-sky-500" />,
+            'SENT': <FiSend className="w-4 h-4" />,
+            'INVITED': <FiMail className="w-4 h-4" />,
+            'COMPLETED': <FiCheckCircle className="w-4 h-4 bg-green-600 text-white rounded-full" />,
+            'RE_SENT_INVITATION': <FiRefreshCw className="w-4 h-4" />,
+            'RE_SENT_EXPIRED_INVITATION': <FiRefreshCw className="w-4 h-4" />,
+            'VIEWED': <FiEye className="w-4 h-4" />,
+            'VIEWED_IN_PERSON': <FaRegEyeSlash className="w-4 h-4" />, // Slightly different eye icon
+            'AUTH_FAILED': <FiXCircle className="w-4 h-4 text-red-500" />,
+            'ACCESS_CODE_FAILED': <FiLock className="w-4 h-4 text-red-500" />,
+            'ACCESS_CODE_VALIDATED': <FiUnlock className="w-4 h-4 text-green-500" />,
+            'AUTH_VALIDATED': <FiCheckCircle className="w-4 h-4 text-green-500" />,
+            'SIGNED': <FiCheckCircle className="w-4 h-4" />,
+            'EXPIRED': <MdAccessTime className="w-4 h-4 text-gray-500" />,
+            'CANCELLED': <MdCancel className="w-4 h-4 text-red-500" />,
+            'DECLINED': <FiXCircle className="w-4 h-4 text-red-500" />,
+            'PENDING': <FiClock className="w-4 h-4" />,
+            'ASSIGNED': <FiUserCheck className="w-4 h-4" />,
+            'REASSIGNED': <FiUserPlus className="w-4 h-4" />,
+            'EDITED': <FiEdit className="w-4 h-4" />,
+        };
+        return icons[action as keyof typeof icons] || <FiActivity className="w-4 h-4" />;
+    };
+
+    const getActionColor = (action: string, status: string) => {
+        if (status === 'COMPLETED') return 'text-green-600';
+        if (status === 'FAILED' || status === 'REJECTED') return 'text-red-600';
+        if (status === 'PENDING') return 'text-yellow-600';
+
+        const colors = {
+            'SENT': 'text-blue-600',
+            'INVITED': 'text-indigo-600',
+            'VIEWED': 'text-purple-600',
+            'SIGNED': 'text-green-600',
+            'REJECTED': 'text-red-600'
+        };
+        return colors[action as keyof typeof colors] || 'text-gray-600';
+    };
+
+    const getStatusBadge = (status: string) => {
+        const statusClasses = {
+            'SENT': 'bg-blue-100 text-blue-800',
+            'COMPLETED': 'bg-green-100 text-green-800',
+            'FAILED': 'bg-red-100 text-red-800',
+            'PENDING': 'bg-yellow-100 text-yellow-800',
+            'VIEWED': 'bg-purple-100 text-purple-800',
+            'REJECTED': 'bg-red-100 text-red-800'
+        };
+        return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800';
+    };
+
+    const formatTimestamp = (timestamp: string) => {
+        try {
+            const date = new Date(timestamp);
+            if (isNaN(date.getTime())) {
+                return timestamp;
+            }
+
+            const now = new Date();
+            const diffMs = now.getTime() - date.getTime();
+            const diffMins = Math.floor(diffMs / (1000 * 60));
+            const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+            const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+            if (diffMins < 60) {
+                return `${diffMins}m ago`;
+            } else if (diffHours < 24) {
+                return `${diffHours}h ago`;
+            } else if (diffDays < 7) {
+                return `${diffDays}d ago`;
+            } else {
+                return date.toLocaleDateString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                    year: 'numeric',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                });
+            }
+        } catch (error) {
+            return timestamp;
+        }
+    };
+
+    const extractEmailFromMessage = (message: string) => {
+        const emailMatch = message.match(/<([^>]+)>/);
+        return emailMatch ? emailMatch[1] : '';
+    };
+
+    return (
+        <div className="fixed inset-0 flex items-center justify-center backdrop-blur-sm bg-white/10 z-50 px-2">
+            <div className="bg-white rounded-md shadow-md w-full h-[90vh] max-w-[95vw] sm:max-w-[90vw] md:max-w-[85vw] lg:max-w-[75vw] overflow-hidden flex flex-col">
+
+                {/* Header */}
+                <div className="flex items-center justify-between p-3 border-b border-gray-200 bg-[var(--primary)] rounded-t-md">
+                    <h2 className="text-base sm:text-lg md:text-xl font-semibold text-white">Audit Status</h2>
+                    <button
+                        onClick={closeModal}
+                        className="text-white cursor-pointer transition-colors hover:text-gray-200"
+                    >
+                        <FiX className="w-5 h-5" />
+                    </button>
+                </div>
+
+                {/* Content */}
+                <div className="flex-1 overflow-y-auto p-4 no-scrollbar">
+                    {auditStatus.length ? (
+                        <div className="space-y-3">
+                            {auditStatus.map((item, index) => (
+                                <div key={index} className="flex items-start space-x-3 pb-3 border-b border-gray-100 last:border-b-0">
+                                    <div className={`${getActionColor(item.action.toUpperCase())} mt-1`}>
+                                        {getActionIcon(item.action.toUpperCase())}
+                                    </div>
+                                    <div className="flex-1">
+                                        <p className="text-gray-600 font-medium text-xs sm:text-xs mb-1">
+                                            {item.message}
+                                        </p>
+                                        <div className="flex flex-wrap items-center space-x-2 text-xs text-gray-600 mb-1">
+                                            <span>Action: {item.action}</span>
+                                            {extractEmailFromMessage(item.message) && (
+                                                <>
+                                                    <span className="hidden sm:inline">•</span>
+                                                    <span className="text-blue-600">
+                                                        {extractEmailFromMessage(item.message)}
+                                                    </span>
+                                                </>
+                                            )}
+                                        </div>
+
+                                        <div className="flex flex-wrap items-center space-x-2 mb-2 text-xs text-gray-600">
+                                            <span>Status:</span>
+                                            <span className={`px-2 py-0.5 rounded-full ${getStatusBadge(item.status)}`}>
+                                                {item.status}
+                                            </span>
+                                            <span className="text-gray-500">{formatTimestamp(item.timestamp)}</span>
+                                            {item.language && (
+                                                <span className="text-gray-400 uppercase">{item.language}</span>
+                                            )}
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    ) : (
+                        <div className="flex justify-center items-center h-full">
+                            <img
+                                src={logoRecord}
+                                alt="Record Not Found"
+                                className="w-64 h-64 opacity-70 object-contain"
+                            />
+                        </div>
+                    )}
+                </div>
+
+                {/* Footer */}
+                <div className="flex justify-between items-center p-3 border-t border-gray-200 bg-gray-50 text-sm">
+                    <div className="text-gray-600">
+                        Showing {auditStatus.length} event{auditStatus.length !== 1 ? 's' : ''}
+                    </div>
+                    <button
+                        onClick={closeModal}
+                        className="cursor-pointer px-4 py-1.5 bg-[var(--sendForSignBgCol)] text-white rounded-lg hover:bg-red-700 transition-colors font-medium"
+                    >
+                        Close
+                    </button>
+                </div>
+            </div>
+        </div>
+
+    );
+};
+
+export default AuditModal;

src/components/transactions/TransactionView.tsx

@@ -1,5 +1,5 @@
 import { AiFillSignature } from 'react-icons/ai';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import { Link, useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import { LuGitGraph } from 'react-icons/lu';
 import AccountNav from '../accounts/AccountNav';
 import { useEffect, useState } from 'react';
@@ -9,6 +9,9 @@ import { IoCloseOutline } from 'react-icons/io5';
 import { MdEditDocument } from "react-icons/md";
 import { useSelector } from 'react-redux';
 import { RootState } from '../../store/store';
+import { SignTypeEnum } from '../../utlity/types';
+import AuditModal from './AuditModal';
+import { FaFile } from 'react-icons/fa6';
 
 // Sample recipient data — you can replace this with actual API data later
 const recipients = [
@@ -43,8 +46,36 @@ const TransactionView = () => {
     const [transactionDetails, setTransactionDetails] = useState(null);
     const [signingOrderModal, setSigningOrderModal] = useState({ open: false });
     const user = useSelector((state: RootState) => state.user)
+    const location = useLocation();
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [documentsData, setDocumentsData] = useState([])
 
-    console.log(transactionDetails, "line 37");
+    useEffect(() => {
+        // update whenever location changes
+        setIsModalOpen(location.search.includes("auditStatus"));
+    }, [location]);
+
+    const handleOpenAuditModal = () => {
+        const { pathname, search } = location;
+        let newSearch = search
+            ? search.includes("auditStatus")
+                ? search
+                : `${search}&auditStatus`
+            : "?auditStatus";
+
+        window.history.pushState({}, "", pathname + newSearch);
+        setIsModalOpen(true); // update state immediately
+    };
+
+    const closeModal = () => {
+        let search = location.search
+            .replace(/[?&]auditStatus\b/, "")
+            .replace(/^&/, "?")
+            .replace(/\?$/, "");
+
+        window.history.pushState({}, "", location.pathname + search);
+        setIsModalOpen(false); //  update state immediately
+    };
 
     const fetchData = async () => {
         try {
@@ -56,31 +87,57 @@ const TransactionView = () => {
         }
     }
 
+    const fetchDocuments = async () => {
+        try {
+            const res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/documents`)
+            if (res?.status === 200) {
+                let resDoc = res?.data
+                setDocumentsData(resDoc)
+            }
+
+        } catch (error) {
+            console.log(error)
+        }
+    }
+
     useEffect(() => {
         fetchData()
+        fetchDocuments()
     }, [accountId, transactionId])
 
 
     const handleNavigateToSign = (id: number) => {
-        window.open(`./../../../../sign/${id}`)
+        window.open(`./../../../../sign/${id}/${SignTypeEnum.selfSign}`)
     }
 
+    const getStatusBadge = (status: string) => {
+        const statusClasses = {
+            'SENT': 'bg-blue-100 text-blue-800',
+            'COMPLETED': 'bg-green-100 text-green-800',
+            'FAILED': 'bg-red-100 text-red-800',
+            'PENDING': 'bg-yellow-100 text-yellow-800',
+            'VIEWED': 'bg-purple-100 text-purple-800',
+            'REJECTED': 'bg-red-100 text-red-800'
+        };
+        return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800';
+    };
+
     return (
         <>
             {transactionDetails &&
                 <>
-                    <div className='mt-2 flex justify-center items-stretch w-full h-full bg-white rounded-sm'>
-                        <div className="w-full px-6 py-4 rounded-tl-sm text-xs border-r-2 border-gray-200 overflow-y-auto">
+                    <div className='mt-2 grid grid-cols-1 lg:grid-cols-12 items-stretch max-w-90vw min-h-[88vh]  h-full bg-white rounded-lg  shadow-sm mx-3'>
+                        <div className="lg:col-span-10 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 Sign 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'>{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>
+                                <p className=''><span className='text-slate-600 font-semibold'>Last Change on</span> <span className='text-slate-400'>{(transactionDetails?.transaction?.lastModifiedAt)}</span></p>
+                                <p className='text-slate-600'>Created at <span>{(transactionDetails?.transaction?.createdAt)}</span></p>
                             </div>
 
                             <p className='text-slate-600 text-[0.98rem] mt-2 font-semibold'>{transactionDetails?.transaction.status}</p>
@@ -98,9 +155,13 @@ const TransactionView = () => {
                                     More
                                 </button>
 
-                                <Link className='cursor-pointer border  text-green-700 border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' to={`/process-step-two/${accountId}/${transactionId}`}>
+                                {/* <Link className='cursor-pointer border  text-green-700 border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' to={`/process-step-two/${accountId}/${transactionId}`}>
                                     Edit
-                                </Link>
+                                </Link> */}
+                                <button className='cursor-pointer border  text-[var(--primary)] border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' onClick={handleOpenAuditModal}>
+                                    Audit
+                                </button>
+
                             </div>
 
                             <hr className='my-6 border-slate-200' />
@@ -119,38 +180,55 @@ const TransactionView = () => {
                                     {/* Recipients List */}
                                     {transactionDetails.recipients.map((recipient, index) => (
                                         <div key={index}>
-                                            <div className='mt-2 flex justify-between items-center'>
-                                                <div className='flex gap-8 items-center'>
-                                                    {/* <p className='text-slate-600'>{index+1}</p> */}
+                                            <div className="mt-2 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-0 ">
+
+                                                {/* Left section: recipient info */}
+                                                <div className="flex flex-col sm:flex-row gap-4 sm:items-center">
                                                     <div>
-                                                        <p className='text-slate-600 font-semibold'>{recipient.name}</p>
-                                                        <p className='text-slate-600'>{recipient.email}</p>
-                                                        {recipient.hostEmail !== null && recipient.hostEmail !== "" && <p className='text-xs'><i><b>Host: {recipient.hostEmail}</b></i></p>}
+                                                        <p className="text-slate-600 font-semibold text-xs sm:xs">{recipient.name}</p>
+                                                        <p className="text-slate-600 text-xs sm:text-xs">{recipient.email}</p>
+                                                        {recipient.hostEmail && (
+                                                            <p className="text-xs text-gray-500 italic">
+                                                                <strong>Host:</strong> {recipient.hostEmail}
+                                                            </p>
+                                                        )}
                                                     </div>
                                                 </div>
 
-                                                <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>
+                                                {/* Right section: status and actions */}
+                                                <div className="flex flex-col items-start sm:items-end gap-1 text-sm text-slate-600">
+                                                    <div className="flex flex-wrap gap-3 items-center relative">
+                                                        <div className="pl-6 relative">
+                                                            <AiFillSignature className="absolute left-0 top-0 text-[1rem]" />
+                                                            <p className={`text-black text-xs font-semibold rounded-lg px-2 py-0.5 ${getStatusBadge(recipient.status)}`}>{recipient.status}</p>
                                                         </div>
-                                                        {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'>
+
+                                                        {recipient.email === user.email && recipient.status !== "COMPLETED" && (
+                                                            <button
+                                                                onClick={() => handleNavigateToSign(recipient.id)}
+                                                                className="text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold text-xs hover:bg-opacity-90 transition"
+                                                            >
                                                                 Sign
-                                                            </p>}
+                                                            </button>
+                                                        )}
                                                     </div>
-                                                    {recipient.status !== "PENDING" && <p>on {recipient.completedAt}</p>}
-                                                    {/* <a href={recipient.viewLink} className='text-blue-600 hover:underline'>
-                                                    View signed location
-                                                </a> */}
+
+                                                    {recipient.status !== "PENDING" && (
+                                                        <p className="text-xs text-gray-500">on {recipient.completedAt}</p>
+                                                    )}
+                                                    {/* Optional signed document link */}
+                                                    {/* {recipient.viewLink && (
+          <a href={recipient.viewLink} className="text-blue-600 text-xs hover:underline">
+            View signed location
+          </a>
+        )} */}
                                                 </div>
                                             </div>
-                                            <hr className='my-2 border-slate-200' />
+
+                                            <hr className="my-3 border-slate-200" />
                                         </div>
                                     ))}
+
                                 </div>
                             }
 
@@ -168,22 +246,31 @@ const TransactionView = () => {
                                 </div>}
                         </div>
 
-                        <div className='w-[210px] text-xs rounded-sm '>
-
-                            <div className='p-4 flex flex-col gap-2'>
-                                <p>abc.pdf</p>
-                                <div className='border-3 rounded-sm border-slate-300 relative text-xs'>
-                                    <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 className='cursor-pointer'><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16} /></Link></span>
-                                        </p>
+                        <div className='lg:col-span-2 text-xs rounded-sm max-h-[88vh] overflow-y-auto no-scrollbar'>
+                            {documentsData.map((docsD, index) => (
+                                <div className='p-4 flex flex-col gap-2 cursor-pointer' key={docsD.id}>
+                                    <p>{docsD.name}</p>
+                                    <div className='border-3 rounded-sm border-slate-300 relative text-xs'>
+                                        {docsD?.thumbnail ? (
+                                            <img
+                                                style={{ width: "200px", height: "160px" }}
+                                                src={`data:image/jpeg;base64,${docsD.thumbnail}`}  // Adjust MIME type if needed
+                                                alt=""
+                                                loading="lazy"
+                                            />
+                                        ) : (
+                                            <FaFile className="h-35 w-20 mx-5 text-gray-300" />
+                                        )}
+                                        <div className='bg-slate-100 p-2 absolute w-full bottom-[0px]'>
+                                            <p className='text-[0.7rem] text-slate-500 flex justify-end items-center'>
+                                                {/* <span> 1 of {docsD?.pages?.length}</span> */}
+                                                <span className='cursor-pointer '><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16} /></Link></span>
+                                            </p>
 
+                                        </div>
                                     </div>
                                 </div>
-
-                            </div>
+                            ))}
 
                         </div>
 
@@ -206,6 +293,8 @@ const TransactionView = () => {
                             </div>
                         </div>
                     }
+
+                    {isModalOpen && <AuditModal closeModal={closeModal} />}
                 </>
             }
         </>

src/components/view/DocView.tsx

@@ -43,18 +43,14 @@ const DocView = () => {
 
     function zoom(percentage: number, contentClass: string) {
 
-        console.log("calling zoom function", percentage, contentClass);
-        
         const content = document.querySelector(`.${contentClass}`);
         const scale = percentage // 100;
         if(content) {
-            console.log("calling zoom function Printing Content", content);
             content.style.transform = `scale(${scale})`;
         }
     }
 
     useEffect(() => {
-        console.log("Calling useEffect for zoom", fitObj[selFitIndx].value);
         let indx = fitObj[selFitIndx].value
         if (indx === "FIT") {
             indx = "100";
@@ -62,8 +58,6 @@ const DocView = () => {
         zoom(Number(indx), 'zoom-con')
     }, [selFitIndx])
 
-    console.log(isFitDd);
-
     return (
         <>
 

src/config/axiosInstance.tsx

@@ -19,8 +19,6 @@ export const createAxiosInstance = () => {
     const user = JSON.parse(parsedRoot.user);
     const accessToken = user.accessToken;
 
-    console.log(accessToken, "accessToken");
-
     return axios.create({
         baseURL: import.meta.env.VITE_BASE_URI,
         withCredentials: true,

src/index.css

@@ -1,16 +1,16 @@
 @import "tailwindcss";
 
 :root {
-  --primary: #3D74B6;
+  --primary: #005AB5;
   --primaryLight: #ffffff;
   --primaryLight2: #6a92c2;
   --primaryLight3: #dae9de;
   --dashBoardBg: #ffffff;
-  --mainViewBg: #edeaeb;
+  --mainViewBg: #F8F9FC;
   --highlightBg1: #edeaeb;
   --menuTextCol: #98a0a8;
-  --menuTextColActive: #3D74B6;
-  --menuBgColActive: #edeaeb;
+  --menuTextColActive: #005AB5;
+  --menuBgColActive: #FFFFFF;
   --menuTextHoverCol: #e7e7e7;
 
   --greyTextCol: #98a0a8;
@@ -46,8 +46,31 @@
 
   --modalSubmitBG: #1919d7;
   --modalSubmitBGHover: #395ee1;
+
+  /* Figma Design */
+  --sidebarBg: #005AB5;
+  --sidebarDropDownBg : #003C78;
+  --sidebarMenuCol : #FFFFFF;
+  --documentUploadBg :#FFFFFF;
+  --mainPrimaryBtn : #077DEC
+
+
+
+
 }
 
+.btn {
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* Button press effect */
+.btn:active {
+  transform: scale(0.97) translateY(1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) inset;
+}
+
+
 
 /* Sortable CSS */
 .sortable-ghost {
@@ -60,6 +83,23 @@
   touch-action: none;
 }
 
+@keyframes slowPing {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  75%, 100% {
+    transform: scale(2.2);
+    opacity: 0;
+  }
+}
+
+.custom-ping {
+  animation: slowPing 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+
 canvas {
   touch-action: none;
   -ms-touch-action: none;
@@ -100,6 +140,18 @@ canvas {
   }
 }
 
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
 /* Group Border - START */
 .group-border {
   position: absolute;

src/store/slices/documentSlice.ts

@@ -1,166 +1,3 @@
-// import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
-// // import { v4 as uuidv4 } from "uuid";
-
-// import { hideLoader, showLoader } from "./loaderSlice";
-// // import { showModal } from "./modalSlice";
-// // import { updateSelectedDocuments } from "./selectedDocsSlice";
-
-// import api from "../../config/api";
-// import { Bounce, toast } from "react-toastify";
-// // import { createAxiosInstance } from "../../config/axiosInstance";
-
-// // const axiosInstance = createAxiosInstance();
-
-// export interface Document {
-//   id: string;
-//   name: string;
-//   extension: string;
-//   original?: boolean;
-//   corrupted?: boolean;
-//   isCompleted: boolean;
-//   status: string;
-// }
-
-// export interface DocumentState {
-//   documents: Document[];
-//   loading: boolean;
-//   error: string | null;
-// }
-
-// const initialState: DocumentState = {
-//   documents: [],
-//   loading: false,
-//   error: null,
-// };
-
-// interface uploadArgs {
-//   formData: FormData;
-//   accountId: string;
-//   transactionId: string;
-// }
-
-
-// // Fetch documents from API
-// export const fetchDocuments = createAsyncThunk<Document[], { accountId: string, transactionId: string }>(
-//   "documents/fetchDocuments",
-//   async ({ accountId, transactionId }, { rejectWithValue }) => {
-
-//     try {
-//       const response = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/documents?include_images=true`);
-//       return response.data as Document[];
-//     } catch (error: any) {
-//       // if(error.status === 401) {}
-//       return rejectWithValue(error.response?.data || "Failed to fetch documents");
-//     }
-//   }
-// );
-
-// // Upload multiple documents using FormData (Key: "document")
-// export const uploadDocuments = createAsyncThunk<Document[], uploadArgs>(
-//   "documents/uploadDocuments",
-//   async ({ formData, accountId, transactionId }, { dispatch, rejectWithValue }) => {
-//     try {
-//       dispatch(showLoader("Uploading documents..."));
-//       console.log("Form Data", formData.getAll("document"))
-
-//       const response = await api.post(`/api/accounts/${accountId}/transactions/${transactionId}/documents`, formData, {
-//         headers: {
-//           "Content-Type": "multipart/form-data"
-//         },
-//       });
-
-//       console.log("Form Uploaded Response DocumentSlice Line 185", response.data)
-
-//       dispatch(hideLoader());
-//       return [response.data];
-//     } catch (error: any) {
-//       dispatch(hideLoader());
-//       toast.error("Error Uploading Document", {
-//         position: "bottom-right",
-//         autoClose: 3000,
-//         hideProgressBar: false,
-//         closeOnClick: false,
-//         pauseOnHover: false,
-//         draggable: false,
-//         progress: undefined,
-//         theme: "light",
-//         transition: Bounce,
-//       });
-
-//       console.log("Failed Uploading Documents")
-//       throw new Error("Failed Uploading Documents")
-
-//       // Mock data in case of failure
-//       // const failedDocuments = formData.getAll("document").map((file: any) => ({
-//       //   id: uuidv4(),
-//       //   name: file.name,
-//       //   extension: file.name.split(".").pop() || "unknown",
-//       //   original: Math.random() < 0.5,
-//       //   corrupted: Math.random() < 0.5,
-//       // }));
-
-//       // dispatch(updateSelectedDocuments({ documents: failedDocuments }));
-//       // return failedDocuments; // Instead of rejecting, return mock data
-//     }
-//   }
-// );
-
-// const documentSlice = createSlice({
-//   name: "documents",
-//   initialState,
-//   reducers: {
-//     setDocuments: (state, action: PayloadAction<Document[]>) => {
-//       state.documents = action.payload;
-//     },
-//     setDocProgComplete: (state, action: PayloadAction<string>) => {
-//       const docIndex = state.documents.findIndex(doc => doc.id === action.payload);
-//       if (docIndex !== -1) {
-//         state.documents[docIndex].isCompleted = true;
-//       }
-//     },
-//     resetDocuments: (state) => {
-//       state.documents = [];
-//     },
-//     deleteDocument: (state, action: PayloadAction<string>) => {
-//       state.documents = state.documents.filter(doc => doc.id !== action.payload);
-//     },
-//   },
-//   extraReducers: (builder) => {
-//     builder
-//       // Fetch documents
-//       .addCase(fetchDocuments.pending, (state) => {
-//         state.loading = true;
-//         state.error = null;
-//       })
-//       .addCase(fetchDocuments.fulfilled, (state, action: PayloadAction<Document[]>) => {
-//         state.loading = false;
-//         state.documents = action.payload;
-//       })
-//       .addCase(fetchDocuments.rejected, (state, action) => {
-//         state.loading = false;
-//         state.error = action.payload as string;
-//       })
-
-//       // Upload multiple documents
-//       .addCase(uploadDocuments.pending, (state) => {
-//         state.loading = true;
-//         state.error = null;
-//       })
-//       .addCase(uploadDocuments.fulfilled, (state, action: PayloadAction<Document[]>) => {
-//         state.loading = false;
-//         state.documents = [...action.payload, ...state.documents];
-//       })
-//       .addCase(uploadDocuments.rejected, (state, action) => {
-//         state.loading = false;
-//         state.error = action.payload as string;
-//       });
-//   },
-// });
-
-// export const { resetDocuments, setDocuments, setDocProgComplete, deleteDocument } = documentSlice.actions;
-// export default documentSlice.reducer;
-
-
 import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
 import { toast, Bounce } from 'react-toastify';
 import api from '../../config/api';
@@ -244,21 +81,29 @@ export const uploadDocuments = createAsyncThunk<
       };
       const toggle = state.selectedRecipients.transactionTemplateToggle;
 
-      console.log(`/api/accounts/${accountId}/${toggle}/${transactionId}/documents`)
+      let response = [];
+      // debugger
+      for (let i = 0; i < formData.getAll("file").length; i++) {
+        const file = new FormData();
+        file.append("file", formData.getAll("file")[i]);
+
+        const res = await api.post(
+          `/api/accounts/${accountId}/${toggle}/${transactionId}/documents`,
+          file,
+          {
+            headers: {
+              'Content-Type': 'multipart/form-data',
+            },
+          }
+        );
+
+        console.log(res.data);
+        response.push(res.data);
+      }
 
-      const response = await api.post(
-        `/api/accounts/${accountId}/${toggle}/${transactionId}/documents`,
-        formData,
-        {
-          headers: {
-            'Content-Type': 'multipart/form-data',
-          },
-        }
-      );
-      console.log("//  await sleep(5000);", response.data)
       // await sleep(5000);
       dispatch(hideLoader());
-      return [response.data];
+      return [...response];
     } catch (error: any) {
       dispatch(hideLoader());
 
@@ -326,7 +171,9 @@ const documentsSlice = createSlice({
       })
       .addCase(uploadDocuments.fulfilled, (state, action: PayloadAction<Document[]>) => {
         state.loading = false;
-        state.documents.push(...action.payload);
+        action.payload.forEach((doc, indx) => {
+          state.documents.push(doc);
+        });
       })
       .addCase(uploadDocuments.rejected, (state, action) => {
         state.loading = false;

src/store/slices/selectedDocsSlice.ts

@@ -55,10 +55,6 @@ export const updateSelectedDocuments = createAsyncThunk<
   "selectedDocuments/updateSelectedDocuments",
   async ({ documents }, { rejectWithValue }) => {
     try {
-
-
-      console.log(documents, "From Selected Documents")
-
       // await axiosInstance.post("/selected-documents",
       //   { documents }
       // );

src/store/slices/selectedRecipientsSlice.tsx

@@ -1,335 +1,3 @@
-// import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-// import { createAsyncThunk } from '@reduxjs/toolkit';
-// import { toast } from 'react-toastify';
-// import colors from '../../utlity/colorsArr';
-// import api from '../../config/api';
-
-
-
-// export enum recipientType {
-//     SIGNER = "Signer",
-//     INPERSONSIGNER = "InPersonSigner",
-//     CC = "CC"
-// }
-
-// export interface Recipient {
-//     id?: string;
-//     firstName: string;
-//     lastName: string;
-//     routingOrder: number;
-//     email: string;
-//     hostName: string;
-//     hostEmail: string;
-//     type: recipientType;
-//     color?: string;
-// }
-
-// export interface SelectedRecipientInt {
-//     recipients: Recipient[],
-//     signingOrder: boolean,
-//     transactionTemplateToggle: TRANSACTION_TEMPLATE_TOGGLE
-// }
-
-// interface AddRecipientArgs {
-//     recipientsData: Recipient[];
-//     accountId: string;
-//     transactionId: string;
-// }
-
-// export enum TRANSACTION_TEMPLATE_TOGGLE {
-//     TRANSACTIONS = "transactions",
-//     TEMPLATES = "templates"
-// }
-
-// const initialState: SelectedRecipientInt = {
-//     recipients: [],
-//     signingOrder: false,
-//     transactionTemplateToggle: TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS 
-// };
-
-// export const addRecipientAsync = createAsyncThunk<Recipient[], AddRecipientArgs>(
-//     'selectedRecipients/addRecipientAsync',
-//     async ({ recipientsData, accountId, transactionId }, { rejectWithValue }) => {
-//         console.log(recipientsData, accountId, transactionId, "recipientsData Line 46");
-//         try {
-//             console.log(recipientsData, "recipientsData --- Line 48");
-
-//             const updateRecipientsData = recipientsData.filter((recipient, idx) => recipient.id !== null);
-//             const createRecipientsData = recipientsData.filter((recipient, idx) => recipient.id == null);
-
-//             console.log(updateRecipientsData, "updateRecipientsData Line 52");
-//             console.log(createRecipientsData, "createRecipientsData Line 53");
-
-//             const resUpdate = await api.put(
-//                 `/api/accounts/${accountId}/transactions/${transactionId}/recipients`,
-//                 updateRecipientsData
-//             );
-
-//             const resCreate = await api.post(
-//                 `/api/accounts/${accountId}/transactions/${transactionId}/recipients`,
-//                 createRecipientsData
-//             );
-
-//             if (createRecipientsData.length === 0) resCreate.data = [];
-//             if (updateRecipientsData.length === 0) resUpdate.data = [];
-
-//             console.log(resCreate, "resCreate");
-//             console.log(resUpdate, "resUpdate");
-
-//             return [...resCreate.data, ...resUpdate.data] as Recipient[];
-//         } catch (err: any) {
-//             return rejectWithValue(err.response?.data || "Failed to add recipient");
-//         }
-//     }
-// );
-
-// interface RemoveRecipientAsyncInterfaceObj {
-//     id?: string;
-//     email?: string;
-// }
-
-// interface RemoveRecipientAsyncInterface {
-//     recipientId: number | null;
-//     accountId: string;
-//     transactionId: string;
-//     email: string;
-// }
-
-// export const removeRecipientAsync = createAsyncThunk<string | number, RemoveRecipientAsyncInterface>(
-//     'selectedRecipients/removeRecipientAsync',
-//     async (obj, { rejectWithValue }) => {
-//         try {
-//             if (obj.recipientId) {
-//                 const res = await api.delete(`/api/accounts/${obj.accountId}/transactions/${obj.transactionId}/recipients/${obj.recipientId}`);
-//                 console.log(res, "Line 77")
-//                 return obj.recipientId;
-//             }
-//             return obj.email
-//         } catch (err: any) {
-//             return rejectWithValue("Failed to remove recipient");
-//         }
-//     }
-// );
-
-// export const fetchRecipients = createAsyncThunk<Recipient[], { accountId: string, transactionId: string }>(
-//     'selectedRecipients/fetchRecipients',
-//     async ({ accountId, transactionId }, { rejectWithValue }) => {
-//         try {
-//             const response = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/recipients`);
-//             return response.data as Recipient[];
-//         } catch (err: any) {
-//             return rejectWithValue(err.response?.data || "Failed to fetch recipients");
-//         }
-//     }
-// );
-
-// const selectedRecipientsSlice = createSlice({
-//     name: 'selectedRecipients',
-//     initialState,
-//     reducers: {
-//         // Add a single recipient
-//         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,
-//                         hideProgressBar: false,
-//                         closeOnClick: false,
-//                         pauseOnHover: true,
-//                         draggable: true,
-//                         progress: undefined,
-//                         theme: "light",
-//                     });
-//                     return state;
-//                 }
-//             }
-
-//             // Adding Recipient on top if type is inPersonSigner
-//             console.log("Getting Type ", action.payload.type)
-//             if (action.payload.type === recipientType.INPERSONSIGNER) {
-//                 state.signingOrder = true
-//                 state.recipients = [action.payload, ...state.recipients]
-//             } else {
-//                 state.recipients.push(action.payload);
-//             }
-
-//         },
-//         resetRecipients: (state) => {
-//             state.recipients = [];
-//         },
-//         toggleToTemplates: (state) => {
-//             state.transactionTemplateToggle = TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES;
-//         },
-//         // Replace the entire selectedRecipients array
-//         setSelectedRecipients: (state, action: PayloadAction<Recipient[]>) => {
-//             for (const [index, recipient] of action.payload.entries()) {
-//                 if ((recipient.type === recipientType.INPERSONSIGNER && index > 0) && action.payload[index - 1].type !== recipientType.INPERSONSIGNER) {
-//                     return state;
-//                 }
-//             }
-
-//             state.recipients = action.payload;
-//         },
-//         setSigningOrder: (state, action: PayloadAction<boolean>) => {
-
-//             for (const recipient of state.recipients) {
-//                 if (recipient.type === recipientType.INPERSONSIGNER) {
-//                     if (state.signingOrder) return state;
-//                     state.signingOrder = true;
-//                     return state
-//                 }
-//             }
-
-//             state.signingOrder = action.payload;
-//         },
-//         // Remove Recipients
-//         removeSelectedRecipient: (state, action: PayloadAction<Recipient>) => {
-//             console.log("removeSelectedRecipient Called")
-//             state.recipients = state.recipients.filter((recipient) => recipient.email !== action.payload.email);
-//         },
-
-//         // Add Color in Recipient
-//         addColorsToRecipient: (state) => {
-//             // const colors = generateUniqueColors(state.recipients.length);
-//             for (const [index, recipient] of state.recipients.entries()) {
-//                 console.log(state)
-//                 recipient.color = colors[index]
-//             }
-//             return state;
-//         },
-//         updateRecipientOrder: (state, action: PayloadAction<{ id: string; routingOrder: number }>) => {
-//             console.log("recipient order called Line 159")
-//             const { id, routingOrder } = action.payload;
-//             const recipient = state.recipients.find((r) => r.id === id || r.email === id);
-//             if (recipient) {
-//                 recipient.routingOrder = routingOrder;
-//             }
-//         },
-//         updateRecipientIds: (state, action: PayloadAction<Recipient[]>) => {
-//             console.log("updateRecipientIds", console.table(action.payload));
-//             for (const recObj of state.recipients) {
-//                 const email = recObj.email
-//                 for (const recObj2 of action.payload) {
-//                     recObj.id = recObj2.id;
-//                 }
-//             }
-//         },
-//         resetSelRecipient: (state) => {
-//             state = initialState;
-//             return state;
-//         }
-//     },
-//     extraReducers: (builder) => {
-//         builder
-//             // Fetch Recipient - START
-//             .addCase(fetchRecipients.pending, (state) => {
-//             })
-//             .addCase(fetchRecipients.fulfilled, (state, action: PayloadAction<Recipient[]>) => {
-//                 // console.log("Fetched recipients successfully:", action.payload);
-
-//                 // Assign colors to recipients
-//                 const assignedRecipients = action.payload.map((recipient, index) => ({
-//                     ...recipient,
-//                     color: colors[index], // Cycle if more recipients than colors
-//                 }));
-
-//                 state.recipients = assignedRecipients;
-//             })
-//             .addCase(fetchRecipients.rejected, (state, action) => {
-//                 console.error("Failed to fetch recipients:", action.payload);
-//                 toast.error("Failed to fetch recipients", {
-//                     position: "bottom-right",
-//                     autoClose: 5000,
-//                     hideProgressBar: false,
-//                     closeOnClick: false,
-//                     pauseOnHover: true,
-//                     draggable: true,
-//                     progress: undefined,
-//                     theme: "light",
-//                 });
-//             })
-//             // Fetch Recipient - END
-
-//             // Add Recipient - START
-//             .addCase(addRecipientAsync.pending, (state) => {
-
-//             })
-
-
-//             .addCase(addRecipientAsync.fulfilled, (state, action: PayloadAction<Recipient[]>) => {
-//                 // Optionally avoid duplicates if needed
-
-//                 console.log("addRecipientAsync Called Line 258", action.payload);
-//                 // const newRecipients = action.payload.filter(newRec => {
-//                 //     return !state.recipients.some(existing => existing existing.id === newRec.id);
-//                 // });
-
-//                 // const newRecipients = action.payload.filter(newRec => {
-//                 //     return !state.recipients.some(existing => "id" in existing && existing.id === newRec.id);
-//                 // });
-
-//                 // // Add new recipients and assign colors
-//                 // const startIndex = state.recipients.length;
-//                 // newRecipients.forEach((rec, index) => {
-//                 //     rec.color = colors[startIndex + index];
-//                 //     state.recipients.push(rec);
-//                 // });
-
-//                 state.recipients = action.payload.map((recipient, index) => ({
-//                     ...recipient,
-//                     color: colors[index % colors.length], // Cycle through colors
-//                 }));
-
-//             })
-
-
-//             .addCase(addRecipientAsync.rejected, (state, action) => {
-//                 console.error("Failed to fetch recipients:", action.payload);
-//                 toast.error("Failed to fetch recipients", {
-//                     position: "bottom-right",
-//                     autoClose: 5000,
-//                     hideProgressBar: false,
-//                     closeOnClick: false,
-//                     pauseOnHover: true,
-//                     draggable: true,
-//                     progress: undefined,
-//                     theme: "light",
-//                 });
-//             })
-//             // Add Recipient - END
-
-//             // Fetch Recipient - START
-//             .addCase(removeRecipientAsync.pending, (state) => {
-//             })
-//             .addCase(removeRecipientAsync.fulfilled, (state, action: PayloadAction<string | number>) => {
-//                 state.recipients = state.recipients.filter(
-//                     (recipient) => recipient.id !== action.payload && recipient.email !== action.payload
-//                 );
-//             })
-//             .addCase(removeRecipientAsync.rejected, (state, action) => {
-//                 console.error("Failed to Delete recipients:", action.payload);
-//                 toast.error("Failed to Delete recipients", {
-//                     position: "bottom-right",
-//                     autoClose: 5000,
-//                     hideProgressBar: false,
-//                     closeOnClick: false,
-//                     pauseOnHover: true,
-//                     draggable: true,
-//                     progress: undefined,
-//                     theme: "light",
-//                 });
-//             })
-//         // Fetch Recipient - END
-//     }
-// });
-
-// export const { addRecipient, setSelectedRecipients, toggleToTemplates, removeSelectedRecipient, setSigningOrder, addColorsToRecipient, updateRecipientIds, resetSelRecipient, updateRecipientOrder, resetRecipients } = selectedRecipientsSlice.actions;
-// export default selectedRecipientsSlice.reducer;
-
-
-
 import { createSlice, PayloadAction, createAsyncThunk } from '@reduxjs/toolkit';
 import { toast } from 'react-toastify';
 import colors from '../../utlity/colorsArr';
@@ -342,7 +10,7 @@ export enum recipientType {
 }
 
 export interface Recipient {
-    id?: string;
+    id?: string | null;
     firstName: string;
     lastName: string;
     routingOrder: number;
@@ -356,7 +24,7 @@ export interface Recipient {
     roleName: string
     provideOwnTags?: boolean;
     uuid?: string;
-    newOne: boolean;
+    newOne?: boolean;
 }
 
 export interface SelectedRecipientInt {
@@ -405,8 +73,6 @@ export const addRecipientAsync = createAsyncThunk<
             const updateRecipientsData = recipientsData.filter(recipient => recipient.id !== null);
             const createRecipientsData = recipientsData.filter(recipient => recipient.id == null);
 
-            console.log("createRecipientsData", createRecipientsData)
-
             const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
 
             const resUpdate = updateRecipientsData.length
@@ -437,6 +103,7 @@ export const removeRecipientAsync = createAsyncThunk<
 
             const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
 
+            // return
             if (recipientId) {
                 await api.delete(`${basePath}/${recipientId}`);
                 return recipientId;
@@ -463,7 +130,11 @@ export const fetchRecipients = createAsyncThunk<
             const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
             const response = await api.get(basePath);
 
-            const data = response.data as Recipient[];
+            let data = response.data as Recipient[];
+
+            // data = data.filter((recipient, indx) => {
+            //     return recipient.type !== "CC";
+            // })
 
             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
@@ -481,21 +152,6 @@ const selectedRecipientsSlice = createSlice({
     initialState,
     reducers: {
         addRecipient: (state, action: PayloadAction<Recipient>) => {
-            
-            // 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;
                 state.recipients = [action.payload, ...state.recipients];
@@ -533,6 +189,9 @@ const selectedRecipientsSlice = createSlice({
         removeSelectedRecipient: (state, action: PayloadAction<Recipient>) => {
             state.recipients = state.recipients.filter((recipient) => recipient.uuid !== action.payload.uuid);
         },
+        removeAllRecipients: (state) => {
+            state.recipients = [];
+        },
         addColorsToRecipient: (state) => {
             for (const [index, recipient] of state.recipients.entries()) {
                 recipient.color = colors[index];
@@ -639,6 +298,7 @@ export const {
     setSelectedRecipients,
     toggleToTemplates,
     removeSelectedRecipient,
+    removeAllRecipients,
     setSigningOrder,
     addColorsToRecipient,
     updateRecipientIds,

src/store/slices/transactionSlice.tsx

@@ -23,7 +23,6 @@ const transactionSlice = createSlice({
     reducers: {
         setTransactionId: (state, action: PayloadAction<string>) => {
             const transactionId = action.payload;
-            console.log("Mic Check 2", transactionId)
             state.transactionId = transactionId;
             return state;
         },

src/types/images.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const value: string;
+  export default value;
+}

src/utlity/JoyRideTour.tsx

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

src/utlity/maskUtils.ts

@@ -1,3 +1,5 @@
+import { MASKCHARACTER } from "../components/process/processStepTwo/rightSideBar/RightSideBar";
+
 const type_all = (str: string, changeWith: string): string => {
     return str.replace(/./g, changeWith);
 };
@@ -8,12 +10,21 @@ const type_last_four = (str: string, changeWith: string): string => {
 };
 
 const type_credit_card = (str: string, changeWith: string): string => {
-    if (str.length !== 16) return str;
-    // console.log(str.replace(/\d(?=\d{4})/g, "*"), "line 11", str)
-    // return str.replace(/\d(?=\d{4})/g, `${changeWith}`);
-    return `${changeWith.repeat(4)} ${changeWith.repeat(4)} ${changeWith.repeat(4)} ${str.slice(-4)}`
+    if (str.length !== 15 && str.length !== 16) return str;
+
+    const last4 = str.slice(-4);
+    const masked = str.slice(0, -4).replace(/\d/g, changeWith);
+
+    if (str.length === 16) {
+        // Format: XXXX XXXX XXXX 1234
+        return masked.slice(0, 4) + " " + masked.slice(4, 8) + " " + masked.slice(8, 12) + " " + last4;
+    } else {
+        // 15-digit (Amex): XXXX XXXXXX X1234
+        return masked.slice(0, 4) + " " + masked.slice(4, 10) + " " + masked.slice(10, 11) + last4;
+    }
 };
 
+
 const type_national_insurance = (str: string, changeWith: string): string => {
     // str = str.slice(0, -1).replace(/[A-Za-z0-9]/g, "*") + str.slice(-1);
     // return str.replace(/\*/g, changeWith);
@@ -38,6 +49,19 @@ const type_social_insurance = (str: string, changeWith: string): string => {
 };
 
 const maskUtils = (type: string, original: string, changeWith: string): string => {
+
+    switch (changeWith) {
+        case MASKCHARACTER.ASTERISK:
+            changeWith = "*";
+            break;
+        case MASKCHARACTER.DOT:
+            changeWith = ".";
+            break;
+        case MASKCHARACTER.X:
+            changeWith = "x";
+            break;
+    }
+
     switch (type) {
         case "ALL":
             return type_all(original, changeWith);

src/utlity/tagGroupConUtils.ts

@@ -40,8 +40,6 @@ const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, conta
     const borderBottom: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='bottom']");
     const borderLeft: HTMLElement | null = document.querySelector("[border-group='" + groupElements[0].getAttribute("group") + "'][border-pos='left']");
 
-    console.log("handleGroupBorderPosition")
-
     if (borderTop !== null && dimension.maxLeft !== null && dimension.minLeft !== null) {
         borderTop.style.width = (dimension.maxLeft - dimension.minLeft) + "px";
         borderTop.style.height = "1px";

src/utlity/types.tsx

@@ -1,6 +1,6 @@
 import { JSX } from "react";
 
-export interface DroppedItem {
+export interface DroppedItemOld {
   id?: string;
   icon: JSX.Element;
   focusElementIndx?: number;
@@ -97,9 +97,9 @@ export interface TagsProperties {
   "currentTimeStamp"?: boolean;
   "decimalPlace"?: number;
   "multiSelect"?: boolean;
+  "isCurrency"?: boolean;
 }
 
-
 export enum TagsTypes {
   TEXT = "text",
   SIGNATURE = "signature",
@@ -118,8 +118,92 @@ export enum TagsTypes {
   COMPANY = "company",
 }
 
-
 export enum SignTypeEnum {
   selfSign = "self_sign",
   multipleSign = "multi_sign"
+}
+
+export interface StylesInterface {
+  font: string,
+  italic: boolean,
+  bold: boolean,
+  underline: boolean,
+  color: string,
+  textSize: number
+}
+
+export interface TagOptionAttrType {
+  label: string;
+  value: string;
+  pageIndex?: number;
+  selected?: boolean;
+  readOnly?: boolean;
+  dimensions?: Record<string, any>;
+}
+
+
+export interface DroppedItem {
+  id?: string;
+  icon: JSX.Element;
+  label?: string;
+  tooltip?: string;
+  type: string;
+
+  // TagsProperties - Other Properties depend on tag type - START
+  navigationOrder: number;
+  editable: boolean;
+
+  lastName?: boolean;
+  firstName?: boolean;
+
+  maxLength?: number;
+  minLength?: number;
+
+  dateFormat?: string;
+  format?: string;
+  currentTimeStamp?: boolean;
+
+  decimalPlace?: number;
+  isCurrency?: boolean;
+
+  multiLine?: boolean;
+  maskType?: string;
+  maskCharacter?: string;
+
+  multiSelect?: boolean;
+  options?: TagOptionAttrType[];
+
+  readOnly?: boolean;
+  error: string;
+  regex?: string[];
+  // TagsProperties - Other Properties depend on tag type - END
+
+  dimensions: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  }
+
+  styles?: StylesInterface;
+
+  recipientId: number;
+
+  documentId: string;
+  pageIndex: number;
+
+  allowSenderToEdit: true;
+  allowSenderToDelete: true;
+
+  required?: boolean;
+
+  selectedValue?: string | null;
+
+  radioGroups?: DroppedItem[];
+
+  focusElementIndx?: number;
+
+  value?: string | number;
+
+  isDeleted: boolean;
 }