hotKeys shortcuts in progress

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

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/SigningOrderDiagram .tsx

@@ -58,15 +58,11 @@ const getInitials = (name: string) => {
 
 const SigningOrderDiagram : React.FC<Signer[]> = (signers) => {
 
-    console.log(signers, "Line 59")
-
     const grouped = groupByRoutingOrder(signers.signers);
     const sortedOrders = Object.keys(grouped)
         .map(Number)
         .sort((a, b) => a - b);
 
-        console.log("sortedOrders",sortedOrders,grouped)
-
     const currentProcessingOrder =
         sortedOrders.find((order) =>
             grouped[order].some((signer) => !signer.completed)

src/components/CommonNav.tsx

@@ -49,7 +49,6 @@ const CommonNav: React.FC<AccountNavProps> = ({
 }) => {
   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);
@@ -70,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,
@@ -109,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));
@@ -151,7 +147,7 @@ const CommonNav: React.FC<AccountNavProps> = ({
   const getUserDetails = async () => {
     try {
       let res = await api.get(`/api/user/details`);
-      console.log("getuser", res);
+
       const item = res?.data;
       if (item) {
         const userData = {
@@ -166,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));
@@ -175,7 +169,6 @@ 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);

src/components/accounts/Account.tsx

@@ -108,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([])

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

@@ -25,7 +25,6 @@ const statusColorMap = {
 const TransactionDataTable = ({activeAccountId}) => {
     const navigate = useNavigate()
     const loaction = useLocation()
-    console.log("loaction", loaction.pathname);
 
     const [currentEmailId, setCurrentEmailId] = useState<string | null>('null');
     const [selectedTransactions, setSelectedTransactions] = useState<number[]>([]);

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,11 +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
@@ -133,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",
@@ -149,7 +132,6 @@ function LoginForm() {
                         transition: Bounce,
                     });
                 } else {
-                    console.log('Some Error Occurred');
                     toast.dismiss();
                     toast.error("Some Error Occurred", {
                         position: "top-center",
@@ -207,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,15 +1,20 @@
-import React from 'react'
+import React, { useState } from 'react'
-import { MdKeyboardArrowDown } from 'react-icons/md';
+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) => {
@@ -20,13 +25,16 @@ const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownToggl
                         // 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'>
+                                <div className="my-1 flex justify-center items-center gap-2 flex-wrap">
-                                    {document.pages != undefined && document.pages.map((img, indx) => (
+                                    {/* Prev Button */}
                                     <a
-                                            href={"#" + document.documentId + indx}
+                                        href={"#" + document.documentId + (currentPage - 1)}
-                                            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'
+                                        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);
+                                        }}
                                     >
-                                            <p className='text-center text-xs text-slate-600'>{indx + 1}</p>
+                                        <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/SignDocument.tsx

@@ -1,9 +1,9 @@
-import { useEffect, useLayoutEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import axios from "axios"
 import { RootState } from "../../store/store";
 import { useNavigate, useParams } from "react-router-dom"
-import { DroppedItem, DroppedItemsObj, TagsTypes } from "../../utlity/types";
+import { DroppedItem, TagsTypes } from "../../utlity/types";
 
 import Loader from "../dashboard/Loader";
 import SignCon from "../signature/SignCon";
@@ -11,24 +11,22 @@ import { Bounce, toast } from "react-toastify";
 import { useDispatch, useSelector } from "react-redux";
 import { hideLoader, showLoader } from "../../store/slices/loaderSlice";
 
-import { FaRegImage, FaFileAlt, FaSignature, FaStamp, FaCheck, FaQuestionCircle } from 'react-icons/fa'
+import { FaFileAlt, FaSignature, FaStamp, FaCheck, FaQuestionCircle } from 'react-icons/fa'
 import { IoIosDocument, IoMdClose } from 'react-icons/io'
 import { MdKeyboardArrowDown } from 'react-icons/md'
-import { TbChevronsDownLeft, TbSignature } from "react-icons/tb";
+import { TbSignature } from "react-icons/tb";
 import { BsFileArrowDownFill } from "react-icons/bs";
 import dayjs from "dayjs";
 import maskUtils from "../../utlity/maskUtils";
 import StampUpload from "../stamp/StampUpload";
-import TermsModal from "./TermsModal";
 import DocumentPages from "./DocumentPages";
 import FieldList from "../process/processStepTwo/FieldList";
 import typeToIconMap from "../../helper/iconMap";
-import { droppedTagsDefaultField } from "../process/processStepTwo/DocumentContainer";
 import SignCompletionScreen from "./SignCompletionScreen";
 import api from "../../config/api";
-import RightSideBar from "../process/processStepTwo/rightSideBar/RightSideBar";
 import { RiDragMoveFill } from "react-icons/ri";
 import { handleGroupBorderPosition } from "../../utlity/tagGroupConUtils";
+import RightSideBar from "../process/processStepTwo/rightSideBar/RightSideBar";
 
 
 
@@ -45,6 +43,7 @@ interface RecipientType {
     phone: string | null;
     index: number;
     type: string;
+    provideOwnTags: boolean;
     recipientStatus: string;
     authType: string | null;
     language: string | null;
@@ -59,7 +58,7 @@ interface pagesType {
     height: number;
     width: number;
 }
-interface DocumentType {
+export interface DocumentType {
     documentId: string;
     pages: pagesType[];
     name: string;
@@ -134,6 +133,11 @@ const fitObj = [
     },
 ]
 
+enum RightSideNav {
+    ATTRIBUTES = "attributes",
+    PAGES = "pages"
+}
+
 // Functions - LIST
 // handleSignClick - Handle when sign || Initial tag got clicked
 // fetchData - Fetch document pages and tags data
@@ -141,7 +145,6 @@ const fitObj = [
 
 
 const SignDocument = () => {
-
     const { recipientId } = useParams();
     const dispatch = useDispatch();
 
@@ -158,7 +161,7 @@ const SignDocument = () => {
 
     const [stamp, setStamp] = useState<StampTypeObj>({ open: false, blob: "" });
 
-    console.log(recSignStatus, "recSignStatus")
+    const [rightSideNavToggle, setRightSideNavToggle] = useState<RightSideNav>(RightSideNav.PAGES);
 
     // Handling Date Opacity 
     const [dateValues, setDateValues] = useState<{ [key: string]: string }>({});
@@ -232,8 +235,6 @@ const SignDocument = () => {
     }, [droppedItems])
 
 
-    console.log(droppedItems, "{droppedItems[selectedTag.key][selectedTag.index]}")
-
     useEffect(() => {
         if (recSignStatus === "COMPLETED") {
             // setHideTags(true);
@@ -352,6 +353,8 @@ const SignDocument = () => {
                     setTransaction(res?.data?.transaction)
                     setRecSignStatus(res?.data?.status)
 
+                    if (res?.data?.details.provideOwnTags) setRightSideNavToggle(RightSideNav.ATTRIBUTES)
+
                     if ("provideOwnTags" in res?.data?.details && res?.data?.details.provideOwnTags) {
                         setProvideTags(true)
                     }
@@ -372,9 +375,23 @@ const SignDocument = () => {
             });
     }
 
-
+    const handleToastError = (msg: string) => {
+        toast.dismiss();
+        toast.error(msg, {
+            position: "top-center",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: false,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+            theme: "light",
+            transition: Bounce,
+        });
+    }
 
     const handleFormSubmit = () => {
+
         // e.preventDefault();
         const submitData: TagsSubmitDataObj = {
             tags: []
@@ -398,37 +415,14 @@ const SignDocument = () => {
             }
         }
 
-
         if (signInitialsCount !== Object.keys(signConfObj).length) {
-            toast.error("Please ensure all signature and initials are signed", {
+            handleToastError("Please ensure all signature and initials are signed")
-                position: "bottom-right",
-                autoClose: 5000,
-                hideProgressBar: false,
-                closeOnClick: false,
-                pauseOnHover: true,
-                draggable: true,
-                progress: undefined,
-                theme: "light",
-                transition: Bounce,
-            });
             return;
         }
 
         for (const tag of droppedItems) {
-
+            if ("required" in tag && tag.required && ((tag.type !== "SIGNATURE" && tag.type !== "INITIALS") && (tag.value === undefined || tag.value === null || tag.value === "" || !("value" in tag)))) {
-            // if ((tag.type === "SIGNATURE" || tag.subType === "INITIALS") && !tag.value) {
+                handleToastError(`${tag.label} is required`)
-            if (("required" in tag && tag.required) && ((tag.type !== "SIGNATURE" && tag.type !== "INITIALS") && (tag.value === "" || !("value" in tag)))) {
-                toast.error(`${tag.label} is required`, {
-                    position: "bottom-right",
-                    autoClose: 5000,
-                    hideProgressBar: false,
-                    closeOnClick: false,
-                    pauseOnHover: true,
-                    draggable: true,
-                    progress: undefined,
-                    theme: "light",
-                    transition: Bounce,
-                });
                 return;
             }
 
@@ -453,39 +447,7 @@ const SignDocument = () => {
             }
         }
 
-        // for (const tag of tagJson) {
+        // return;
-        //     if (data[tag.id as string]) {
-        //         const tagData: TagSubmitData = {
-        //             id: tag.id as string,
-        //             type: tag.type,
-        //             subType: tag.subType ? tag.subType : "",
-        //             signed: true,
-        //             value: data[tag.id as string] as string
-        //         }
-        //         submitData.tags.push(tagData)
-        //     }
-
-        //     if (tag.type === "SIGNATURE") {
-        //         submitData.tags.push({
-        //             id: tag.id as string,
-        //             type: "SIGNATURE",
-        //             subType: "DRAW",
-        //             signed: true,
-        //             value: ""
-        //         })
-        //     }
-
-        //     if (tag.type === "INITIALS") {
-        //         submitData.tags.push({
-        //             id: tag.id as string,
-        //             type: "INITIALS",
-        //             subType: "DRAW",
-        //             signed: true,
-        //             value: ""
-        //         })
-        //     }
-
-        // }
 
         dispatch(showLoader("Signing ..."));
         axios.post(`${import.meta.env.VITE_BASE_URI}/api/sign?recipientId=${recipientId}`, submitData, { headers: { "ngrok-skip-browser-warning": "69420", } })
@@ -608,6 +570,58 @@ const SignDocument = () => {
     }
 
 
+    const handlePrefillValues = () => {
+        const prefilledTags = ["NAME", "EMAIL", "TEXT", "COMPANY", "TEMPORAL"]
+
+        const updatedItems = droppedItems.map((item, index) => {
+            if (prefilledTags.includes(item.type)) {
+
+                let value = null;
+                let isUpdate = false
+
+                switch (item.type) {
+                    case "NAME":
+                        value = recipient?.firstName + " " + recipient?.lastName;
+                        isUpdate = true;
+                        break;
+                    case "EMAIL":
+                        value = recipient?.email;
+                        isUpdate = true;
+                        break;
+                    case "TEXT":
+                        value = item.value;
+                        isUpdate = true;
+                        break;
+                    case "COMPANY":
+                        value = item.value;
+                        isUpdate = true;
+                        break;
+                    case "TEMPORAL":
+                        if (item.currentTimeStamp) isUpdate = true;
+                        if (isUpdate) {
+                            value = dayjs(Date.now()).format(item.format);
+                        }
+                        break;
+                    default:
+                        break;
+                }
+                return { ...item, value }
+            } else {
+                return item
+            }
+        })
+
+        setDroppedItems(updatedItems);
+    }
+
+
+    useEffect(() => {
+        if (droppedItems.length > 0) {
+            handlePrefillValues();
+        }
+    }, [droppedItems.length])
+
+
     // HANDLE DROP - START
     const handleDrop = (event: React.DragEvent<HTMLDivElement>, docId: string, documentId: number, pageIndex: number) => {
         event.preventDefault();
@@ -689,7 +703,7 @@ const SignDocument = () => {
             isDeleted: false
         }
 
-        if(prepData.type === "NAME") {
+        if (prepData.type === "NAME") {
             prepData.firstName = true
             prepData.lastName = true
         }
@@ -848,18 +862,13 @@ const SignDocument = () => {
     // Updated handleRemoveTag function with your existing API logic and group handling
     const handleRemoveTag = (key: string, targetIndex: number) => {
 
-
-        console.log("Removing tag:", key, targetIndex, droppedItems);
-
         const tag: DroppedItem = droppedItems[targetIndex];
         const recipientId = tag.recipientId;
 
-        console.log(tag, "line 776");
-
         (async () => {
             if ("id" in tag) {
                 try {
-                    const response = await api.delete(`/api/sign/tags?recipientId=${recipientId}`, { data: [ { tagId: tag.id } ] })
+                    const response = await api.delete(`/api/sign/tags?recipientId=${recipientId}`, { data: [{ tagId: tag.id }] })
                     if (response.status !== 200) throw "Tag Deletion error"
                 } catch (err) {
                     return;
@@ -927,7 +936,6 @@ const SignDocument = () => {
                     // }, 100);
                 }
             } else {
-                console.log("Listening to 895")
                 // Handle non-group item removal (your existing logic)
                 setDroppedItems(prevState => prevState.filter((item, idx) => {
                     return idx !== targetIndex;
@@ -936,7 +944,10 @@ const SignDocument = () => {
         })()
     };
 
-    console.log(droppedItems, "droppedItems Line 934")
+
+    const handleSetIsFields = (setTo: boolean) => {
+        if (setTo !== isFields) setIsFields(setTo);
+    }
 
 
     // const [showTerms, setShowTerms] = useState<boolean>(true);
@@ -990,6 +1001,19 @@ const SignDocument = () => {
                             </div>
                             {/* FIT - END */}
 
+                            {provideTags && <div
+                                onClick={() => handleSetIsFields(true)}
+                                className={`flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${isFields ? 'bg-slate-100' : ''}`}>
+                                <IoIosDocument />
+                                <p className='tracking-wide'>Fields</p>
+                            </div>}
+
+                            <div
+                                onClick={() => handleSetIsFields(provideTags ? false : !isFields)}
+                                className={`flex items-center gap-1 cursor-pointer text-xs px-2 py-1 rounded-sm ${!isFields ? 'bg-slate-100' : ''}`}>
+                                <IoIosDocument />
+                                <p className='tracking-wide'>Pages</p>
+                            </div>
 
                         </div>
 
@@ -1032,10 +1056,11 @@ const SignDocument = () => {
 
                             {/* Send */}
                             {(!transparentTags && !hideTags) ? <button
+                                onClick={handleFormSubmit}
                                 // onClick={() => handleFormSubmitBtnClick()}
                                 className='flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)] outline-none'>
                                 <p
-                                    onClick={handleFormSubmit}
+
                                     id="sign-client-side-btn"
                                     className='tracking-wide text-white'>
                                     Sign
@@ -1059,17 +1084,21 @@ const SignDocument = () => {
                         {/* <div className="lg:col-span-2 bg-slate-100 h-full p-4 overflow-y-auto"></div> */}
                         <div
                             id="tags-list-client-side"
-                            className={`col-span-2 h-full p-4 overflow-y-auto ${provideTags ? "bg-white" : "order-last"}`}>
+                            className={`col-span-2 h-full ${isFields ? "p-4" : ""} overflow-y-auto bg-white ${!provideTags && isFields ? "hidden" : ""}`}>
-                            {recipientId && provideTags && <FieldList color={"#8f87f1"} recipientId={Number(recipientId)} recipientIndx={0} acntId={"1"} />}
+                            {isFields && recipientId && provideTags && <FieldList color={"#8f87f1"} recipientId={Number(recipientId)} recipientIndx={0} acntId={"1"} />}
+
+                            {!isFields && <DocumentPages
+                                selectedDocuments={selectedDocuments}
+                                setDropDownTogglePage={setDropDownTogglePage}
+                                dropDownTogglePage={dropDownTogglePage} />}
+
                         </div>
-
-
                         {/* Pages - END */}
 
                         {/* Main container */}
                         <div
                             id="doc-con"
-                            className="zoom-con relative col-span-8 px-4 bg-slate-100 h-full w-full overflow-auto scroll-smooth"
+                            className={`zoom-con relative ${!isFields || (isFields && provideTags) ? "col-span-10" : "col-span-12"} px-4 bg-slate-100 h-full w-full overflow-auto scroll-smooth transition-all duration-200`}
                         >
 
                             {
@@ -1098,12 +1127,9 @@ const SignDocument = () => {
 
                                                                 {!hideTags && <>
 
-
                                                                     {currDocTags.map((item, index) => {
                                                                         if (item.pageIndex !== page.index || item.documentId != doc.documentId) return <></>;
                                                                         return (
-                                                                            <>
-
                                                                             <div
                                                                                 tabIndex={1}
                                                                                 onFocus={() => {
@@ -1111,7 +1137,7 @@ const SignDocument = () => {
                                                                                     setFocusElement({ ...item, focusElementIndx: index })
                                                                                 }
                                                                                 }
-                                                                                    key={item.id}
+                                                                                key={index}
                                                                                 // onPointerDown={(e) => handleTagMouseDown(e, key, index)}
                                                                                 className="absolute rounded dropped-item text-sm"
                                                                                 // onClick={() => handleTagClick(key, index)}
@@ -1147,7 +1173,6 @@ const SignDocument = () => {
                                                                                             </p> */}
                                                                                                 <p className='capitalize text-ellipsis whitespace-nowrap'>{item.label}</p>
                                                                                                 <IoMdClose onClick={(e) => {
-                                                                                                        console.log("Handle Remove Tag Called");
 
                                                                                                     e.stopPropagation();
                                                                                                     handleRemoveTag(key, index)
@@ -1162,7 +1187,7 @@ const SignDocument = () => {
                                                                                     <div
                                                                                         id={item.id}
                                                                                         tabIndex={1}
-                                                                                            className={`h-full text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
+                                                                                        className={`max-h-max text-[14px] font-medium w-full border-slate-100 rounded ${(transparentTags || hideTags) ? "pointer-events-nones" : "bg-slate-200 shadow-sm opacity-80"} flex justify-start items-end`}
                                                                                     // style={{ height: item.dimensions.height + "px" }}
                                                                                     >
 
@@ -1176,7 +1201,7 @@ const SignDocument = () => {
                                                                                             !item.multiLine && !item.maskType && <p
                                                                                                 // name={item.id}
                                                                                                 // style={{ height: item.dimensions.height + "px" }}
-                                                                                                    onInput={(e) => {
+                                                                                                onBlur={(e) => {
                                                                                                     const val = e.currentTarget.textContent;
                                                                                                     handleTagUpdate(index, val as string);
                                                                                                 }}
@@ -1185,24 +1210,25 @@ const SignDocument = () => {
                                                                                                 }}
                                                                                                 contentEditable={true}
                                                                                                 className="outline-none whitespace-nowrap w-full max-h-max"
-                                                                                                ></p>
+                                                                                            >{item.value ?? ""}</p>
                                                                                         }
                                                                                         {
                                                                                             item.multiLine && !item.maskType && <p
-                                                                                                    onInput={(e) => {
+                                                                                                suppressContentEditableWarning
+                                                                                                onBlur={(e) => {
                                                                                                     const val = e.currentTarget.textContent;
                                                                                                     handleTagUpdate(index, val as string);
                                                                                                 }}
                                                                                                 contentEditable={true}
                                                                                                 className="w-full outline-none max-h-max"
-                                                                                                ></p>
+                                                                                            >{item.value ?? ""}</p>
                                                                                         }
                                                                                         {
                                                                                             "maskType" in item && "maskCharacter" in item && item.maskType && <p
-                                                                                                    onInput={(e) => {
+                                                                                                // onBlur={(e) => {
-                                                                                                        const val = e.currentTarget.textContent;
+                                                                                                //     const val = e.currentTarget.textContent;
-                                                                                                        handleTagUpdate(index, val as string);
+                                                                                                //     handleTagUpdate(index, val as string);
-                                                                                                    }}
+                                                                                                // }}
                                                                                                 onKeyDown={(e) => {
                                                                                                     if (e.key === "Enter") e.preventDefault();
                                                                                                 }}
@@ -1210,6 +1236,7 @@ const SignDocument = () => {
                                                                                                 // }}
                                                                                                 onBlur={(e) => {
                                                                                                     let val = e.target.textContent;
+                                                                                                    handleTagUpdate(index, val as string);
                                                                                                     if (typeof item.maskType === "string" && typeof val === "string" && item.maskCharacter) {
                                                                                                         val = val.replace(/ /g, "");
                                                                                                         e.target.textContent = maskUtils(item.maskType, val, item.maskCharacter)
@@ -1268,7 +1295,7 @@ const SignDocument = () => {
                                                                                                 // contentEditable={true}
                                                                                                 className="outline-none whitespace-nowrap w-full max-h-max"
                                                                                             >
-                                                                                                    {recipient?.email || ""}
+                                                                                                {item.value ?? ""}
                                                                                             </p>
                                                                                         }
                                                                                     </div>
@@ -1304,10 +1331,7 @@ const SignDocument = () => {
                                                                                                 // contentEditable={true}
                                                                                                 className="outline-none whitespace-nowrap w-full max-h-max"
                                                                                             >
-                                                                                                   {item.firstName && recipient?.firstName+" " } 
+                                                                                                {item.value ?? ""}
-                                                                                                   {item.lastName && recipient?.lastName } 
-
-                                                                                                   
                                                                                             </p>
                                                                                         }
                                                                                     </div>
@@ -1325,6 +1349,10 @@ const SignDocument = () => {
                                                                                     >
                                                                                         {
                                                                                             <input
+                                                                                                onInput={(e) => {
+                                                                                                    const val = e.currentTarget.value;
+                                                                                                    handleTagUpdate(index, val as string);
+                                                                                                }}
                                                                                                 type="number"
                                                                                                 className="outline-none h-full max-w-max"
                                                                                             />
@@ -1496,6 +1524,10 @@ const SignDocument = () => {
                                                                                         <select
                                                                                             name={item.id}
                                                                                             className="outline-none"
+                                                                                            onInput={(e) => {
+                                                                                                const val = e.currentTarget.value;
+                                                                                                handleTagUpdate(index, val as string);
+                                                                                            }}
                                                                                         >
                                                                                             <option value="">Select</option>
                                                                                             {item.options && item.options.map((obj, indx) => {
@@ -1529,7 +1561,7 @@ const SignDocument = () => {
                                                                                         <p
                                                                                             style={{ opacity: `${item.id === isDateOpen ? "0" : "100"}` }}
                                                                                             className="w-full h-full rounded pl-1 pt-1 whitespace-nowrap">
-                                                                                                {(item.id && item.id in dateValues) ? dateValues[item.id] : item.dateFormat?.toLowerCase()}
+                                                                                            {(item.id && item.id in dateValues) ? dateValues[item.id] : item.value ? item.value : item.dateFormat?.toLowerCase()}
                                                                                         </p>
                                                                                         <input
                                                                                             name={item.id}
@@ -1550,6 +1582,10 @@ const SignDocument = () => {
                                                                                                     [item.id as string]: dayjs(val).format(item.format)
                                                                                                 })
                                                                                             }}
+                                                                                            onInput={(e) => {
+                                                                                                const val = e.currentTarget.value;
+                                                                                                handleTagUpdate(index, val as string);
+                                                                                            }}
                                                                                             style={{ opacity: `${item.id === isDateOpen ? "100" : "0"}` }}
                                                                                             className="w-full px-2 outline-none absolute"
                                                                                             onClick={() => {
@@ -1613,8 +1649,7 @@ const SignDocument = () => {
                                                                                         </div>
                                                                                     </>
                                                                                 }
-                                                                                </div >
+                                                                            </div>
-                                                                            </>
                                                                         )
                                                                     })
                                                                     }
@@ -1662,16 +1697,9 @@ const SignDocument = () => {
 
                         </div>
 
-                        <div className={`col-span-2 ${provideTags ? "" : "order-first"} overflow-y-auto`}>
-                            {/* <DocumentPages
-                                selectedDocuments={selectedDocuments}
-                                setDropDownTogglePage={setDropDownTogglePage}
-                                dropDownTogglePage={dropDownTogglePage} /> */}
-
-
-
-
                             {provideTags && selectedTag && selectedTag !== null && "key" in selectedTag && "index" in selectedTag &&
+                        <div className={`col-span-2 ${provideTags ? "" : "order-first"} h-full ${!isFields ? "bg-white" : isFields && provideTags ? "bg-white" : ""} overflow-y-auto`}>
+                            {/* Right Side Attributes Section if providedTags - START */}
                                 <RightSideBar
                                     droppedItems={droppedItems}
                                     selectedTag={droppedItems[selectedTag.index]}
@@ -1679,11 +1707,10 @@ const SignDocument = () => {
                                     selTagKey={selectedTag.key}
                                     selTagIndx={selectedTag.index}
                                     signClient={true}
-                                />}
+                                />
-
+                            {/* Right Side Attributes Section if providedTags - END */}
-
-
                         </div>
+                                }
 
                         {/* Right Side - START */}
                         {/* <div className="col-span-2 bg-slate-100 h-full p-4 overflow-y-auto">

src/components/contacts/Contacts.tsx

@@ -25,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)
@@ -46,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")
@@ -55,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}`)

src/components/contacts/ContactsFormModal.tsx

@@ -55,7 +55,6 @@ const ContactFormModal = ({
   }, [actionStatus, editJsonData]);
 
   const handleChange = (field: keyof ContactData, value: string) => {
-    console.log(field, value);
     setFormData((prev) => ({ ...prev, [field]: value }));
     if (errors[field]) {
       setErrors((prev) => ({ ...prev, [field]: "" }));
@@ -136,7 +135,6 @@ const ContactFormModal = ({
     const validationErrors = validate();
     let type = "Add";
     let payload = formData;
-    console.log(payload);
 
     if (Object.keys(validationErrors).length > 0) {
       setErrors(validationErrors);

src/components/dashboard/Dashboard.tsx

@@ -47,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())
@@ -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)

src/components/dashboard/NavLink.tsx

@@ -25,7 +25,6 @@ const NavLink: React.FC<NavLinkProps> = ({ to, icon, label, showSideBar, menuPat
 
   const location = useLocation();
   const isActive = menuPathMap[location.pathname] === label;
-  console.log('Line 26' , to, icon, label, showSideBar, menuPathMap , "Check" , menuPathMap[location.pathname] === label)
 
   // const [transactionFilter, setTransationFilter] = useState<TransactionFilterEnum>(TransactionFilterEnum.ALL)
 

src/components/home/Home.tsx

@@ -72,9 +72,6 @@ const Home = () => {
 
     const userData = useSelector((state: RootState) => state.user);
 
-    console.log("activeAccountId", activeAccountId);
-    console.log("cards", cards);
-
     const getDashboardData = async () => {
         if (!activeAccountId) return;
 
@@ -86,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

@@ -24,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()

src/components/home/StartSection.tsx

@@ -125,13 +125,13 @@ const StartSection = () => {
             </div>
 
             {/* Recent Data Section */}
-            <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-2 mt-5">
+            <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 className="w-full">
+                {/* <section className="w-full">
                     <TemplateTable />
-                </section>
+                </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

@@ -201,7 +201,6 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
 const DocumentSubmissionOptions = () => {
     const location = useLocation();
     const [status, setStatus] = useState(null);
-    console.log("location.pathname", location.pathname, status)
     const { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
     const [showConfetti, setShowConfetti] = React.useState(true)
     if (!accountId || !transactionId) {
@@ -216,7 +215,6 @@ const DocumentSubmissionOptions = () => {
     const selectedRecipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
     // const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
     const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
-    console.log('Line 218', selectedDocuments)
     const [transactionData, setTransactionData] = useState({})
 
 
@@ -267,10 +265,6 @@ const DocumentSubmissionOptions = () => {
         }
     }, [showConfetti]);
 
-
-    console.log("History length:", window.history.length);
-
-
     // Step 1: Fetch transaction status
     useEffect(() => {
         const fetchTransaction = async () => {

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

@@ -39,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;
@@ -87,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
@@ -103,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");
     }
   }
 

src/components/process/processStepOne/ProcessStepOne.tsx

@@ -31,7 +31,7 @@ const ProcessStepOne = () => {
   const templateId = useParams<{ templateId: string }>().templateId;
   let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
   const [searchParams] = useSearchParams();
-  console.log("searchParams", searchParams.get('useTemplate'))
+
   const isTamplate = searchParams.get('useTemplate')
 
   const navigate = useNavigate();
@@ -47,22 +47,11 @@ 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('')
 
-  console.log()
   const userData = useSelector((state: RootState) => state.user)
   // ProcessStepOne.tsx
   const topRef = useRef<HTMLDivElement | null>(null);
@@ -83,15 +72,9 @@ const ProcessStepOne = () => {
     }, 5000); // hide icon while typing, show it again after 500ms of no input
   };
 
-  // const userData = useSelector((state: RootState) => state.user)
-
   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}`);
@@ -105,38 +88,27 @@ const ProcessStepOne = () => {
           { subject: res.data.subject ? res.data.subject : "Documents for Signature", message: res.data.message ? res.data.message : "" }
         )
 
-        // console.log("setTransactionDetails",res.data)
       } 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 (saveAndClose: boolean = false) => {
@@ -172,7 +144,6 @@ const ProcessStepOne = () => {
       if (SignTypeEnum.selfSign === signType) formError.recipients = false;
 
       if (formError.documents || formError.recipients || formError.subject || formError.recipientEmailAndLastName) {
-        console.log(selectedDocuments, 'line 193')
         toast.dismiss();
         toast.error(`${formError.documents ? "Add Document" : ""} 
           ${(formError.documents && formError.recipients) ? " | " : ""} 
@@ -216,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,
@@ -249,11 +227,10 @@ const ProcessStepOne = () => {
         await Promise.all(
           selectedRecipients.map((recipient) => dispatch(removeRecipientAsync({
             recipientId: recipient.id,
-            email: recipient.email,
             accountId,
             transactionId,
-          }))
+            email: recipient.email,
-          )
+          })))
         );
 
         recipientsDataTemp = [{
@@ -274,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 {
@@ -288,7 +267,8 @@ const ProcessStepOne = () => {
         }
 
       } else {
-        await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
+        if(!accountId || !transactionId) return;
+        dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
       }
       dispatch(showLoader("Processing Message..."));
 
@@ -298,11 +278,6 @@ const ProcessStepOne = () => {
         status: "CREATED"
       })
 
-      // if (isSendNow) {
-      //   dispatch(updateTransactionStatus(TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS));
-      // }
-      // else {
-      // setTimeout(() => {
       dispatch(resetDocuments())
       dispatch(resetRecipients())
       if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) {
@@ -398,7 +373,7 @@ const ProcessStepOne = () => {
             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
@@ -447,13 +422,13 @@ const ProcessStepOne = () => {
                 (signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) &&
                 <div className="flex flex-col gap-4 align-start">
 
-                  <RecipientCards transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase} editRecipient={editRecipient} setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} editRecipientCurrentEmail={editRecipientCurrentEmail} />
+                  <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 transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase} topRef={topRef} setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} />
+                    <RecipientAddCard userEmail={userData.email} getMinRoutingOrder={getMinRoutingOrder} transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase} topRef={topRef} setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} />
                   </div>
 
                 </div>
@@ -479,7 +454,7 @@ const ProcessStepOne = () => {
 
               {/* Message */}
               <div className='flex flex-col'>
-                <label className='text-sm font-medium text-[var(--greyTextCol)] mb-1'>Message for Signers</label>
+                <label className='text-sm font-medium text-[var(--greyTextCol)] mb-1'>Message</label>
                 <textarea
                   rows={4}
                   value={emailDtls.message}

src/components/process/processStepOne/RecipientAddCard.tsx

@@ -26,13 +26,12 @@ export interface ContactTypeObj {
 }
 
 
-const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef, setEditRecipientCurrentEmail }) => {
+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);
-  console.log("recipients.length in AddCase", recipients)
   
   const [contactData, setContactData] = useState<ContactTypeObj>({ type: "", contacts: [] });
   const [openContactModal, setOpenContactModal] = useState(false);
@@ -40,7 +39,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
   const dispatch = useDispatch<AppDispatch>();
   const formRef = useRef<HTMLFormElement | null>(null);
 
-  const [recipient, setRecipients] = useState<Recipient>({ uuid: null, newOne: false, firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: 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)
 
@@ -59,10 +58,6 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
     type: false,
   });
 
-
-
-  console.log(recipient)
-
   useEffect(() => {
     if (openContactModal) {
       if (topRef?.current) {
@@ -82,9 +77,9 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
         (r.email && r.email === editRecipient?.email)
       );
     });
-    console.log("Line 83", exists)
+
     if (editCase === "Edit" && editRecipient) {
-      console.log("editRecipientAdd", editRecipient)
+
       if (!exists) {
         // Recipient was deleted -> reset
         setEditCase('');
@@ -221,9 +216,11 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
         updatedRecipient.hostEmail = "";
       }
 
+      
       if (editCase === "Edit") {
         dispatch(updateRecipient(updatedRecipient));
       } else {
+        updatedRecipient.routingOrder = 1;
         dispatch(addRecipient({
           ...updatedRecipient,
           uuid: uuidv4(),
@@ -269,6 +266,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
 
 
   const handleFocus = async (field: "firstName" | "lastName" | "email") => {
+
     setManualFocusTriggered(true);
     setOpenContactModal(true);
     setActiveField(field);
@@ -278,7 +276,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
       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);
@@ -296,11 +294,11 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
 
 
   useDebouncedEffect(() => {
-    console.log("useDebouncedEffect")
     if (!activeField || !manualFocusTriggered) return;
     
-    const inputValue = recipient[activeField].trim().toLowerCase();
 
+    const inputValue = recipient[activeField].trim().toLowerCase();
+    console.log(inputValue, "Line 297", activeField)
     if (inputValue.length === 0) {
       setFilteredContacts(cachedContacts);
       setContactData({ type: activeField, contacts: cachedContacts });
@@ -320,12 +318,21 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
       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);
@@ -486,7 +493,7 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
               onBlur={handleContactModalBlur}
               value={recipient.firstName}
               placeholder="First Name"
-              className={` w-full px-4 py-2 border rounded-md text-sm focus:outline-none transition
+              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 });
@@ -600,12 +607,12 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
             ))}
           </div>
 
-          <button
+         {!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>
+          </button>}
         </div>
       </form>
     </div>

src/components/process/processStepOne/RecipientCards.tsx

@@ -26,6 +26,8 @@ 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;
@@ -36,11 +38,10 @@ type CardsData = {
 };
 
 
-const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle, editRecipient, editCase, setEditRecipientCurrentEmail, editRecipientCurrentEmail }: 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 }>();
 
-
     const dispatch = useDispatch();
 
     if (!transactionId) {
@@ -59,12 +60,15 @@ 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{
+        } else {
             setEditRecipientCurrentEmail(recipient.id)
         }
     }
@@ -148,11 +152,13 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
                                     {recipients.length > 1 ? <div className="relative">
                                         <input
                                             type="number"
-                                            value={recipient.routingOrder || 1}
+                                            value={recipient.routingOrder ? recipient.routingOrder : ""}
-                                            min={1}
+                                            // min={1}
-                                            onChange={(e) =>
+                                            onChange={(e) => {
-                                                handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
+                                                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" /> */}
@@ -160,7 +166,7 @@ const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateTogg
                                         : <input
                                             type="number"
                                             disabled
-                                            value={recipient.routingOrder || 1}
+                                            value={recipient.routingOrder}
                                             min={1}
                                             onChange={(e) =>
                                                 handleOrderChange(recipient.id || recipient.email, Number(e.target.value))

src/components/process/processStepOne/SelectedDocuments.tsx

@@ -52,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 }))

src/components/process/processStepOne/SelfSignWarnModal.tsx

@@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
 
 type PropsType = {
     setShowSelfSignWarnModal: (val: boolean) => void;
-    onConfirm: () => void;
+    onConfirm?: () => void;
 };
 
 const SelfSignWarnModal = ({ setShowSelfSignWarnModal }: PropsType) => {

src/components/process/processStepTwo/DroppedItemsTagsCon.tsx

@@ -0,0 +1,626 @@
+// Functions - START
+// -- handleTagClick
+// -- handleRemoveTag
+// -- handleTagMouseDown
+// -- handleExpandTag
+// -- removeGroupBorders
+// -- handleIGroupBorderPosition
+// -- handleGroupBorderPosition
+// -- handleAddGroupItemClicked
+
+import React, { useEffect, useRef } from 'react'
+import { DroppedItemsObj } from './DocumentContainer';
+import typeToIconMap from '../../../helper/iconMap';
+import { IoMdClose } from 'react-icons/io';
+import { IoAdd } from 'react-icons/io5';
+import { FaQuestionCircle } from 'react-icons/fa';
+import api from '../../../config/api';
+import { Recipient } from '../../../store/slices/selectedRecipientsSlice';
+
+interface DroppedItemsTagsConProps {
+    droppedItems: DroppedItemsObj;
+    pageIdkey: string;
+    selectedTag: { key: string; index: number } | null;
+    selectedRecipients: Recipient[];
+    setSelectedTag: React.Dispatch<React.SetStateAction<{ key: string; index: number } | null>>;
+    setDroppedItems: React.Dispatch<React.SetStateAction<DroppedItemsObj>>;
+    accountId: string;
+    transactionId: string;
+    transactionTemplateToggle: string;
+}
+
+const DroppedItemsTagsCon: React.FC<DroppedItemsTagsConProps> = ({
+    droppedItems,
+    pageIdkey,
+    selectedTag,
+    selectedRecipients,
+    setSelectedTag,
+    setDroppedItems,
+    accountId,
+    transactionId,
+    transactionTemplateToggle
+}) => {
+
+    const positionRef = useRef<{ left: number; top: number }>({ left: 0, top: 0 });
+
+    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;
+
+        positionRef.current = { left: event.clientX - containerRect.left - offsetX, top: event.clientY - containerRect.top - offsetY };
+
+        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));
+
+            // Save in ref (fast, no re-render)
+            positionRef.current = { left, top };
+
+            // Update DOM directly
+            targetElement!.style.top = `${top}px`;
+            targetElement!.style.left = `${left}px`;
+
+            // 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);
+                });
+            }
+
+            const { left, top } = positionRef.current;
+            setDroppedItems(prevState => ({
+                ...prevState,
+                [key]: Array.isArray(prevState[key])
+                    ? prevState[key].map((item, i) =>
+                        i === index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
+                    )
+                    : [],
+            }));
+
+
+            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) => {
+        event.preventDefault(); // Prevent text selection issues
+
+        const expandingElemIcon = event.currentTarget;
+        const targetElement = expandingElemIcon.nextElementSibling?.parentElement;
+        const targetContainer = targetElement?.parentElement;
+
+        if (!targetContainer || !targetElement) return;
+
+        const elementRect = targetElement.getBoundingClientRect();
+
+        const startX = event.clientX;
+        const startY = event.clientY;
+
+        const startWidth = elementRect.width;
+        const startHeight = elementRect.height;
+
+        const handleMouseMove = (event: MouseEvent) => {
+
+            let newWidth = startWidth + (event.clientX - startX);
+            let newHeight = startHeight + (event.clientY - startY);
+
+            if (newHeight > 200 || newWidth > 400) {
+                if (newHeight > 200) {
+                    newHeight = 200
+                }
+
+                if (newWidth > 400) {
+                    newWidth = 400
+                }
+            }
+
+            // Apply the new width & height
+            setDroppedItems({
+                ...droppedItems,
+                [key]: Array.isArray(droppedItems[key]) // Ensure it's an array
+                    ? droppedItems[key].map((item, i) =>
+                        i === index ? { ...item, dimensions: { ...item.dimensions, width: newWidth, height: newHeight }, update: true } : item
+                    )
+                    : [], // Provide a fallback in case it's undefined or not an array
+            });
+
+        };
+
+        const handleMouseUp = () => {
+            document.removeEventListener("pointermove", handleMouseMove);
+            document.removeEventListener("pointerup", handleMouseUp);
+        };
+
+        document.addEventListener("pointermove", handleMouseMove);
+        document.addEventListener("pointerup", handleMouseUp);
+    };
+    // HANDLE EXPAND TAG - END
+
+    const removeGroupBorders = (groupId: string) => {
+        console.log(`Removing borders for group: ${groupId}`);
+
+        const borderPositions = ['top', 'right', 'bottom', 'left'];
+
+        borderPositions.forEach(position => {
+            const borderElement = document.querySelector(`[border-group='${groupId}'][border-pos='${position}']`);
+            if (borderElement && borderElement.parentNode) {
+                borderElement.parentNode.removeChild(borderElement);
+            }
+        });
+    };
+
+    const handleIGroupBorderPosition = (groupId: string) => {
+        const groupElements: NodeListOf<HTMLElement> = document.querySelectorAll(`div[group="${groupId}"]`);
+
+        if (groupElements.length === 0) {
+            console.log("No group elements found for:", groupId);
+            return;
+        }
+
+        let targetContainer = groupElements[0].parentElement?.parentElement;
+
+        if (!targetContainer) {
+            console.log("No target container found");
+            return;
+        }
+
+        const containerRect = targetContainer.getBoundingClientRect();
+
+        // Use consistent offset values
+        const offsetX = 10;
+        const offsetY = 10;
+
+        // Ensure DOM is fully updated before positioning
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY);
+            });
+        });
+    };
+
+    const handleGroupBorderPosition = (groupElements: NodeListOf<HTMLElement>, containerRect: DOMRect, offsetX: number, offsetY: number) => {
+        if (!groupElements || groupElements.length === 0) return;
+
+        const groupId = groupElements[0].getAttribute('group');
+        if (!groupId) return;
+
+        // Calculate the bounding box of all group elements
+        let minLeft = Infinity, minTop = Infinity, maxRight = -Infinity, maxBottom = -Infinity;
+
+        groupElements.forEach(element => {
+            const parentElement = element.parentElement;
+            if (!parentElement) return;
+
+            const rect = parentElement.getBoundingClientRect();
+            const relativeLeft = rect.left - containerRect.left;
+            const relativeTop = rect.top - containerRect.top;
+            const relativeRight = relativeLeft + rect.width;
+            const relativeBottom = relativeTop + rect.height;
+
+            minLeft = Math.min(minLeft, relativeLeft);
+            minTop = Math.min(minTop, relativeTop);
+            maxRight = Math.max(maxRight, relativeRight);
+            maxBottom = Math.max(maxBottom, relativeBottom);
+        });
+
+        // Add some padding around the group
+        const padding = 10;
+        minLeft -= padding;
+        minTop -= padding;
+        maxRight += padding;
+        maxBottom += padding;
+
+        const width = maxRight - minLeft;
+        const height = maxBottom - minTop;
+
+        // Update or create border elements
+        const borderPositions = ['top', 'right', 'bottom', 'left'];
+
+        borderPositions.forEach(position => {
+            let borderElement = document.querySelector(`[border-group='${groupId}'][border-pos='${position}']`) as HTMLElement;
+
+            if (!borderElement) {
+                // Create border element if it doesn't exist
+                borderElement = document.createElement('div');
+                borderElement.className = `group-border ${position === 'bottom' ? 'bottom-border' : ''}`;
+                borderElement.setAttribute('border-group', groupId);
+                borderElement.setAttribute('border-pos', position);
+
+                // Add the + icon for bottom border
+                if (position === 'bottom') {
+                    const addIcon = document.createElement('div');
+                    addIcon.innerHTML = '<IoAdd />'; // You might need to adjust this based on your icon system
+                    addIcon.onclick = () => {
+                        // Find the original item to pass to handleAddGroupItemClicked
+                        const originalItem = droppedItems[key]?.find(item => 'group' in item && item.group === groupId);
+                        if (originalItem) {
+                            handleAddGroupItemClicked(key, originalItem);
+                        }
+                    };
+                    borderElement.appendChild(addIcon);
+                }
+
+                // Append to container
+                groupElements[0].parentElement?.parentElement?.appendChild(borderElement);
+            }
+
+            // Position the border element
+            borderElement.style.position = 'absolute';
+            borderElement.style.pointerEvents = position === 'bottom' ? 'auto' : 'none';
+
+            switch (position) {
+                case 'top':
+                    borderElement.style.left = `${minLeft}px`;
+                    borderElement.style.top = `${minTop}px`;
+                    borderElement.style.width = `${width}px`;
+                    borderElement.style.height = '2px';
+                    break;
+                case 'right':
+                    borderElement.style.left = `${maxRight - 2}px`;
+                    borderElement.style.top = `${minTop}px`;
+                    borderElement.style.width = '2px';
+                    borderElement.style.height = `${height}px`;
+                    break;
+                case 'bottom':
+                    borderElement.style.left = `${minLeft}px`;
+                    borderElement.style.top = `${maxBottom - 2}px`;
+                    borderElement.style.width = `${width}px`;
+                    borderElement.style.height = '2px';
+                    break;
+                case 'left':
+                    borderElement.style.left = `${minLeft}px`;
+                    borderElement.style.top = `${minTop}px`;
+                    borderElement.style.width = '2px';
+                    borderElement.style.height = `${height}px`;
+                    break;
+            }
+        });
+    };
+
+    const handleAddGroupItemClicked = (key: string, item: any) => {
+        const groupId = item.group;
+
+        // Find all existing items in this group to determine the bottom-most position
+        const existingGroupItems = droppedItems[key]?.filter(existingItem =>
+            'group' in existingItem && existingItem.group === groupId
+        ) || [];
+
+        const existingGroupItem = droppedItems[key]?.filter(existingItem =>
+            'group' in existingItem && existingItem.group === groupId
+        ) || [];
+
+        existingGroupItem[0].options
+
+        // Find the bottom-most item in the group
+        let bottomMostItem = item;
+        if (existingGroupItems.length > 0) {
+            bottomMostItem = existingGroupItems.reduce((lowest, current) => {
+                const currentBottom = current.dimensions.top + current.dimensions.height;
+                const lowestBottom = lowest.dimensions.top + lowest.dimensions.height;
+                return currentBottom > lowestBottom ? current : lowest;
+            });
+        }
+
+        // Calculate new position: place below the bottom-most item
+        const spacing = 10; // Adjust spacing as needed
+        const newTop = bottomMostItem.dimensions.top + bottomMostItem.dimensions.height + spacing;
+
+        // Use the same left position as the parent (original) item
+        const newItem = {
+            ...item,
+            dimensions: {
+                ...item.dimensions,
+                left: item.dimensions.left, // Keep same horizontal position as parent
+                top: newTop // Position below the bottom-most item
+            },
+            isGroupExist: true
+        };
+
+        // Update the dropped items
+        setDroppedItems({
+            ...droppedItems,
+            [key]: [...droppedItems[key], newItem],
+        });
+
+        // Update group borders after adding the new item
+        // Use setTimeout to ensure state update is processed
+        setTimeout(() => {
+            handleIGroupBorderPosition(groupId);
+        }, 50); // Slightly longer timeout to ensure DOM updates
+    };
+
+    useEffect(() => {
+        // Initialize group borders for all existing groups after component updates
+        const timeoutId = setTimeout(() => {
+            const allGroupElements = document.querySelectorAll('[group]');
+            const groupIds = new Set<string>();
+
+            allGroupElements.forEach((element) => {
+                const groupId = element.getAttribute('group');
+                if (groupId) {
+                    groupIds.add(groupId);
+                }
+            });
+
+            groupIds.forEach((groupId) => {
+                handleIGroupBorderPosition(groupId);
+            });
+        }, 0);
+
+        return () => clearTimeout(timeoutId);
+    }, [droppedItems]);
+
+    return (
+        <>
+            {/* DROPPED ITEMS - Render only the dropped items for this specific docId and page - STARTS */}
+            {droppedItems[pageIdkey]?.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"
+                            data-tag-id={index}
+                            data-tag-selected={index === selectedTag?.index}
+                            className="absolute rounded dropped-item"
+                            onClick={() => handleTagClick(pageIdkey, 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 === pageIdkey && 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(pageIdkey, 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, pageIdkey, 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, pageIdkey, 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(pageIdkey, 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

@@ -83,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) =>

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;
@@ -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 }));
@@ -94,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'
@@ -151,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="" />
                                             }
 
@@ -165,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'>
+                                            <div className="my-1 flex justify-center items-center gap-2 flex-wrap">
-                                                {document.pages != undefined && document.pages.map((img, indx) => (
+                                                {/* Prev Button */}
                                                 <a
-                                                        href={"#" + document.id + indx}
+                                                    href={"#" + document.id + (currentPage - 1)}
-                                                        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'
+                                                    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);
+                                                    }}
                                                 >
-                                                        <p className='text-center text-xs text-slate-600'>{indx + 1}</p>
+                                                    <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,7 +8,7 @@ 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'
@@ -91,7 +91,8 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
             let userEmailPresent = {
                 present: false,
                 routingOrder: 0,
-                recipientId: 0
+                recipientId: 0,
+                type: recipientType.CC
             };
             // Getting Minimum RoutingOrder
             for (let i = 0; i < selectedRecipients.length; i++) {
@@ -104,10 +105,11 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
                     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 })
             }
         }
@@ -126,7 +128,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
         setTimeout(() => {
             if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
                 if (isSignSend) {
-                    navigate(`./../../../sign/${selfUserSign.recipientId}`,{ replace: true });
+                    window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self");
                 }
                  else {
                     navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true })
@@ -167,25 +169,6 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
         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;
 
@@ -221,16 +204,6 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
                         <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)}
@@ -281,7 +254,6 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
                             <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'}`}>
 
@@ -312,7 +284,7 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
                                 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}</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

@@ -34,9 +34,6 @@ const ProcessStepTwo = () => {
     }, 800)
   }, [])
 
-  
-  
-
   return (
     <div className={`min-w-full relative h-screen bg-slate-100 overflow-hidden ${(globalLoader.isLoading) ? 'pointer-events-none' : ''}`}>
       <NavTwo transactionSaving={transactionSaving} isFields={isFields} setIsFields={setIsFields} isSend={isSend} setIsSend={setIsSend} />

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,30 +1,23 @@
 import { DroppedItemsObj } from "../DocumentContainer";
 import React, { useEffect, useState } from "react";
 
-import { dateFormats, dateTimeFormats, timeFormats } from "../../../../utlity/dateTimeFormats";
 import { DroppedItem, StylesInterface } from "../../../../utlity/types";
 import { IoIosArrowDown } from "react-icons/io";
 
 import { TagsTypes } from "../../../../utlity/types";
 
-import LabelAttr from "./LabelAttr";
+import LabelAttr from "./attributes/LabelAttr";
-import RequiredAttr from "./RequiredAttr";
+import RequiredAttr from "./attributes/RequiredAttr";
-import CurrTimeStampAttr from "./currTimeStampAttr";
+import CommonAttrDropDown from "./attributes/CommonAttrDropDown";
-import CommonAttrDropDown from "./CommonAttrDropDown";
+import MaskTypePassAttr from "./attributes/MaskTypePassAttr";
-import MaskTypePassAttr from "./MaskTypePassAttr";
+import TemporalDateAttr from "./attributes/TemporalDateAttr";
-import TemporalDateAttr from "./TemporalDateAttr";
+import SelectTagAttr from "./attributes/SelectTagAttr";
-import SelectTagAttr from "./SelectTagAttr";
+import MaxMinLenAttr from "./attributes/MaxMinLenAttr";
-import MaxMinLenAttr from "./MaxMinLenAttr";
+import RecipientsAttrCon from "./attributes/RecipientsAttrCon";
-import RecipientsAttrCon from "./RecipientsAttrCon";
+import DirectionalControls from "./attributes/DirectionalControls";
-import MovableFieldContainer from "./MovableField";
+import TextValueFIll from "./attributes/TextValueFIll";
-import DirectionalControls from "./DirectionalControls";
+import CurrTimeStampAttr from "./attributes/CurrTimeStampAttr";
-
+import ToolTipAttr from "./attributes/ToolTipAttr";
-// interface DirectionalControlsProps {
-//     onMove: (direction: 'up' | 'down' | 'left' | 'right') => void;
-//     disabled?: boolean;
-//     stepSize?: number;
-//     className?: string;
-// }
 
 export interface DroppedItemProps {
     droppedItems: DroppedItem[]
@@ -33,12 +26,6 @@ export interface DroppedItemProps {
     selTagKey: string,
     selTagIndx: number,
     signClient: boolean,
-    // DirectionalControlsProps: {
-    // onMove: (direction: 'up' | 'down' | 'left' | 'right', stepSize?: number) => void;
-    // disabled?: boolean;
-    // stepSize?: number;
-    // className?: string;
-    // }
 }
 
 export enum TEXT {
@@ -115,124 +102,8 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
     const [styleOpen, setStyleOpen] = useState(false);
 
     const handlePropertyChange = (changeTo: string, changeWith: string | boolean | number | StylesInterface, is24Hrs = null) => {
-        console.log("changeTo", changeTo, "changeWith", changeWith)
         if (changeTo === '') return
 
-        // if (changeTo === "subType" && typeof changeWith === "string" && changeWith.toLowerCase() === "password") {
-
-        //     if (!signClient) {
-        //         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 {
-        //         setDroppedItems((prev) => {
-        //             const updated = [...prev];
-        //             updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, maskType: "All", maskCharacter: "ASTERISK", update: true }
-        //             return updated;
-        //         })
-        //     }
-        // } else if (changeTo === "subType" && (changeWith === NUMBER.CURRENCY || changeWith === NUMBER.INTEGER || changeWith === NUMBER.DECIMAL)) {
-        //     let decPlace = changeWith !== NUMBER.DECIMAL ? 0 : decimalPlace;
-        //     const isCurrency = changeWith === NUMBER.CURRENCY;
-        //     // const currencyType = null
-
-        //     if (!signClient) {
-        //         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 {
-        //         setDroppedItems((prev) => {
-        //             const updated = [...prev];
-        //             updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, decimalPlace: decPlace, isCurrency, update: true }
-        //             return updated;
-        //         })
-        //     }
-
-        // }
-        // else if (changeTo === "format" && selectedTag.subType === TEMPORAL.DATE_TIME) {
-
-        //     let val = timeFormats[0].format;
-
-        //     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;
-        //     // }
-
-
-        //     if (!signClient) {
-        //         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 {
-        //         setDroppedItems((prev) => {
-        //             const updated = [...prev];
-        //             updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith + " " + val, update: true }
-        //             return updated;
-        //         })
-        //     }
-        // }
-        // else {
-
-        //     if (!signClient) {
-        //         setDroppedItems((prev) => {
-
-        //             const updatedItems = Array.isArray(prev[selTagKey])
-        //                 ? prev[selTagKey].map((item, i) =>
-        //                     i === selTagIndx ? { ...item, [changeTo]: changeWith, update: true } : item
-        //                 )
-        //                 : [];
-
-        //             return {
-        //                 ...prev,
-        //                 [selTagKey]: updatedItems,
-        //             };
-        //         });
-        //     } else {
-        //         setDroppedItems((prev) => {
-        //             const updated = [...prev];
-        //             updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
-        //             return updated;
-        //         })
-        //     }
-
-        // }
-
         if (!signClient) {
             setDroppedItems((prev) => {
 
@@ -248,14 +119,8 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
                 };
             });
         } else {
-            // setDroppedItems((prev) => {
-            //     const updated = [...prev];
-            //     updated[selTagIndx] = { ...updated[selTagIndx], [changeTo]: changeWith, update: true }
-            //     return updated;
-            // })
             setDroppedItems((prev) => {
                 return (prev.map((item, idx) => {
-                    console.log(prev, "Prev lIne 258")
                     if (idx === selTagIndx) {
                         return { ...item, [changeTo]: changeWith, update: true }
                     }
@@ -267,22 +132,6 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
         setDropDownToggle(null)
     }
 
-    // useEffect(() => {
-    //     if (selectedTag.dateFormat === TEMPORAL.DATE || selectedTag.dateFormat === TEMPORAL.DATE_TIME || selectedTag.dateFormat === TEMPORAL.TIME) {
-
-    //         if (selectedTag.dateFormat === TEMPORAL.DATE) {
-    //             handlePropertyChange("format", dateFormats[0].format)
-    //         }
-    //         else if (selectedTag.dateFormat === TEMPORAL.DATE_TIME) {
-    //             handlePropertyChange("format", dateTimeFormats[0].format)
-    //         }
-    //         else if (selectedTag.dateFormat === TEMPORAL.TIME) {
-    //             handlePropertyChange("format", timeFormats[0].format)
-    //         }
-    //     }
-    // }, [selectedTag.dateFormat])
-
-
     useEffect(() => {
         if (selectedTag.label === "temporal" && !("dateFormat" in selectedTag)) {
             handlePropertyChange("dateFormat", TEMPORAL.DATE);
@@ -292,7 +141,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
         if (selectedTag.label === TagsTypes.TEXT && !("multiLine" in selectedTag)) {
             handlePropertyChange("multiLine", true);
         }
-    }, [])
+    }, [selectedTag])
 
     const handleDecimalPlace = (e: React.ChangeEvent<HTMLInputElement>) => {
         const val = Number(e.target.value)
@@ -306,24 +155,6 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
         setDecimalPlace(selectedTag.decimalPlace ?? 0)
     }, [selectedTag.decimalPlace ?? 0])
 
-    // 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) return;
 
@@ -334,26 +165,6 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
             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) => {
@@ -469,41 +280,32 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
         className: ''
     }
 
-
-    console.log(selectedType, "line 434");
-
-
-
     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} />
-                    }
-
                     <DirectionalControls {...DirectionalControlsProps} selectedType={selectedTag.dimensions} />
 
+                    {
+                        (selectedTag.type !== TagsTypes.SIGNATURE && selectedTag.type !== TagsTypes.INITIALS) &&
+                        <RequiredAttr required={selectedTag.required ? selectedTag.required : false} handlePropertyChange={handlePropertyChange} />
+                    }
+
+                    {
+                        selectedTag.type.toLowerCase() === TagsTypes.TEMPORAL &&
+                        <CurrTimeStampAttr type={selectedTag.type} handlePropertyChange={handlePropertyChange} />
+                    }
 
                     {selectedTag.label &&
                         <LabelAttr label={selectedTag.label} handlePropertyChange={handlePropertyChange} />}
 
-                    {(selectedTag.type !== TagsTypes.SIGNATURE && selectedTag.type !== TagsTypes.INITIALS) &&
+                    <ToolTipAttr tooltip={selectedTag.tooltip ?? ""} handlePropertyChange={handlePropertyChange} />
-
-                        <>
-                            <RequiredAttr required={selectedTag.required ? selectedTag.required : false} handlePropertyChange={handlePropertyChange} />
-                        </>
-
-
-                    }
-
-                    {selectedTag.type.toLowerCase() === TagsTypes.TEMPORAL &&
-                        <CurrTimeStampAttr type={selectedTag.type} handlePropertyChange={handlePropertyChange} />}
 
                     {
                         selectedType && Object.keys(selectedType).length > 0 &&
@@ -527,6 +329,15 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
                             handlePropertyChange={handlePropertyChange} />
                     }
 
+                    {/* Mask Type  */}
+                    {
+                        selectedTag.type.toLowerCase() === TagsTypes.TEXT &&
+                        <TextValueFIll
+                            value={selectedTag.value ?? ""}
+                            multiLine={selectedTag.multiLine ?? false}
+                            handlePropertyChange={handlePropertyChange}
+                        />
+                    }
 
                     {/* TEMPORAL DATE FORMAT - START */}
                     {
@@ -547,7 +358,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
                     {
                         selectedTag?.type.toLowerCase() === TagsTypes.NUMBER &&
                         <div>
-                            <label htmlFor="" className="">Decimal Places</label>
+                            <label htmlFor="" className="font-medium">Decimal Places</label>
                             <input
                                 type="number"
                                 onChange={(e) => handleDecimalPlace(e)}
@@ -572,16 +383,13 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
                         <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"
                                 onClick={() => setStyleOpen(!styleOpen)}
                             >
                                 <label
-                                    className="block mb-2">Styles</label>
+                                    className="block mb-2 font-medium">Styles</label>
                                 <IoIosArrowDown className={`${styleOpen ? "rotate-[-90deg]" : ""} transition-all`} />
                             </div>
                             {

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

@@ -1,7 +1,9 @@
 
 import { MdKeyboardArrowDown } from 'react-icons/md';
-import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE, NUMBER, SELECT, TEMPORAL, TEXT } from './RightSideBar';
+import { DROPDOWNTOGGLE, MASKCHARACTER, MASKTYPE, NUMBER, SELECT, TEMPORAL, TEXT } from '../RightSideBar';
-import { DroppedItem, TagsTypes } from '../../../../utlity/types';
+import { DroppedItem, TagsTypes } from '../../../../../utlity/types';
+import { dateFormats, timeFormats } from '../../../../../utlity/dateTimeFormats';
+import { FaCommentsDollar } from 'react-icons/fa';
 
 interface CommonAttrDropDownInt {
     selectedType: any;
@@ -17,8 +19,6 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
     let subType = "";
     let subTypeKey = ""
 
-    console.log(selectedType, selectedTag, "line 20");
-
     switch (selectedTag.type.toLowerCase()) {
         case "number":
             if (selectedTag.decimalPlace === undefined) {
@@ -36,7 +36,6 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
             }
             break;
         case "text":
-            console.log("Line 444", selectedTag);
             if (selectedTag.multiLine === undefined) {
                 subType = TEXT.PARAGRAPH
             } else if (selectedTag.multiLine) {
@@ -73,11 +72,9 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
             break;
     }
 
-    console.log(selectedTag, "line 63");
-
     return (
         <div className="flex flex-col">
-            <label htmlFor="" className="">Type</label>
+            <label htmlFor="" className="font-medium">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">
@@ -90,9 +87,6 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
                 <div className="shadow bg-slate-100 mt-1 border-[1px] border-slate-100 rounded">
                     {Object.keys(selectedType).map((val, indx) => {
 
-
-                        console.log(selectedType, val, "Line 90")
-
                         let value = val.toLowerCase() as keyof typeof selectedType | number | boolean;
                         let isCurrency = false;
                         let isPassword = false;
@@ -133,8 +127,6 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
                         }
                         // Handling TEXT - END
 
-                        console.log(subTypeKey, subType, value, "line 1223");
-
                         return (
                             <div
                                 key={indx}
@@ -162,8 +154,27 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
 
                                         }
                                         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;
                                             }
-                                    else {
+
+                                            handlePropertyChange("format", format as string);
+                                        }
+                                    } else {
                                         handlePropertyChange(subTypeKey, selectedType[val as keyof typeof selectedType]);
                                     }
                                 }}

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

@@ -17,9 +17,9 @@ const CurrTimeStampAttr: React.FC<CurrTimeStampAttrInt> = ({ type, handlePropert
     }
 
     return (
-        <div className="flex justify-left items-center gap-1.5 mt-0.5">
+        <div className="flex justify-between items-center border-1 p-1.5 rounded-sm border-slate-200">
             <label
-                className={`text-xs ${isCurrentTimeStamp ? "text-slate-600" : "text-slate-400"} transitions-all duration-150`}
+                className="text-slate-600 transitions-all duration-150 font-medium"
                 htmlFor="use_current_timestamp"
             >
                 Use Current Timestamp

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

@@ -73,24 +73,27 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
     };
   };
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (disabled) return;
 
-      switch (event.key) {
+  // Move ON Key Down - START 
-        case 'ArrowUp':
+  // useEffect(() => {
-        case 'ArrowDown':
+  //   const handleKeyDown = (event: KeyboardEvent) => {
-        case 'ArrowLeft':
+  //     if (disabled) return;
-        case 'ArrowRight':
-          event.preventDefault();
-          handleMove(event.key.replace('Arrow', '').toLowerCase() as any);
-          break;
-      }
-    };
 
-    window.addEventListener('keydown', handleKeyDown);
+  //     switch (event.key) {
-    return () => window.removeEventListener('keydown', handleKeyDown);
+  //       case 'ArrowUp':
-  }, [disabled, stepSize]);
+  //       case 'ArrowDown':
+  //       case 'ArrowLeft':
+  //       case 'ArrowRight':
+  //         event.preventDefault();
+  //         handleMove(event.key.replace('Arrow', '').toLowerCase() as any);
+  //         break;
+  //     }
+  //   };
+
+  //   window.addEventListener('keydown', handleKeyDown);
+  //   return () => window.removeEventListener('keydown', handleKeyDown);
+  // }, [disabled, stepSize]);
+  // Move ON Key Down - END 
 
   const buttonClass = `
     w-8 h-8 flex items-center justify-center rounded-full border shadow-sm text-[12px]
@@ -124,7 +127,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
           <input
             type="number"
             value={leftValue}
-            onChange={(e) => {e.preventDefault; handlePositionInputChange('left', e.target.value)}}
+            onChange={(e) => { e.preventDefault; handlePositionInputChange('left', e.target.value) }}
             onBlur={() => handlePositionInputBlur('left')}
             onKeyPress={(e) => handleKeyPress(e, 'left')}
             disabled={disabled}
@@ -134,7 +137,7 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
           <input
             type="number"
             value={topValue}
-            onChange={(e) => {e.preventDefault; handlePositionInputChange('top', e.target.value)}}
+            onChange={(e) => { e.preventDefault; handlePositionInputChange('top', e.target.value) }}
             onBlur={() => handlePositionInputBlur('top')}
             onKeyPress={(e) => handleKeyPress(e, 'top')}
             disabled={disabled}
@@ -148,83 +151,13 @@ const DirectionalControls: React.FC<DirectionalControlsProps> = ({
         </button>
       </div>
 
-      {/* Bottom */}
       <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 className='font-medium'>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";

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

@@ -39,8 +39,8 @@ const MaxMinLenAttr: React.FC<MaxMinLenAttrIntr> = ({ maxLength, minLength, hand
 
     return (
         <>
-            <div>
+            <div className="flex flex-col">
-                <label htmlFor="maxLength">Max Length</label>
+                <label className="font-medium" htmlFor="maxLength">Max Length</label>
                 <input
                     id="maxLength"
                     value={maxLength}
@@ -50,8 +50,8 @@ const MaxMinLenAttr: React.FC<MaxMinLenAttrIntr> = ({ maxLength, minLength, hand
                     onChange={handleMaxChange}
                 />
             </div>
-            <div className="mt-2">
+            <div className="flex flex-col">
-                <label htmlFor="minLength">Min Length</label>
+                <label className="font-medium" htmlFor="minLength">Min Length</label>
                 <input
                     id="minLength"
                     value={minLength}

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 {
@@ -67,6 +68,7 @@ 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'

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

@@ -7,8 +7,8 @@ interface RequiredAttrInt {
 
 const RequiredAttr : React.FC<RequiredAttrInt> = ({required, handlePropertyChange}) => {
     return (
-        <div className="flex justify-between items-center">
+        <div className="flex justify-between items-center border-1 p-1.5 rounded-sm border-slate-200">
-            <label htmlFor="required" className="text-xs text-slate-600 transitions-all duration-150">Required</label>
+            <label htmlFor="required" className="text-slate-600 transitions-all duration-150 font-medium">Required</label>
             <input
                 id="required"
                 checked={required ? required : false}

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

@@ -52,7 +52,6 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
                     };
                 }
 
-                console.log("New droppedItems state:", newState);
                 return newState;
             });
         }
@@ -94,7 +93,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
     return (
         <>
             <div>
-                <label htmlFor="" className="">Add Options</label>
+                <label htmlFor="" className="font-medium">Add Options</label>
                 <input
                     type="text"
                     onChange={(e) => setSelectedOption({ label: e.target.value, value: e.target.value })}

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

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
-import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, yearFormats } from "../../../../utlity/dateTimeFormats";
+import { dateFormats, dateTimeFormats, monthFormats, timeFormats, weekFormats, yearFormats } from "../../../../../utlity/dateTimeFormats";
-import { DROPDOWNTOGGLE, TEMPORAL } from "./RightSideBar";
+import { DROPDOWNTOGGLE, TEMPORAL } from "../RightSideBar";
 import { MdKeyboardArrowDown } from "react-icons/md";
 import dayjs from "dayjs";
-import { DroppedItem } from "../../../../utlity/types";
+import { DroppedItem } from "../../../../../utlity/types";
 
 const dateTimeFormatMap = {
     "date": dateFormats,
@@ -25,20 +25,29 @@ interface TemporalDateAttrInt {
 
 const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, selectedTag, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
 
-    console.log(dateFormat, format, "dateFormat Line 26", selectedTag)
+    let is24HourFormat = true
 
-    const [is24Hrs, setIs24Hrs] = useState<boolean>(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>(is24HourFormat);
 
     const handleIs24HrsClick = (checked: boolean) => {
         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 (dateFormat === TEMPORAL.DATE_TIME) {
-            handlePropertyChange("format", (format.split(" ").slice(0, -1).join(" ")), !is24Hrs)
+            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)
     }
@@ -54,7 +63,7 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, s
     return (
         <div>
             <div className="flex justify-between">
-                <label htmlFor="" className="">Formats</label>
+                <label htmlFor="" className="font-medium">Formats</label>
                 {(dateFormat === TEMPORAL.DATE_TIME || dateFormat === TEMPORAL.TIME) &&
                     <div className="flex justify-center items-center gap-1.5">
                         <input
@@ -87,12 +96,12 @@ const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, s
                         let val = valObj["format"]
                         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}

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 className='font-medium'>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/Setting.tsx

@@ -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...!"
       }
 

src/components/setting/Signature/AddSignatureModal.tsx

@@ -55,7 +55,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
     getAllSignatures,
     editingSignature
 }) => {
-    console.log("editingSignature", editingSignature)
     const [activeTab, setActiveTab] = useState<'SELECT' | 'DRAW' | 'UPLOAD'>('SELECT');
     const [fullName, setFullName] = useState('');
     const [initials, setInitials] = useState('');
@@ -82,8 +81,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
         signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" }
     );
 
-    console.log("selectedSignature", selectedSignature)
-
     // Store the actual file
     const [file1, setFile1] = useState<File | null>(null);
     const [file2, setFile2] = useState<File | null>(null);
@@ -119,7 +116,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
     useEffect(() => {
         if (editingSignature) {
             setFullName(`${editingSignature.firstName} ${editingSignature.lastName}`);
-            setInitials(`${editingSignature.firstName.slice(0, 1)}${editingSignature.lastName.slice(0, 1)}`);
+            setInitials((`${editingSignature.firstName.slice(0, 1)}${editingSignature.lastName.slice(0, 1)}`).toUpperCase());
             setActiveTab(editingSignature.signatureType as 'SELECT' | 'DRAW' | 'UPLOAD');
 
             // Set font for SELECT tab
@@ -230,8 +227,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                 payload.initialsBase64 = signatures.initials;
             }
 
-            console.log("payload214", payload);
-
             let res;
             if (isEditMode && editingSignature) {
                 // Update existing signature
@@ -240,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",
@@ -256,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",
@@ -451,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);
 
@@ -564,7 +557,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                             >
                                 {checked && <FiCheck className="text-white text-xs" />}
                             </div>
-                            <span>Signature will be used by default</span>
+                            <span>Save as default signature</span>
                         </label>
                     </div>
 
@@ -686,7 +679,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                             >
                                 {checked && <FiCheck className="text-white text-xs" />}
                             </div>
-                            <span>Signature will be used by default</span>
+                            <span>Save as default signature</span>
                         </label>
                     </div>
 

src/components/setting/Signature/Signature.tsx

@@ -43,7 +43,6 @@ const SignatureManager: React.FC = () => {
         setLoading(true)
         try {
             let res = await api.get("/api/user/signatures")
-            console.log("getAllSignatures", res.data)
             let signatureData = res?.data
             setSignatures(signatureData)
         } catch (error) {
@@ -58,9 +57,7 @@ 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);
@@ -74,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,
@@ -115,8 +112,6 @@ const SignatureManager: React.FC = () => {
 
         const selectedFont = signatureOptions.find(opt => opt.style === font);
         const fontClass = `${selectedFont?.style || 'print'}`;
-        console.log("fontClass",fontClass)
-
 
         if (mode === 'initials') {
             const initials = `${(firstName?.[0] ?? '')}${(lastName?.[0] ?? '')}`.toUpperCase();

src/components/signature/SignCon.tsx

@@ -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: "" }
     );
@@ -172,7 +169,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                             signature: signatureBlob,
                             initial: initialsBlob,
                         });
-                        console.log("saved Called Line 174")
                     }
                 }
                 setPreSaveSignatures(preSavedSignatures)
@@ -223,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);
@@ -243,7 +238,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                 font: selectedSignature.style
             };
 
-            console.log("payload", payload)
             // if (isEditMode && editingSignature) {
             //     // Update existing signature
             //     const updatePayload = {
@@ -273,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",
@@ -532,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);
         }

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

@@ -88,7 +88,7 @@ const TemplateTable = () => {
                 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}?useTemplate=true`);
         } catch (error) {
@@ -220,7 +220,6 @@ const TemplateTable = () => {
                                                             <button
                                                                 onMouseDown={() => {
                                                                     setShowMenu(null);
-                                                                    console.log('Delete clicked', item);
                                                                 }}
                                                                 className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-red-600"
                                                             >

src/components/templates/Templates.tsx

@@ -31,7 +31,6 @@ const Templates = () => {
   
 
   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}`)

src/components/transactions/AuditModal.tsx

@@ -149,7 +149,6 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
             'REASSIGNED': <FiUserPlus className="w-4 h-4" />,
             'EDITED': <FiEdit className="w-4 h-4" />,
         };
-        console.log("getActionIcons", action || <FiActivity className="w-4 h-4" />)
         return icons[action as keyof typeof icons] || <FiActivity className="w-4 h-4" />;
     };
 

src/components/transactions/TransactionView.tsx

@@ -77,8 +77,6 @@ const TransactionView = () => {
         setIsModalOpen(false); //  update state immediately
     };
 
-    console.log(transactionDetails, "line 37");
-
     const fetchData = async () => {
         try {
             const [res1, res2] = await Promise.all([api.get(`/api/accounts/${accountId}/transactions/${transactionId}`),

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/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 response = await api.post(
+        const res = await api.post(
           `/api/accounts/${accountId}/${toggle}/${transactionId}/documents`,
-        formData,
+          file,
           {
             headers: {
               'Content-Type': 'multipart/form-data',
             },
           }
         );
-      console.log("//  await sleep(5000);", response.data)
+
+        console.log(res.data);
+        response.push(res.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,7 +103,6 @@ export const removeRecipientAsync = createAsyncThunk<
 
             const basePath = `/api/accounts/${accountId}/${toggle}/${transactionId}/recipients`;
 
-            console.log(`Line 440 :  ${basePath}/${recipientId}`)
             // return
             if (recipientId) {
                 await api.delete(`${basePath}/${recipientId}`);
@@ -467,9 +132,9 @@ export const fetchRecipients = createAsyncThunk<
 
             let data = response.data as Recipient[];
 
-            data = data.filter((recipient, indx) => {
+            // data = data.filter((recipient, indx) => {
-                return recipient.type !== "CC";
+            //     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
@@ -487,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];

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/utlity/maskUtils.ts

@@ -10,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;
+    if (str.length !== 15 && str.length !== 16) return str;
-    // console.log(str.replace(/\d(?=\d{4})/g, "*"), "line 11", str)
+
-    // return str.replace(/\d(?=\d{4})/g, `${changeWith}`);
+    const last4 = str.slice(-4);
-    return `${changeWith.repeat(4)} ${changeWith.repeat(4)} ${changeWith.repeat(4)} ${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);

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

@@ -100,7 +100,6 @@ export interface TagsProperties {
   "isCurrency"?: boolean;
 }
 
-
 export enum TagsTypes {
   TEXT = "text",
   SIGNATURE = "signature",
@@ -119,15 +118,11 @@ export enum TagsTypes {
   COMPANY = "company",
 }
 
-
 export enum SignTypeEnum {
   selfSign = "self_sign",
   multipleSign = "multi_sign"
 }
 
-
-
-
 export interface StylesInterface {
   font: string,
   italic: boolean,
@@ -137,7 +132,7 @@ export interface StylesInterface {
   textSize: number
 }
 
-export interface TagOptionAttrType{
+export interface TagOptionAttrType {
   label: string;
   value: string;
   pageIndex?: number;
@@ -151,6 +146,7 @@ export interface DroppedItem {
   id?: string;
   icon: JSX.Element;
   label?: string;
+  tooltip?: string;
   type: string;
 
   // TagsProperties - Other Properties depend on tag type - START