.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>Sign Made Easy</title>
+    <title>Vite + React + TS</title>
   </head>
   <body>
     <div id="root"></div>

src/SigningOrderDiagram .tsx

@@ -58,11 +58,15 @@ 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,6 +49,7 @@ 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);
@@ -69,10 +70,12 @@ 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,
@@ -106,6 +109,7 @@ const CommonNav: React.FC<AccountNavProps> = ({
   };
 
   const handleAccountSwitch = (account: any) => {
+    console.log("handleAccountSwitch", account);
 
     // Update sessionStorage
     sessionStorage.setItem('activeAccountId', JSON.stringify(account.accountId));
@@ -147,7 +151,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 = {
@@ -162,6 +166,8 @@ 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));
@@ -169,6 +175,7 @@ const CommonNav: React.FC<AccountNavProps> = ({
         // Dispatch event for initial load
         dispatchSessionStorageChange('activeAccountId', userData.account.id);
 
+        console.log("Data is saved in sessionStorage");
       }
     } catch (error) {
       console.error("Error fetching user details:", error);

src/components/accounts/Account.tsx

@@ -108,6 +108,7 @@ 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,6 +42,7 @@ 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);
@@ -62,10 +63,12 @@ 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,
@@ -99,6 +102,7 @@ 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));
@@ -142,7 +146,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 = {
@@ -157,12 +161,16 @@ 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,6 +99,7 @@ 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,6 +25,7 @@ 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,6 +6,7 @@ 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";
@@ -26,15 +27,18 @@ 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
@@ -43,14 +47,18 @@ 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",
@@ -68,20 +76,25 @@ 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 },
             {
@@ -93,9 +106,11 @@ 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
@@ -118,7 +133,9 @@ 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",
@@ -132,6 +149,7 @@ function LoginForm() {
                         transition: Bounce,
                     });
                 } else {
+                    console.log('Some Error Occurred');
                     toast.dismiss();
                     toast.error("Some Error Occurred", {
                         position: "top-center",
@@ -189,7 +207,7 @@ function LoginForm() {
             <p>or login with social platforms</p>
 
             <div className="social-icons">
-                <OAuthGoogle isLogin={true} />
+                <OAuthGoogle />
             </div>
 
             <div>

src/components/auth/OAuthGoogle.tsx

@@ -19,14 +19,16 @@ 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: {
@@ -36,6 +38,7 @@ 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 }));
 
@@ -49,6 +52,8 @@ 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,12 +22,14 @@ 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
@@ -46,6 +48,7 @@ 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 }, {
@@ -56,8 +59,10 @@ 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 }));
@@ -66,6 +71,7 @@ function RegisterForm() {
             })
             .catch((err) => {
                 if (err.status === 409) {
+                    console.log('User Already Exists');
                     toast.dismiss();
                     toast.error("User Already Exists", {
                         position: "top-center",
@@ -79,6 +85,7 @@ 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,40 +1,32 @@
-import React, { useState } from 'react'
+import React from 'react'
-import { MdKeyboardArrowDown, MdOutlineNavigateNext } from 'react-icons/md';
+import { MdKeyboardArrowDown } from 'react-icons/md';
-import { DocumentType } from './SignDocument';
-import { GrFormPrevious } from 'react-icons/gr';
 
 interface DocumentPagesInterface {
-    selectedDocuments: DocumentType[] | null;
+    selectedDocuments: DocumentType[];
     setDropDownTogglePage: React.Dispatch<React.SetStateAction<string>>;
     dropDownTogglePage: string;
 }
 
 const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownTogglePage }: DocumentPagesInterface) => {
-
-    const [currentPage, setCurrentPage] = useState(0);
-
     return (
-        <div className='p-4'>
+        <div className='bg-white h-full p-4 overflow-y-auto'>
 
             <div className="flex flex-col gap-2">
                 {selectedDocuments && selectedDocuments.length && selectedDocuments.map((document, indx) => {
-                   return (
+                    return (
                         <div
                             key={indx}
                         // tabIndex={1}
                         // onBlur={() => setDropDownTogglePage('')}
                         >
                             <div
-                                onClick={() => {
+                                onClick={() => (`${(dropDownTogglePage === 'pageDropDown' + indx) ? '' : 'pageDropDown' + indx}`)}
-                                    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={"data:image/png;base64," + document.thumbnail}
+                                        src={document.pages[0].src}
                                         alt="" />
                                 }
 
@@ -48,53 +40,15 @@ const DocumentPages = ({ selectedDocuments, setDropDownTogglePage, dropDownToggl
 
                             {
                                 dropDownTogglePage === 'pageDropDown' + indx &&
-                                <div className="my-1 flex justify-center items-center gap-2 flex-wrap">
+                                <div className='my-1 flex justify-center items-center gap-1 flex-wrap'>
-                                    {/* Prev Button */}
+                                    {document.pages != undefined && document.pages.map((img, indx) => (
-                                    <a
+                                        <a
-                                        href={"#" + document.documentId + (currentPage - 1)}
+                                            href={"#" + document.documentId + indx}
-                                        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" : ""
+                                            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'
-                                            }`}
+                                        >
-                                        onClick={(e) => {
+                                            <p className='text-center text-xs text-slate-600'>{indx + 1}</p>
-                                            if (currentPage === 0) e.preventDefault();
+                                        </a>
-                                            else setCurrentPage(currentPage - 1);
+                                    ))}
-                                        }}
-                                    >
-                                        <GrFormPrevious />
-                                    </a>
-
-                                    {/* Page Selector */}
-                                    <select
-                                        className="w-[58px] py-1 text-xs text-slate-400 outline-none"
-                                        value={currentPage}
-                                        onChange={(e) => {
-                                            const newPage = Number(e.target.value);
-                                            setCurrentPage(newPage);
-                                            window.location.hash = document.documentId + "" + newPage;
-                                        }}
-                                    >
-                                        {document.pages != undefined && document.pages.map((_, pageIndex) => (
-                                            <option key={pageIndex} value={pageIndex}>
-                                                {pageIndex + 1}
-                                            </option>
-                                        ))}
-                                    </select>
-
-                                    <span className="text-xs text-slate-600">
-                                        / {document.pages?.length}
-                                    </span>
-
-                                    {/* Next Button */}
-                                    <a
-                                        href={"#" + document.documentId + (currentPage + 1)}
-                                        className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === document.pages?.length - 1 ? "pointer-events-none opacity-50" : ""
-                                            }`}
-                                        onClick={(e) => {
-                                            if (currentPage === document.pages?.length - 1) e.preventDefault();
-                                            else setCurrentPage(currentPage + 1);
-                                        }}
-                                    >
-                                        <MdOutlineNavigateNext />
-                                    </a>
                                 </div>
                             }
 

src/components/contacts/Contacts.tsx

@@ -25,6 +25,7 @@ const Contacts = () => {
     const [showModal, setShowModal] = useState(false)
     const [editJsonData, setEditJsonData] = useState({})
     const [actionStatus, setActionStatus] = useState("")
+    console.log("editJsonData", editJsonData)
 
     const fetchContacts = async () => {
         setLoading(true)
@@ -45,6 +46,7 @@ const Contacts = () => {
     }, [activeAccountId]);
 
     const handleEdit = (contactId) => {
+        console.log('Edit contact:', contactId);
         let jsonEditData = contacts.find((prev) => prev.id === contactId)
         setEditJsonData(jsonEditData)
         setActionStatus("Edit")
@@ -53,6 +55,7 @@ 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,6 +55,7 @@ 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]: "" }));
@@ -135,6 +136,7 @@ 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,11 +86,13 @@ 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,6 +25,7 @@ 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,6 +72,9 @@ const Home = () => {
 
     const userData = useSelector((state: RootState) => state.user);
 
+    console.log("activeAccountId", activeAccountId);
+    console.log("cards", cards);
+
     const getDashboardData = async () => {
         if (!activeAccountId) return;
 
@@ -83,7 +86,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,9 +28,13 @@ 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,10 +24,7 @@ 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-1 gap-2 mt-5">
+            <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 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,6 +37,7 @@ 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,6 +201,7 @@ 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) {
@@ -215,6 +216,7 @@ 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({})
 
 
@@ -265,6 +267,10 @@ const DocumentSubmissionOptions = () => {
         }
     }, [showConfetti]);
 
+
+    console.log("History length:", window.history.length);
+
+
     // Step 1: Fetch transaction status
     useEffect(() => {
         const fetchTransaction = async () => {

src/components/process/RecipientAddCard.tsx

@@ -0,0 +1,69 @@
+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,10 +39,11 @@ const DocumentCard: React.FC<DocumentCardProps> = ({ id, name, isCompleted , tra
     let lastUpdate = 0;
     const delay = 1000;
 
-    const docProgSSE = new EventSource(`http://192.168.2.176:8083/api/progress/${id}`);
+    const docProgSSE = new EventSource(`http://192.168.2.112:8083/api/progress/${id}`);
 
     docProgSSE.addEventListener('progress', (event) => {
       const jsonData = JSON.parse(event.data);
+      console.log(jsonData, "Kaboom");
 
       if (jsonData.isComplete) {
         isCompleted = true;
@@ -86,6 +87,8 @@ 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
@@ -100,6 +103,7 @@ 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,11 +47,22 @@ 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);
@@ -72,9 +83,15 @@ 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}`);
@@ -88,27 +105,38 @@ 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) => {
@@ -144,6 +172,7 @@ 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) ? " | " : ""} 
@@ -187,17 +216,10 @@ 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 && (recipient.routingOrder ?? 1) === minRoutingOrder ? true : false,
+        provideOwnTags: userData.email === recipient.email ? true : false,
         type: recipient.type,
         firstName: recipient.firstName,
         lastName: recipient.lastName,
@@ -227,10 +249,11 @@ const ProcessStepOne = () => {
         await Promise.all(
           selectedRecipients.map((recipient) => dispatch(removeRecipientAsync({
             recipientId: recipient.id,
+            email: recipient.email,
             accountId,
             transactionId,
-            email: recipient.email,
+          }))
-          })))
+          )
         );
 
         recipientsDataTemp = [{
@@ -251,11 +274,9 @@ const ProcessStepOne = () => {
           phone: "",
           accessCode: "",
           accessCodeDelivery: true,
-          language: userData.language ? userData.language : "en",
+          language: "en",
           name: `${userData.firstName} ${userData.lastName}`,
-          roleName: "",
+          roleName: ""
-          allowSenderToEdit: true,
-          allowSenderToDelete: true,
         }]
 
         try {
@@ -267,8 +288,7 @@ const ProcessStepOne = () => {
         }
 
       } else {
-        if(!accountId || !transactionId) return;
+        await dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
-        dispatch(addRecipientAsync({ recipientsData: recipientsDataTemp, accountId, transactionId }));
       }
       dispatch(showLoader("Processing Message..."));
 
@@ -278,6 +298,11 @@ 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) {
@@ -373,7 +398,7 @@ const ProcessStepOne = () => {
             className='flex items-center gap-3'>
 
             {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && <button
-              onClick={() => handleNextClick(true)}
+              onClick={() => handleNextClick(false, true)}
               className="text-sm px-4 py-2 rounded bg-[var(--primary)] text-white shadow hover:bg-[var(--primaryLight2)] transition cursor-pointer"
             >
               Save & Close
@@ -422,13 +447,13 @@ const ProcessStepOne = () => {
                 (signType !== SignTypeEnum.selfSign || showSelfSignWarnModal) &&
                 <div className="flex flex-col gap-4 align-start">
 
-                  <RecipientCards userEmail={userData.email} getMinRoutingOrder={getMinRoutingOrder} transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase} editRecipient={editRecipient} setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} editRecipientCurrentEmail={editRecipientCurrentEmail} />
+                  <RecipientCards transactionTemplateToggle={transactionTemplateToggle} setEditRecipient={setEditRecipient} setEditCase={setEditCase} editRecipient={editRecipient} setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} editRecipientCurrentEmail={editRecipientCurrentEmail} />
 
                   <div
                     ref={topRef}
                     className={`relative w-full bg-[var(--mainViewBg)] ${globalLoader.isLoading ? 'pointer-events-none' : ''}`}
                   >
-                    <RecipientAddCard userEmail={userData.email} getMinRoutingOrder={getMinRoutingOrder} transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase} topRef={topRef} setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} />
+                    <RecipientAddCard transactionTemplateToggle={transactionTemplateToggle} editRecipient={editRecipient} editCase={editCase} setEditRecipient={setEditRecipient} setEditCase={setEditCase} topRef={topRef} setEditRecipientCurrentEmail={setEditRecipientCurrentEmail} />
                   </div>
 
                 </div>
@@ -454,7 +479,7 @@ const ProcessStepOne = () => {
 
               {/* Message */}
               <div className='flex flex-col'>
-                <label className='text-sm font-medium text-[var(--greyTextCol)] mb-1'>Message</label>
+                <label className='text-sm font-medium text-[var(--greyTextCol)] mb-1'>Message for Signers</label>
                 <textarea
                   rows={4}
                   value={emailDtls.message}

src/components/process/processStepOne/RecipientAddCard.tsx

@@ -26,20 +26,21 @@ export interface ContactTypeObj {
 }
 
 
-const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef, setEditRecipientCurrentEmail, showCard = false, recipientData = null }) => {
+const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase, setEditRecipient, setEditCase, topRef, setEditRecipientCurrentEmail }) => {
-   const [activeAccountId, setActiveAccountId] = useState<string | 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);
 
   const dispatch = useDispatch<AppDispatch>();
   const formRef = useRef<HTMLFormElement | null>(null);
 
-  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 [recipient, setRecipients] = useState<Recipient>({ uuid: null, newOne: false, firstName: "", lastName: "", email: "", hostName: "", hostEmail: "", roleName: "", type: recipientType.SIGNER, allowSenderToEdit: true, allowSenderToDelete: true });
 
   const [showAdvanceSettings, setShowAdvanceSettings] = useState(false)
 
@@ -58,6 +59,10 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
     type: false,
   });
 
+
+
+  console.log(recipient)
+
   useEffect(() => {
     if (openContactModal) {
       if (topRef?.current) {
@@ -77,9 +82,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('');
@@ -216,11 +221,9 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
         updatedRecipient.hostEmail = "";
       }
 
-      
       if (editCase === "Edit") {
         dispatch(updateRecipient(updatedRecipient));
       } else {
-        updatedRecipient.routingOrder = 1;
         dispatch(addRecipient({
           ...updatedRecipient,
           uuid: uuidv4(),
@@ -266,7 +269,6 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
 
 
   const handleFocus = async (field: "firstName" | "lastName" | "email") => {
-
     setManualFocusTriggered(true);
     setOpenContactModal(true);
     setActiveField(field);
@@ -276,7 +278,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);
@@ -294,11 +296,11 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
 
 
   useDebouncedEffect(() => {
+    console.log("useDebouncedEffect")
     if (!activeField || !manualFocusTriggered) return;
-    
 
     const inputValue = recipient[activeField].trim().toLowerCase();
-    console.log(inputValue, "Line 297", activeField)
+
     if (inputValue.length === 0) {
       setFilteredContacts(cachedContacts);
       setContactData({ type: activeField, contacts: cachedContacts });
@@ -318,21 +320,12 @@ 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);
@@ -493,7 +486,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 });
@@ -607,12 +600,12 @@ const RecipientAddCard = ({ transactionTemplateToggle, editRecipient, editCase,
             ))}
           </div>
 
-         {!showCard && <button
+          <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

@@ -2,19 +2,19 @@ import { useDispatch, useSelector } from "react-redux";
 import {
     removeRecipientAsync,
     removeSelectedRecipient,
+    // setSigningOrder,
     updateRecipientOrder,
-    TRANSACTION_TEMPLATE_TOGGLE,
-    updateRecipient,
-    recipientType,
 } from "../../../store/slices/selectedRecipientsSlice";
 import { AppDispatch, RootState } from "../../../store/store";
+
 import { ImBin } from "react-icons/im";
+import { FaUsersLine } from "react-icons/fa6";
 import { useState } from "react";
 import SigningOrderDiagram from "../../../SigningOrderDiagram ";
 import { IoCloseOutline } from "react-icons/io5";
 import { useParams } from "react-router-dom";
 import { FiEdit } from "react-icons/fi";
-import { FaUsersLine } from "react-icons/fa6";
+import { RiPencilFill } from "react-icons/ri";
 
 const getInitials = (name: string) => {
     if (!name) return "";
@@ -26,214 +26,82 @@ const getInitials = (name: string) => {
 };
 
 type CardsData = {
-    userEmail: string;
-    getMinRoutingOrder: () => number;
     editRecipient: any;
-    setEditRecipient: (recipient: any) => void;
+    setEditRecipient: (recipient: any) => void; // Replace `any` with the actual type if known
     setEditCase: (string: any) => void;
-    transactionTemplateToggle: string;
+    transactionTemplateToggle: string
-    editRecipientCurrentEmail: string;
+    editRecipient: any
-    setEditRecipientCurrentEmail: (email: string) => void;
+    setEditRecipientCurrentEmail: any,
+    editRecipientCurrentEmail: string
 };
 
-const RecipientCards = ({
+
-    setEditRecipient,
+const RecipientCards = ({ setEditRecipient, setEditCase, transactionTemplateToggle, editRecipient, editCase, setEditRecipientCurrentEmail, editRecipientCurrentEmail }: CardsData) => {
-    setEditCase,
-    transactionTemplateToggle,
-    editRecipient,
-    editRecipientCurrentEmail,
-    setEditRecipientCurrentEmail,
-}: CardsData) => {
     const templateId = useParams<{ templateId: string }>().templateId;
-    let { accountId, transactionId } = useParams<{ accountId: string; transactionId: string }>();
+    let { accountId, transactionId } = useParams<{ accountId: string, transactionId: string }>();
-    const dispatch = useDispatch<AppDispatch>();
+
+
+    const dispatch = useDispatch();
 
     if (!transactionId) {
         transactionId = templateId;
     }
 
     const recipients = useSelector((state: RootState) => state.selectedRecipients.recipients);
+    console.log("recipients.length", recipients)
+    // const signingOrder = useSelector((state: RootState) => state.selectedRecipients.signingOrder);
     const signType = useSelector((state: RootState) => state.selectedDocuments.signType);
+
     const [signingOrderModal, setSigningOrderModal] = useState({ open: false });
-    const [editingField, setEditingField] = useState<{ recipientId: string; fieldName: string } | null>(null);
-    const [localChanges, setLocalChanges] = useState<Record<string, any>>({});
-    const [errors, setErrors] = useState<Record<string, { hostName: boolean; hostEmail: boolean }>>({});
-
-    const getRecipientIdentifier = (recipient: any) => {
-        return recipient.id || recipient.uuid;
-    };
-
-    const isEditable = (recipient: any) => {
-        return transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES
-            ? true
-            : recipient.newOne || recipient.allowSenderToEdit;
-    };
-
-    const validateInPersonSignerFields = (recipient: any, updatedFields: any) => {
-        if (recipient.type !== recipientType.INPERSONSIGNER) return true;
-        const hostName = updatedFields.hostName ?? getCurrentValue(recipient, "hostName");
-        const hostEmail = updatedFields.hostEmail ?? getCurrentValue(recipient, "hostEmail");
-        const identifier = getRecipientIdentifier(recipient);
-        const newErrors = { hostName: !hostName, hostEmail: !hostEmail };
-        setErrors((prev) => ({ ...prev, [identifier]: newErrors }));
-        return !newErrors.hostName && !newErrors.hostEmail;
-    };
-
-    const handleFieldFocus = (recipientId: string, fieldName: string) => {
-        setEditingField({ recipientId, fieldName });
-    };
-
-    const handleFieldBlur = (recipient: any, fieldName: string, value: any) => {
-        const identifier = getRecipientIdentifier(recipient);
-        const updatedRecipient = { ...recipient, [fieldName]: value, uuid: identifier };
-
-        if (recipient.type === recipientType.INPERSONSIGNER && (fieldName === "hostName" || fieldName === "hostEmail")) {
-            if (!validateInPersonSignerFields(recipient, { [fieldName]: value })) {
-                return;
-            }
-        }
-
-        dispatch(updateRecipient(updatedRecipient));
-        setLocalChanges((prev) => ({
-            ...prev,
-            [`${identifier}_${fieldName}`]: undefined,
-        }));
-        setEditingField(null);
-        setErrors((prev) => ({ ...prev, [identifier]: { hostName: false, hostEmail: false } }));
-    };
-
-    const handleFieldChange = (recipient: any, fieldName: string, value: any) => {
-        const identifier = getRecipientIdentifier(recipient);
-        setLocalChanges((prev) => ({
-            ...prev,
-            [`${identifier}_${fieldName}`]: value,
-        }));
-    };
-
-    const getCurrentValue = (recipient: any, fieldName: string) => {
-        const identifier = getRecipientIdentifier(recipient);
-        const localValue = localChanges[`${identifier}_${fieldName}`];
-        return localValue !== undefined ? localValue : recipient[fieldName];
-    };
-
-    const hasValue = (recipient: any, fieldName: string) => {
-        const currentValue = getCurrentValue(recipient, fieldName);
-        return currentValue && currentValue.toString().trim() !== "";
-    };
-
-    const renderEditableField = (
-        recipient: any,
-        fieldName: string,
-        placeholder: string,
-        className = "",
-        type = "text"
-    ) => {
-        const identifier = getRecipientIdentifier(recipient);
-        const currentValue = getCurrentValue(recipient, fieldName);
-        const isEditing = editingField?.recipientId === identifier && editingField?.fieldName === fieldName;
-        const showValue = hasValue(recipient, fieldName);
-        const error = errors[identifier]?.[fieldName];
-        const editable = isEditable(recipient);
-
-        if (isEditing && editable) {
-            return (
-                <div className="relative">
-                    <input
-                        type={type}
-                        value={currentValue || ""}
-                        placeholder={placeholder}
-                        autoFocus
-                        onFocus={() => handleFieldFocus(identifier, fieldName)}
-                        onBlur={(e) => handleFieldBlur(recipient, fieldName, e.target.value)}
-                        onChange={(e) => handleFieldChange(recipient, fieldName, e.target.value)}
-                        onKeyPress={(e) => {
-                            if (e.key === "Enter") {
-                                e.currentTarget.blur();
-                            }
-                        }}
-                        className={`w-full px-3 py-1 border ${error ? "border-red-500 placeholder-red-500 text-xs" : "border-gray-300"
-                            } rounded-lg text-sm focus:outline-none focus:ring-0 focus:ring-gray-300 ${className}`}
-                    />
-                    {/* {error && (
-                        <span className="text-red-500 text-xs absolute left-0">{`${placeholder} is required`}</span>
-                    )} */}
-                </div>
-            );
-        }
-
-        return (
-            <span
-                onClick={editable ? () => handleFieldFocus(identifier, fieldName) : undefined}
-                className={`${editable
-                        ? "cursor-pointer hover:bg-gray-100 rounded px-1 transition-colors"
-                        : "cursor-not-allowed"
-                    } ${showValue ? "text-gray-800" : "text-gray-400 italic"} ${className}`}
-                title={editable ? "Click to edit" : "Editing disabled"}
-            >
-                {showValue ? currentValue : placeholder}
-            </span>
-        );
-    };
 
     const handleOrderChange = (id: string, value: number) => {
         dispatch(updateRecipientOrder({ id, routingOrder: value }));
     };
 
-    const handleEditRecipient = (recipient: any) => {
+    const handleEditRecipient = (recipient) => {
-        setEditCase("Edit");
+        // alert(JSON.stringify(recipient))
-        setEditRecipient(recipient);
+        setEditCase('Edit')
-        setEditRecipientCurrentEmail(recipient.id || recipient.uuid);
+        setEditRecipient(recipient)
-    };
-
-    const handleRemoveRecipient = (recipient: any) => {
-        if (!accountId || !transactionId) return;
-
         if (recipient.uuid) {
-            dispatch(removeSelectedRecipient(recipient));
+            setEditRecipientCurrentEmail(recipient.uuid)
-        } else {
+        }else{
-            dispatch(
+            setEditRecipientCurrentEmail(recipient.id)
-                removeRecipientAsync({
-                    recipientId: recipient.id,
-                    email: recipient.email,
-                    accountId: accountId,
-                    transactionId: transactionId,
-                })
-            );
         }
+    }
 
+    const handleRemoveRecipient = (recipient) => {
+        if (!accountId || !transactionId) return;
+        // dispatch(removeSelectedRecipient(recipient))
+        // dispatch(removeRecipientAsync([{
+        //     recipientId: recipient.id,
+        //     email: recipient.email,
+        //     accountId: accountId,
+        //     transactionId: transactionId,
+        // }]))
+        // =======
+        if (recipient.uuid) {
+            dispatch(removeSelectedRecipient(recipient))
+        } else {
+            dispatch(removeRecipientAsync({
+                recipientId: recipient.id,
+                email: recipient.email,
+                accountId: accountId,
+                transactionId: transactionId,
+            }))
+        }
         if (recipients.length === 2) {
-            const leftRecipient = recipients.filter((obj) => {
+            let leftRecipient = recipients.filter((obj) => {
                 if ("id" in obj && "id" in recipient) {
-                    return obj.id !== recipient.id;
+                    if (obj.id !== recipient.id) return true
                 }
                 if ("email" in obj && "email" in recipient) {
-                    return obj.email !== recipient.email;
+                    if (obj.email !== recipient.email) return true
                 }
-                return false;
+                return false
-            });
+            })
-            dispatch(
+            dispatch(updateRecipientOrder({ id: leftRecipient[0].id || leftRecipient[0].email, routingOrder: 1 }));
-                updateRecipientOrder({ id: leftRecipient[0].id || leftRecipient[0].email, routingOrder: 1 })
-            );
         }
-    };
+    }
-
-    const handleTypeChange = (recipient: any, type: string) => {
-        const identifier = getRecipientIdentifier(recipient);
-        const updatedRecipient = { ...recipient, type, uuid: identifier };
-
-        if (type === recipientType.SIGNER || type === recipientType.CC) {
-            updatedRecipient.hostName = "";
-            updatedRecipient.hostEmail = "";
-            setErrors((prev) => ({ ...prev, [identifier]: { hostName: false, hostEmail: false } }));
-        } else if (type === recipientType.INPERSONSIGNER) {
-            if (!validateInPersonSignerFields(recipient, updatedRecipient)) {
-                return;
-            }
-        }
-
-        dispatch(updateRecipient(updatedRecipient));
-        setEditingField(null);
-    };
 
     return (
         <div className="w-full bg-white rounded-md shadow-sm border border-gray-200">
@@ -244,8 +112,23 @@ const RecipientCards = ({
                             <h3 className="text-sm font-semibold text-gray-700">
                                 Recipients ({recipients.length})
                             </h3>
-                            <label
+                            {/* <label className="flex items-center cursor-pointer select-none">
-                                className="flex items-center gap-2 cursor-pointer select-none"
+                                <span className="mr-2 text-xs font-medium text-gray-600">Signing Order</span>
+                                <input
+                                    type="checkbox"
+                                    checked={signingOrder}
+                                    onChange={() => dispatch(setSigningOrder(!signingOrder))}
+                                    className="sr-only peer"
+                                />
+                                <div className="w-9 h-5 bg-gray-300 rounded-full peer-checked:bg-[var(--primary)] relative transition-colors duration-300">
+                                    <span
+                                        className={`absolute left-1 top-1/2 w-3.5 h-3.5 bg-white rounded-full shadow transform transition-transform duration-300 -translate-y-1/2 ${signingOrder ? "translate-x-4" : "translate-x-0"
+                                            }`}
+                                    />
+                                </div>
+                            </label> */}
+
+                            <label className="flex items-center gap-2 cursor-pointer select-none"
                                 onClick={() => setSigningOrderModal({ ...signingOrderModal, open: true })}
                             >
                                 <span className="text-xs font-medium text-gray-600">Signing Order</span>
@@ -258,191 +141,91 @@ const RecipientCards = ({
                         {recipients.map((recipient, idx) => (
                             <div
                                 key={recipient.email + idx}
-                                className={`flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail
+                                className={`flex items-center justify-between px-4  py-3 hover:bg-gray-50 transition-colors ${(recipient.uuid || recipient.id) === editRecipientCurrentEmail ? "bg-neutral-100  opacity-40 " : ""}`}
-                                        ? "bg-neutral-100 opacity-40"
-                                        : ""
-                                    }`}
                             >
                                 <div className="flex items-center gap-3 min-w-0">
-                                    {recipients.length > 1 ? (
+                                    {/* {signingOrder && ( */}
-                                        <div className="relative">
+                                    {recipients.length > 1 ? <div className="relative">
-                                            <input
-                                                type="number"
-                                                value={recipient.routingOrder || 1}
-                                                min={1}
-                                                onChange={(e) =>
-                                                    handleOrderChange(
-                                                        recipient.id || recipient.email,
-                                                        Number(e.target.value)
-                                                    )
-                                                }
-                                                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"
-                                            />
-                                        </div>
-                                    ) : (
                                         <input
                                             type="number"
-                                            disabled
+                                            value={recipient.routingOrder || 1}
-                                            value={recipient.routingOrder}
                                             min={1}
                                             onChange={(e) =>
-                                                handleOrderChange(
+                                                handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
-                                                    recipient.id || recipient.email,
+                                            }
-                                                    Number(e.target.value)
+                                            className="w-10 h-6  text-center rounded text-sm text-gray-600  focus:outline-none focus:ring-[var(--primary)] border border-dashed border-gray-400 bg-slate-100"
-                                                )
+                                        />
+                                        {/* <RiPencilFill className="absolute top-1.5 right-0 text-[14px] text-gray-500" /> */}
+                                    </div>
+                                        : <input
+                                            type="number"
+                                            disabled
+                                            value={recipient.routingOrder || 1}
+                                            min={1}
+                                            onChange={(e) =>
+                                                handleOrderChange(recipient.id || recipient.email, Number(e.target.value))
                                             }
                                             className="w-8 text-center rounded text-sm text-gray-700 border-none focus:outline-none focus:ring-[var(--primary)]"
-                                        />
+                                        />}
-                                    )}
+                                        
-                                    <div className="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--primary)] text-white flex items-center justify-center font-semibold text-xs select-none">
+                                        <div className="flex-shrink-0 w-8 h-8 rounded-full bg-[var(--primary)] text-white flex items-center justify-center font-semibold text-xs select-none">
-                                        {getInitials(`${recipient.firstName} ${recipient.lastName || ""}`)}
+                                            {getInitials(`${recipient.firstName} ${recipient.lastName || ""}`)}
+                                        </div>
+
+                                        <div className="min-w-0">
+                                            <p className="font-semibold text-gray-800 truncate text-sm">
+                                                {recipient.firstName} {recipient.lastName || ""}
+                                            </p>
+                                            <p className="text-xs text-gray-500 truncate">
+                                                {recipient.email} | {recipient.type}  {recipient.roleName ? `| Role : ${recipient.roleName}` : ""}
+                                            </p>
+                                        </div>
                                     </div>
-                                    <div className="min-w-0">
+
-                                        <p className="font-semibold text-gray-800 truncate text-xs flex items-center gap-0.5">
+                                    {signType !== "self-sign" && (
-                                            {renderEditableField(recipient, "firstName", "First Name")} 
+                                        <div className="flex justify-between gap-2 items-center">
-                                            {renderEditableField(recipient, "lastName", "Last Name")}
+                                            {/* Edit Button */}
-                                            {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
+                                            <button
-                                                <span className="flex items-center gap-2">
+                                                type="button"
-                                                    <span className="text-gray-400 ">| Permissions granted :</span>
+                                                title="Edit recipient"
-                                                    <FiEdit
+                                                aria-label={`Edit recipient ${recipient.firstName}`}
-                                                        className={`cursor-pointer h-3 w-3 ${recipient.allowSenderToEdit
+                                                onClick={() => handleEditRecipient(recipient)}
-                                                                ? "text-blue-500"
+                                                disabled={
-                                                                : "text-gray-400"
+                                                    // For templates: always enabled (never disabled)
-                                                            } hover:text-blue-800`}
+                                                    ['templates'].includes(transactionTemplateToggle)
-                                                        onClick={() =>
+                                                        ? false
-                                                            dispatch(
+                                                        : // For transactions: disabled if not newOne AND not allowed to edit
-                                                                updateRecipient({
+                                                        (!recipient.newOne && !recipient.allowSenderToEdit)
-                                                                    ...recipient,
-                                                                    allowSenderToEdit: !recipient.allowSenderToEdit,
-                                                                    uuid: getRecipientIdentifier(recipient),
-                                                                })
-                                                            )
-                                                        }
-                                                    />
-                                                    <ImBin
-                                                        className={`cursor-pointer h-3 w-3 ${recipient.allowSenderToDelete
-                                                                ? "text-red-500"
-                                                                : "text-gray-400"
-                                                            } hover:text-red-700`}
-                                                        onClick={() =>
-                                                            dispatch(
-                                                                updateRecipient({
-                                                                    ...recipient,
-                                                                    allowSenderToDelete: !recipient.allowSenderToDelete,
-                                                                    uuid: getRecipientIdentifier(recipient),
-                                                                })
-                                                            )
-                                                        }
-                                                    />
-                                                </span>
-                                            )}
-                                        </p>
-                                        <p className="text-xs text-gray-500 truncate flex items-center gap-1">
-                                            {renderEditableField(recipient, "email", "Recipient Email", "", "email")} |
-                                            <span
-                                                onClick={
-                                                    isEditable(recipient)
-                                                        ? () => handleFieldFocus(getRecipientIdentifier(recipient), "type")
-                                                        : undefined
                                                 }
-                                                className={`${isEditable(recipient)
+                                                className="text-gray-400 hover:text-blue-600 transition-colors cursor-pointer disabled:opacity-50"
-                                                        ? "cursor-pointer hover:bg-gray-100"
-                                                        : "cursor-not-allowed"
-                                                    } rounded px-1 transition-colors`}
                                             >
-                                                {recipient.type}
+                                                <FiEdit size={16} />
-                                            </span>
+                                            </button>
-                                            {(hasValue(recipient, "roleName") ||
+
-                                                transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES) && (
+                                            {/* Delete Button */}
-                                                    <span>
+                                            <button
-                                                        {" | Role: "}
+                                                type="button"
-                                                        {renderEditableField(recipient, "roleName", "Role name")}
+                                                title="Remove recipient"
-                                                    </span>
+                                                aria-label={`Remove recipient ${recipient.firstName}`}
-                                                )}
+                                                onClick={() => handleRemoveRecipient(recipient)}
-                                            {recipient.type === recipientType.INPERSONSIGNER && (
+                                                disabled={
-                                                <>
+                                                    // For templates: always enabled (never disabled)
-                                                    <span className="flex items-center">
+                                                    ['templates'].includes(transactionTemplateToggle)
-                                                        <span>{" | Host Name: "}</span>
+                                                        ? false
-                                                        {renderEditableField(recipient, "hostName", "Host Name")}
+                                                        : // For transactions: disabled if not newOne AND not allowed to delete
-                                                        <span>{" | Host Email: "}</span>
+                                                        (!recipient.newOne && !recipient.allowSenderToDelete)
-                                                        {renderEditableField(recipient, "hostEmail", "Host Email", "", "email")}
+                                                }
-                                                    </span>
+                                                className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50"
-                                                </>
+                                            >
-                                            )}
+                                                <ImBin size={16} />
-                                        </p>
+                                            </button>
-                                        {editingField?.recipientId === getRecipientIdentifier(recipient) &&
+                                        </div>
-                                            editingField?.fieldName === "type" &&
+
-                                            isEditable(recipient) && (
+
-                                                <div className="flex items-center gap-2 mt-1">
+                                    )}
-                                                    <label className="flex items-center gap-1">
-                                                        <input
-                                                            type="radio"
-                                                            name={`recipient-type-${getRecipientIdentifier(recipient)}`}
-                                                            value={recipientType.SIGNER}
-                                                            checked={recipient.type === recipientType.SIGNER}
-                                                            onChange={() =>
-                                                                handleTypeChange(recipient, recipientType.SIGNER)
-                                                            }
-                                                            onBlur={() => setEditingField(null)}
-                                                            className="accent-[var(--primary)]"
-                                                            disabled={!isEditable(recipient)}
-                                                        />
-                                                        <span className="text-xs">Signer</span>
-                                                    </label>
-                                                    <label className="flex items-center gap-1">
-                                                        <input
-                                                            type="radio"
-                                                            name={`recipient-type-${getRecipientIdentifier(recipient)}`}
-                                                            value={recipientType.INPERSONSIGNER}
-                                                            checked={recipient.type === recipientType.INPERSONSIGNER}
-                                                            onChange={() =>
-                                                                handleTypeChange(recipient, recipientType.INPERSONSIGNER)
-                                                            }
-                                                            onBlur={() => setEditingField(null)}
-                                                            className="accent-[var(--primary)]"
-                                                            disabled={!isEditable(recipient)}
-                                                        />
-                                                        <span className="text-xs">In Person Signer</span>
-                                                    </label>
-                                                    <label className="flex items-center gap-1">
-                                                        <input
-                                                            type="radio"
-                                                            name={`recipient-type-${getRecipientIdentifier(recipient)}`}
-                                                            value={recipientType.CC}
-                                                            checked={recipient.type === recipientType.CC}
-                                                            onChange={() =>
-                                                                handleTypeChange(recipient, recipientType.CC)
-                                                            }
-                                                            onBlur={() => setEditingField(null)}
-                                                            className="accent-[var(--primary)]"
-                                                            disabled={!isEditable(recipient)}
-                                                        />
-                                                        <span className="text-xs">CC</span>
-                                                    </label>
-                                                </div>
-                                            )}
-                                    </div>
                                 </div>
-                                {signType !== "self-sign" && (
+                            )
-                                    <div className="flex justify-between gap-2 items-center">
+                        )}
-                                        <button
-                                            type="button"
-                                            title="Remove recipient"
-                                            aria-label={`Remove recipient ${recipient.firstName}`}
-                                            onClick={() => handleRemoveRecipient(recipient)}
-                                            disabled={
-                                                transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES
-                                                    ? false
-                                                    : !recipient.newOne && !recipient.allowSenderToDelete
-                                            }
-                                            className="text-gray-400 hover:text-red-600 transition-colors cursor-pointer disabled:opacity-50"
-                                        >
-                                            <ImBin size={16} />
-                                        </button>
-                                    </div>
-                                )}
-                            </div>
-                        ))}
                     </div>
                 </>
             ) : (
@@ -451,24 +234,28 @@ const RecipientCards = ({
                 </div>
             )}
 
-            {signingOrderModal.open && (
+            {signingOrderModal.open &&
                 <div className="fixed top-0 left-0 inset-0 z-50 bg-black/50 backdrop-blur-sm flex justify-center items-center">
                     <div className="flex-col relative justify-center items-center max-w-[80%] max-h-[60vh] h-full overflow-auto">
                         <div className="p-2 rounded-t-lg text-white flex justify-between items-center bg-[var(--primary)]">
                             <p className="font-semibold">Signing Order</p>
                             <div
                                 onClick={() => setSigningOrderModal({ ...signingOrderModal, open: false })}
-                                className="text-xl cursor-pointer hover:text-gray-200 transition-all"
+                                className="text-xl cursor-pointer hover:text-gray-200 transition-all">
-                            >
                                 <IoCloseOutline />
                             </div>
                         </div>
                         <SigningOrderDiagram signers={recipients} />
                     </div>
                 </div>
-            )}
+            }
+
+
+
+
+
         </div>
     );
 };
 
-export default RecipientCards;
+export default RecipientCards;

src/components/process/processStepOne/SelectedDocuments.tsx

@@ -52,10 +52,8 @@ const SelectedDocuments = ({transactionTemplateToggle}) => {
 
      const handleUpload = (filesToUpload: File[]) => {
         const formData = new FormData();
-
+        formData.append("file", filesToUpload[0])
-        filesToUpload.forEach(file => {
+        console.log(formData, "Line 59")
-            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/DocumentContainer.tsx

@@ -21,7 +21,6 @@ import Loader from '../../dashboard/Loader';
 import { handleGroupBorderPosition } from '../../../utlity/tagGroupConUtils';
 import { hideLoader, showLoader } from '../../../store/slices/loaderSlice';
 import { IsSendInterface } from './ProcessStepTwo';
-import DroppedItemsTagsCon from './DroppedItemsTagsCon';
 
 export interface DroppedItemsObj {
     [key: string]: DroppedItem[]
@@ -391,19 +390,31 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
         //     }
         // }
 
-        let updatedTags: any = [];
+        let updatedTags : any = [];
 
         for (const dropPagesId of Object.keys(droppedItems)) {
             console.log("Dropped Item:", droppedItems[dropPagesId]);
             updatedTags.push(...droppedItems[dropPagesId]);
         }
 
+
+        console.log(updatedTags, "updatedTags")
+
         let tagsData = groupByRecipientId(updatedTags);
+
         await sendTagsToRecipients(tagsData, accountId, transactionId);
-        return
+
+        // if (save) {
+        //     if (selectedRecipients.length === 0) return;
+        //     fetchTags();
+        //     setSelectedTag(null)
+        // }
+
         // SENDING Transaction - START
         if (!save) {
             const res = await api.put(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
+            // const res = await api.put(`/api/accounts/${accountId}/transactions/${transactionId}`, { status: "SENT" })
+            console.log(res, "Check123")
             dispatch(hideLoader())
         }
         // SENDING Transaction - END
@@ -415,16 +426,16 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
     }, [isSend])
     // Save Tags - END
 
-    // handleTransactionSaving - START
+    useEffect(() => {
-
+        // setTimeout(() => {
-    // useEffect(() => {
+        const interval = setInterval(async () => {
-    //     const interval = setInterval(async () => {
+            // debugger
-    //         setTransactionSaving(true)
+            setTransactionSaving(true)
-    //     }, 8000)
+            // handleTransactionProcess(true);
-    //     return () => clearInterval(interval);
+        }, 8000)
-    // }, [droppedItems])
+        // }, 8000)
-
+        return () => clearInterval(interval);
-    // handleTransactionSaving - END
+    }, [droppedItems])
 
     useEffect(() => {
         if (transactionSaving) {
@@ -519,18 +530,142 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
                 prepData],
         }
 
+        // const dataToSet: DroppedItemsObj = {
+        //     ...droppedItems,
+        //     [key]: [...(droppedItems[key] || []),
+        //     {
+        //         ...prepData,
+        //         radioGroups: dragElemData.label === "radio" ?
+        //             [
+        //                 {
+        //                     ...prepData,
+        //                     dimensions: {
+        //                         ...prepData.dimensions, top: 8, left: 10
+        //                     }
+        //                 },
+        //                 {
+        //                     ...prepData, dimensions: {
+        //                         ...prepData.dimensions,
+        //                         top: 8,
+        //                         left: 10
+        //                     }
+        //                 }
+        //             ]
+        //             :
+        //             []
+        //     }],
+        // }
+
+        // if (dragElemData.label === "radio") {
+        //     setDroppedItems(dataToSet);
+        // } else {
+        //     setDroppedItems(dataToSet);
+        // }
+
         console.log("data311", dataToSet)
         setDroppedItems(dataToSet);
         setDroppedItemsCounter((prev) => prev + 1);
 
         setTimeout(() => {
             const tagIndex = key in droppedItems ? droppedItems[key].length : 0;
-            setSelectedTag({ key, tagIndex })
+            handleTagClick(key, tagIndex)
         }, 0)
     };
     // HANDLE DROP - END
 
+    // HANDLE TAG MOUSE DOWN - START
+    // Updated handleTagMouseDown function with proper group border positioning
+    const handleTagMouseDown = (event: React.MouseEvent<HTMLDivElement>, key: string, index: number) => {
+        event.preventDefault();
 
+        let targetContainer = event?.currentTarget?.parentElement?.parentElement;
+        let targetElement = event?.currentTarget?.parentElement;
+
+        if (!targetContainer || !targetElement) return;
+
+        const containerRect = targetContainer.getBoundingClientRect();
+        const elementRect = targetElement.getBoundingClientRect();
+
+        // Calculate the initial offset (where the mouse was clicked inside the element)
+        const offsetX = event.clientX - elementRect.left;
+        const offsetY = event.clientY - elementRect.top;
+
+        const conScrollWidth = targetContainer?.scrollWidth;
+        const conScrollHeight = targetContainer?.scrollHeight;
+
+        let isGroupAttr = event.currentTarget.hasAttribute("group");
+        let groupId = null;
+        if (isGroupAttr) {
+            groupId = event.currentTarget.getAttribute("group");
+        }
+
+        let groupElements: NodeListOf<HTMLElement> | null = null;
+        if (isGroupAttr && groupId) {
+            groupElements = document.querySelectorAll(`div[group="${groupId}"]`);
+            // Show initial border position during drag start
+            handleGroupBorderPosition(groupElements, containerRect, offsetX, offsetY);
+        }
+
+        const handleMouseMove = (event: MouseEvent) => {
+            // Get new X and Y positions relative to the container
+            let left = event.clientX - containerRect.left - offsetX;
+            let top = event.clientY - containerRect.top - offsetY;
+
+            // Restrict movement within container bounds
+            left = Math.max(0, Math.min(left, conScrollWidth - elementRect.width));
+            top = Math.max(0, Math.min(top, conScrollHeight - elementRect.height));
+
+            // Apply the movement to the element first
+            setDroppedItems(prevState => ({
+                ...prevState,
+                [key]: Array.isArray(prevState[key])
+                    ? prevState[key].map((item, i) =>
+                        i === index ? { ...item, dimensions: { ...item.dimensions, left, top }, update: true } : item
+                    )
+                    : [],
+            }));
+
+            // Update group border position during drag if it's a group element
+            if (groupElements != null && groupElements.length) {
+                // Use a small timeout to ensure DOM is updated before recalculating borders
+                requestAnimationFrame(() => {
+                    handleGroupBorderPosition(groupElements!, containerRect, offsetX, offsetY);
+                });
+            }
+        };
+
+        const handleMouseUp = () => {
+            // CRITICAL: Ensure group borders are properly positioned after drag ends
+            if (groupElements != null && groupElements.length && groupId) {
+                // Multiple approaches to ensure the positioning works:
+
+                // 1. Immediate update
+                setTimeout(() => {
+                    handleIGroupBorderPosition(groupId);
+                }, 10);
+
+                // 2. Secondary update to ensure it's properly positioned
+                setTimeout(() => {
+                    handleIGroupBorderPosition(groupId);
+                }, 100);
+
+                // 3. Final update using requestAnimationFrame for DOM sync
+                requestAnimationFrame(() => {
+                    setTimeout(() => {
+                        handleIGroupBorderPosition(groupId);
+                    }, 50);
+                });
+            }
+
+            document.removeEventListener("pointermove", handleMouseMove);
+            document.removeEventListener("pointerup", handleMouseUp);
+        };
+
+        // Add event listeners
+        document.addEventListener("pointermove", handleMouseMove);
+        document.addEventListener("pointerup", handleMouseUp);
+    };
+    // HANDLE TAG MOUSE DOWN - END
 
     // HANDLE EXPAND TAG - START
     const handleExpandTag = (event: React.MouseEvent<HTMLDivElement>, key: string, index: number) => {
@@ -588,6 +723,99 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
     };
     // HANDLE EXPAND TAG - END
 
+    const handleTagClick = (key: string, index: number) => {
+        setSelectedTag({ key, index })
+    }
+
+    // Updated handleRemoveTag function with your existing API logic and group handling
+    const handleRemoveTag = (key: string, targetIndex: number) => {
+        const tag = droppedItems[key][targetIndex];
+        const recipientId = tag.recipientId;
+
+        (async () => {
+            if ("id" in tag) {
+                try {
+                    const response = await api.delete(`/api/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}/recipients/${recipientId}/tags/${tag.id}`)
+                    if (response.status !== 200) throw "Tag Deletion error"
+                } catch (err) {
+                    console.error("Tag Deletion error")
+                    return;
+                }
+            }
+
+            setSelectedTag(null);
+
+            // Check if this item has a group for special group handling
+            if ('group' in tag && tag.group) {
+                const groupId = tag.group;
+
+                // Find all items in the same group
+                const groupItems = droppedItems[key]
+                    .map((item, idx) => ({ item, index: idx }))
+                    .filter(({ item }) => 'group' in item && item.group === groupId && !item.isDeleted);
+
+                // Sort group items by their top position to identify the parent (top-most)
+                groupItems.sort((a, b) => a.item.dimensions.top - b.item.dimensions.top);
+
+                // Check if the item being removed is the parent (top-most item)
+                const isParentItem = groupItems.length > 0 && groupItems[0].index === targetIndex;
+
+                if (isParentItem && groupItems.length > 1) {
+                    // If removing the parent and there are child items, mark all items in the group as deleted
+                    console.log(`Removing parent item and all children for group: ${groupId}`);
+
+                    // Get indices of all group items to mark as deleted
+                    const indicesToDelete = groupItems.map(({ index }) => index);
+
+                    setDroppedItems(prevState => ({
+                        ...prevState,
+                        [key]: prevState[key].map((item, index) =>
+                            indicesToDelete.includes(index) ? { ...item, isDeleted: true } : item
+                        )
+                    }));
+
+                    // Remove group border elements after state update
+                    setTimeout(() => {
+                        removeGroupBorders(groupId);
+                    }, 100);
+
+                } else {
+                    // If removing a child item or the only item in group, just mark this item as deleted
+                    console.log(`Removing individual item from group: ${groupId}`);
+
+                    setDroppedItems(prevState => ({
+                        ...prevState,
+                        [key]: prevState[key].map((item, index) =>
+                            index === targetIndex ? { ...item, isDeleted: true } : item
+                        )
+                    }));
+
+                    // Check if this was the last item in the group after state update
+                    setTimeout(() => {
+                        const remainingGroupItems = droppedItems[key].filter(item =>
+                            'group' in item && item.group === groupId && !item.isDeleted
+                        );
+
+                        if (remainingGroupItems.length === 0) {
+                            // Remove group borders if no items left
+                            removeGroupBorders(groupId);
+                        } else {
+                            // Update group borders for remaining items
+                            handleIGroupBorderPosition(groupId);
+                        }
+                    }, 100);
+                }
+            } else {
+                // Handle non-group item removal (your existing logic)
+                setDroppedItems(prevState => ({
+                    ...prevState,
+                    [key]: prevState[key].map((item, index) =>
+                        index === targetIndex ? { ...item, isDeleted: true } : item
+                    )
+                }));
+            }
+        })()
+    };
 
     // Helper function to remove group border elements from DOM
     const removeGroupBorders = (groupId: string) => {
@@ -842,14 +1070,99 @@ const DocumentContainer: React.FC<DocumentContainerProps> = ({ transactionSaving
                                                     className='drop-page-in shadow-md relative'
                                                 >
 
-                                                    <DroppedItemsTagsCon
+                                                    {/* DROPPED ITEMS - Render only the dropped items for this specific docId and page - STARTS */}
-                                                        droppedItems={droppedItems}
+                                                    {droppedItems[key]?.map((item, index) => {
-                                                        key={key}
+                                                        if (item.isDeleted) return;
-                                                        selectedTag={selectedTag}
+
-                                                        setSelectedTag={setSelectedTag}
+                                                        const type = item.type.toUpperCase();
-                                                        accountId={accountId}
+                                                        const IconComponent = typeToIconMap[type] || <FaQuestionCircle />;
-                                                        transaction
+                                                        const selectedRecipient = selectedRecipients.filter((obj, indx) => obj.id === item.recipientId);
-                                                    />
+                                                        return (
+                                                            <React.Fragment key={index}>
+                                                                <div
+                                                                    // key={index}
+                                                                    draggable="false"
+                                                                    className="absolute rounded dropped-item"
+                                                                    onClick={() => handleTagClick(key, index)}
+                                                                    style={{
+                                                                        left: `${item.dimensions.left}px`,
+                                                                        top: `${item.dimensions.top}px`,
+                                                                        width: item.type === "radio" ? `${item.dimensions.width + 20}px` : `${item.dimensions.width}px`,
+                                                                        height: item.type === "radio" ? `max-content` : `${item.dimensions.height}px`
+                                                                    }}
+                                                                >
+
+
+                                                                    {/* If Selected Tag Recipient Info- START */}
+                                                                    {selectedTag?.key && selectedTag.key === key && selectedTag.index === index &&
+                                                                        <div className='absolute flex justify-between items-center w-full max-w-max bg-white top-[-22px] shadow z-20 text-sm rounded-t-sm' >
+                                                                            <div className='flex justify-center items-center gap-1 bg-white px-2 shadow'>
+                                                                                <p className='w-2.5 h-2.5 rounded'
+                                                                                    style={{ background: selectedRecipient[0]?.color }}
+                                                                                ></p>
+                                                                                <p
+                                                                                    className=''>{IconComponent}
+                                                                                </p>
+                                                                                <p className='capitalize text-ellipsis whitespace-nowrap'>{item.label}</p>
+                                                                                <IoMdClose onClick={(e) => {
+                                                                                    e.stopPropagation();
+                                                                                    handleRemoveTag(key, index)
+                                                                                }} className='cursor-pointer' />
+                                                                            </div>
+                                                                        </div>}
+                                                                    {/* If Selected Tag Recipient Info- END */}
+
+
+
+
+                                                                    {/* Expand Circle - STARTS */}
+                                                                    {item.type !== "radio" && item.type !== "checkbox" && <div
+                                                                        onPointerDown={(e) => handleExpandTag(e, key, index)}
+                                                                        className='w-2.5 h-2.5 absolute bg-red-400 rounded-full bottom-[-8px] right-[-8px] cursor-nw-resize hover:bg-blue-400'>
+                                                                    </div>}
+                                                                    {/* Expand Circle - ENDS */}
+
+                                                                    {/* Tag - START */}
+                                                                    {
+                                                                        <div
+                                                                            {...("group" in item && item.group ? { "group": item.group } : {})}
+                                                                            onPointerDown={(e) => handleTagMouseDown(e, key, index)}
+                                                                            className='p-2 rounded-sm h-full shadow opacity-40 cursor-grab w-full'
+                                                                            style={{ background: selectedRecipient[0]?.color }}
+                                                                        >
+                                                                            <p
+                                                                                className={`flex justify-center items-center w-full text-xl text-white h-full`}
+                                                                            // style={{ color: selectedRecipients[item.recipientIndx]?.color }}
+                                                                            >
+                                                                                {IconComponent}
+                                                                            </p>
+                                                                        </div>
+                                                                    }
+                                                                    {/* Tag - END */}
+
+                                                                </div>
+
+                                                                <>
+                                                                    {
+                                                                        "group" in item && item.group && "isGroupExist" in item && !item.isGroupExist &&
+                                                                        <>
+                                                                            <div className="group-border" border-group={item.group} border-pos="top"></div>
+                                                                            <div className="group-border" border-group={item.group} border-pos="right"></div>
+                                                                            <div className="group-border bottom-border" border-group={item.group} border-pos="bottom">
+                                                                                <div onClick={() => handleAddGroupItemClicked(key, item)}><IoAdd /></div>
+                                                                            </div>
+                                                                            <div className="group-border" border-group={item.group} border-pos="left"></div>
+                                                                        </>
+
+                                                                    }
+                                                                </>
+
+                                                            </React.Fragment>
+                                                        )
+                                                    }
+
+                                                    )}
+                                                    {/* Render only the dropped items for this specific docId and page - ENDS */}
 
                                                     <img
                                                         style={{ "minWidth": page.width, "minHeight": page.height, "maxWidth": page.width, "maxHeight": page.height }}

src/components/process/processStepTwo/DroppedItemsTagsCon.tsx

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

src/components/process/processStepTwo/FieldList.tsx

@@ -83,10 +83,7 @@ const FieldList: React.FC<FieldListProps> = ({ color, recipientId, recipientIndx
             .then((res) => {
                 const priorityOrder = ['SIGNATURE', 'INITIALS', 'STAMP'];
 
-                const data = res.data.filter((obj, indx) => {
+                const data = res.data;
-                    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,13 +3,12 @@ import { RootState } from '../../../store/store';
 import { useDispatch, useSelector } from 'react-redux';
 import FieldList from './FieldList';
 
-import { addColorsToRecipient, fetchRecipients, recipientType, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice';
+import { addColorsToRecipient, fetchRecipients, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice';
 
 import { IoCheckmark } from 'react-icons/io5'
-import { MdKeyboardArrowDown, MdOutlineNavigateNext } from 'react-icons/md'
+import { MdKeyboardArrowDown } 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;
@@ -37,8 +36,6 @@ 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 }));
@@ -97,7 +94,6 @@ 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'
@@ -155,7 +151,7 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
                                                 document.pages != undefined && <img
                                                     key={indx}
                                                     className='rounded-sm shadow'
-                                                    src={"data:image/png;base64," + document.thumbnail}
+                                                    src={document.pages[0].src}
                                                     alt="" />
                                             }
 
@@ -169,57 +165,18 @@ const LeftSideBar: React.FC<LeftSideBarProps> = ({ isFields, selectedRecipientIn
 
                                         {
                                             dropDownTogglePage === 'pageDropDown' + indx &&
-                                            <div className="my-1 flex justify-center items-center gap-2 flex-wrap">
+                                            <div className='my-1 flex justify-center items-center gap-1 flex-wrap'>
-                                                {/* Prev Button */}
+                                                {document.pages != undefined && document.pages.map((img, indx) => (
-                                                <a
+                                                    <a
-                                                    href={"#" + document.id + (currentPage - 1)}
+                                                        href={"#" + document.id + indx}
-                                                    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" : ""
+                                                        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'
-                                                        }`}
+                                                    >
-                                                    onClick={(e) => {
+                                                        <p className='text-center text-xs text-slate-600'>{indx + 1}</p>
-                                                        if (currentPage === 0) e.preventDefault();
+                                                    </a>
-                                                        else setCurrentPage(currentPage - 1);
+                                                ))}
-                                                    }}
-                                                >
-                                                    <GrFormPrevious />
-                                                </a>
-
-                                                {/* Page Selector */}
-                                                <select
-                                                    className="w-[58px] py-1 text-xs text-slate-400 outline-none"
-                                                    value={currentPage}
-                                                    onChange={(e) => {
-                                                        const newPage = Number(e.target.value);
-                                                        setCurrentPage(newPage);
-                                                        window.location.hash = document.id +""+ newPage;
-                                                    }}
-                                                >
-                                                    {document.pages != undefined && document.pages.map((_, pageIndex) => (
-                                                        <option key={pageIndex} value={pageIndex}>
-                                                            {pageIndex + 1}
-                                                        </option>
-                                                    ))}
-                                                </select>
-
-                                                <span className="text-xs text-slate-600">
-                                                    / {document.pages?.length}
-                                                </span>
-
-                                                {/* Next Button */}
-                                                <a
-                                                    href={"#" + document.id + (currentPage + 1)}
-                                                    className={`cursor-pointer px-2 py-1 shadow rounded-sm text-sm bg-slate-200 hover:border-[var(--primary)] transition-all duration-300 ${currentPage === document.pages?.length - 1 ? "pointer-events-none opacity-50" : ""
-                                                        }`}
-                                                    onClick={(e) => {
-                                                        if (currentPage === document.pages?.length - 1) e.preventDefault();
-                                                        else setCurrentPage(currentPage + 1);
-                                                    }}
-                                                >
-                                                    <MdOutlineNavigateNext />
-                                                </a>
                                             </div>
                                         }
 
-
                                     </div>
                                 )
                             })}

src/components/process/processStepTwo/NavTwo.tsx

@@ -8,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, recipientType, toggleToTemplates, TRANSACTION_TEMPLATE_TOGGLE } from '../../../store/slices/selectedRecipientsSlice'
+import { fetchRecipients, 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,8 +91,7 @@ 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++) {
@@ -105,11 +104,10 @@ 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 && userEmailPresent.type !== recipientType.CC && userEmailPresent.type !== recipientType.INPERSONSIGNER) {
+            if (userEmailPresent.present && userEmailPresent.routingOrder === minRoutingOrder) {
                 setSelfUserSign({ sign: true, recipientId: userEmailPresent.recipientId })
             }
         }
@@ -128,10 +126,10 @@ const NavTwo: React.FC<NavTwoProps> = ({ transactionSaving, isFields, setIsField
         setTimeout(() => {
             if (transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TRANSACTIONS) {
                 if (isSignSend) {
-                    // window.open(`./../../../sign/${selfUserSign.recipientId}`, "_self");
+                    navigate(`./../../../sign/${selfUserSign.recipientId}`,{ replace: true });
                 }
                  else {
-                    // navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true })
+                    navigate(`/document-completion-screen/${accountId}/${transactionId}`, { replace: true })
                 }
             } else {
                 navigate(`/templates`);
@@ -169,6 +167,25 @@ 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;
 
@@ -204,6 +221,16 @@ 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)}
@@ -254,6 +281,7 @@ 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'}`}>
 
@@ -284,7 +312,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-[22ch]'>{recipient.type + " | "} {recipient.firstName} {recipient.lastName}</p>
+                                        <p className='whitespace-nowrap overflow-hidden text-ellipsis max-w-[12ch]'>{recipient.firstName} {recipient.lastName}</p>
                                     </div>
                                 </div>)
                             })}

src/components/process/processStepTwo/ProcessStepTwo.tsx

@@ -34,6 +34,9 @@ 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/CommonAttrDropDown.tsx

@@ -1,9 +1,7 @@
 
 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;
@@ -19,6 +17,8 @@ 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,6 +36,7 @@ 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) {
@@ -72,6 +73,8 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
             break;
     }
 
+    console.log(selectedTag, "line 63");
+
     return (
         <div className="flex flex-col">
             <label htmlFor="" className="">Type</label>
@@ -87,6 +90,9 @@ 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;
@@ -127,6 +133,8 @@ const CommonAttrDropDown: React.FC<CommonAttrDropDownInt> = ({ selectedType, sel
                         }
                         // Handling TEXT - END
 
+                        console.log(subTypeKey, subType, value, "line 1223");
+
                         return (
                             <div
                                 key={indx}
@@ -154,27 +162,8 @@ 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]);
+                                    else {
-                                        if (subTypeKey === "dateFormat") {
-                                            let format = null;
-                                            switch (value) {
-                                                case "date":
-                                                    format = dateFormats[0].format;
-                                                    break;
-                                                case "time":
-                                                    format = timeFormats[0].format;
-                                                    break;
-                                                case "date_time":
-                                                    format = dateFormats[0].format + " " + timeFormats[0].format;
-                                                    break;
-                                                default:
-                                                    format = dateFormats[0].format;
-                                            }
-
-                                            handlePropertyChange("format", format as string);
-                                        }
-                                    } else {
                                         handlePropertyChange(subTypeKey, selectedType[val as keyof typeof selectedType]);
                                     }
                                 }}

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

@@ -148,13 +148,83 @@ 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/LabelAttr.tsx

@@ -0,0 +1,21 @@
+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/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/RecipientsAttrCon.tsx

@@ -2,8 +2,7 @@ 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 {
@@ -68,7 +67,6 @@ 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/RightSideBar.tsx

@@ -1,23 +1,30 @@
 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 "./attributes/LabelAttr";
+import LabelAttr from "./LabelAttr";
-import RequiredAttr from "./attributes/RequiredAttr";
+import RequiredAttr from "./RequiredAttr";
-import CommonAttrDropDown from "./attributes/CommonAttrDropDown";
+import CurrTimeStampAttr from "./currTimeStampAttr";
-import MaskTypePassAttr from "./attributes/MaskTypePassAttr";
+import CommonAttrDropDown from "./CommonAttrDropDown";
-import TemporalDateAttr from "./attributes/TemporalDateAttr";
+import MaskTypePassAttr from "./MaskTypePassAttr";
-import SelectTagAttr from "./attributes/SelectTagAttr";
+import TemporalDateAttr from "./TemporalDateAttr";
-import MaxMinLenAttr from "./attributes/MaxMinLenAttr";
+import SelectTagAttr from "./SelectTagAttr";
-import RecipientsAttrCon from "./attributes/RecipientsAttrCon";
+import MaxMinLenAttr from "./MaxMinLenAttr";
-import DirectionalControls from "./attributes/DirectionalControls";
+import RecipientsAttrCon from "./RecipientsAttrCon";
-import TextValueFIll from "./attributes/TextValueFIll";
+import MovableFieldContainer from "./MovableField";
-import CurrTimeStampAttr from "./attributes/CurrTimeStampAttr";
+import DirectionalControls from "./DirectionalControls";
-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[]
@@ -26,6 +33,12 @@ 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 {
@@ -102,8 +115,124 @@ 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) => {
 
@@ -126,6 +255,7 @@ const RightSideBar: React.FC<DroppedItemProps> = ({ droppedItems, selectedTag, s
             // })
             setDroppedItems((prev) => {
                 return (prev.map((item, idx) => {
+                    console.log(prev, "Prev lIne 258")
                     if (idx === selTagIndx) {
                         return { ...item, [changeTo]: changeWith, update: true }
                     }
@@ -137,6 +267,22 @@ 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);
@@ -146,7 +292,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)
@@ -160,6 +306,24 @@ 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;
 
@@ -170,6 +334,26 @@ 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) => {
@@ -285,26 +469,37 @@ 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"><span className="capitalize">{selectedTag.type.toLowerCase()}</span> Attributes:</p>
+                <p className="p-2 font-semibold text-md">Properties</p>
                 <hr className="text-slate-200" />
 
                 <div className="p-3 text-sm text-slate-600 flex flex-col gap-2">
 
-                    <RecipientsAttrCon selectedRecipientId={selectedTag.recipientId} handlePropertyChange={handlePropertyChange} />
+                    {
+                        <RecipientsAttrCon selectedRecipientId={selectedTag.recipientId} handlePropertyChange={handlePropertyChange} />
+                    }
+
                     <DirectionalControls {...DirectionalControlsProps} selectedType={selectedTag.dimensions} />
 
+
                     {selectedTag.label &&
                         <LabelAttr label={selectedTag.label} handlePropertyChange={handlePropertyChange} />}
 
-                    <ToolTipAttr tooltip={selectedTag.tooltip ?? ""} handlePropertyChange={handlePropertyChange} />
+                    {(selectedTag.type !== TagsTypes.SIGNATURE && selectedTag.type !== TagsTypes.INITIALS) &&
+
+                        <>
+                            <RequiredAttr required={selectedTag.required ? selectedTag.required : false} handlePropertyChange={handlePropertyChange} />
+                        </>
+
 
-                    {
-                        (selectedTag.type !== TagsTypes.SIGNATURE && selectedTag.type !== TagsTypes.INITIALS) &&
-                        <RequiredAttr required={selectedTag.required ? selectedTag.required : false} handlePropertyChange={handlePropertyChange} />
                     }
 
                     {selectedTag.type.toLowerCase() === TagsTypes.TEMPORAL &&
@@ -332,15 +527,6 @@ 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 */}
                     {
@@ -386,6 +572,9 @@ 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"

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

@@ -52,6 +52,7 @@ const SelectTagAttr: React.FC<SelectTagAttrInt> = ({ options, selTagKey, selTagI
                     };
                 }
 
+                console.log("New droppedItems state:", newState);
                 return newState;
             });
         }

src/components/process/processStepTwo/rightSideBar/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,29 +25,20 @@ interface TemporalDateAttrInt {
 
 const TemporalDateAttr: React.FC<TemporalDateAttrInt> = ({ dateFormat, format, selectedTag, dropDownToggle, setDropDownToggle, handlePropertyChange }) => {
 
-    let is24HourFormat = true
+    console.log(dateFormat, format, "dateFormat Line 26", selectedTag)
 
-    if (selectedTag.format && selectedTag.format.split(/hh|mm/).length > 0) {
+    const [is24Hrs, setIs24Hrs] = useState<boolean>(true);
-        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) {
-            const timeFormat = format = timeFormats[checked ? 0 : 1].format;
+            handlePropertyChange("format", (format.split(" ").slice(0, -1).join(" ")), !is24Hrs)
-            const dateFormat = selectedTag.format && selectedTag.format.split(/hh|HH/)[0]
-            handlePropertyChange("format", dateFormat+" "+timeFormat, checked ? is24Hrs : !is24Hrs)
         }
         setIs24Hrs(checked)
     }
@@ -96,12 +87,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/LabelAttr.tsx

@@ -1,23 +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>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/TextValueFIll.tsx

@@ -1,35 +0,0 @@
-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

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

src/components/routes_helper/PageGuard.tsx

@@ -4,6 +4,8 @@ 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,7 +43,9 @@ 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>(
@@ -308,6 +310,7 @@ 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) {
@@ -342,19 +345,23 @@ 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,6 +55,7 @@ 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('');
@@ -81,6 +82,8 @@ 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);
@@ -116,7 +119,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)}`).toUpperCase());
+            setInitials(`${editingSignature.firstName.slice(0, 1)}${editingSignature.lastName.slice(0, 1)}`);
             setActiveTab(editingSignature.signatureType as 'SELECT' | 'DRAW' | 'UPLOAD');
 
             // Set font for SELECT tab
@@ -227,6 +230,8 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                 payload.initialsBase64 = signatures.initials;
             }
 
+            console.log("payload214", payload);
+
             let res;
             if (isEditMode && editingSignature) {
                 // Update existing signature
@@ -235,6 +240,7 @@ 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",
@@ -250,6 +256,7 @@ 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",
@@ -444,7 +451,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);
 
@@ -557,7 +564,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                             >
                                 {checked && <FiCheck className="text-white text-xs" />}
                             </div>
-                            <span>Save as default signature</span>
+                            <span>Signature will be used by default</span>
                         </label>
                     </div>
 
@@ -679,7 +686,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                             >
                                 {checked && <FiCheck className="text-white text-xs" />}
                             </div>
-                            <span>Save as default signature</span>
+                            <span>Signature will be used by default</span>
                         </label>
                     </div>
 

src/components/setting/Signature/Signature.tsx

@@ -43,6 +43,7 @@ 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) {
@@ -57,7 +58,9 @@ 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);
@@ -71,7 +74,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,
@@ -112,6 +115,8 @@ 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

@@ -47,8 +47,8 @@ interface Signature {
 }
 
 interface AddSignatureModalProps {
-    setOpenSign?: (value: boolean) => void;
+    // setShowAddSignature?: (value: boolean) => void;
-    getAllSignatures: () => Promise<void>;
+    // getAllSignatures: () => Promise<void>;
     // editingSignature?: Signature | null;
 
     recipientId?: string;
@@ -88,7 +88,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
 }) => {
 
     console.log("savedModal", recipient)
-    const [activeTab, setActiveTab] = useState<'SELECT' | 'DRAW' | 'UPLOAD' | 'SAVED'>('SELECT');
+    const [activeTab, setActiveTab] = useState<'TYPED' | 'DRAW' | 'UPLOAD' | 'SAVED'>('TYPED');
     const [fullName, setFullName] = useState('');
     const [initials, setInitials] = useState('');
     const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
@@ -120,6 +120,8 @@ 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: "" }
     );
@@ -131,15 +133,13 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
     // Store the preview URL
     const [preview1, setPreview1] = useState<string | null>(null);
     const [preview2, setPreview2] = useState<string | null>(null);
-        const [checked, setChecked] = useState(false);
-        const toggleCheckbox = () => setChecked(!checked);
 
     const [preSaveSignatures, setPreSaveSignatures] = useState([])
 
 
     // Navigation items
     const navigationItems = [
-        { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
+        { id: 'TYPED', label: 'TYPED', icon: <GrCheckboxSelected className="w-4 h-4" /> },
         { id: 'DRAW', label: 'DRAW', icon: <AiOutlineEdit className="w-5 h-5" /> },
         { id: 'UPLOAD', label: 'UPLOAD', icon: <AiOutlineUpload className="w-5 h-5" /> },
         { id: 'SAVED', label: 'SAVED', icon: <CiSaveDown1 className="w-5 h-5" /> },
@@ -172,6 +172,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                             signature: signatureBlob,
                             initial: initialsBlob,
                         });
+                        console.log("saved Called Line 174")
                     }
                 }
                 setPreSaveSignatures(preSavedSignatures)
@@ -222,6 +223,7 @@ 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);
@@ -241,6 +243,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                 font: selectedSignature.style
             };
 
+            console.log("payload", payload)
             // if (isEditMode && editingSignature) {
             //     // Update existing signature
             //     const updatePayload = {
@@ -270,6 +273,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                         "ngrok-skip-browser-warning": "69420"
                     }
                 });
+            console.log("handleSubmit", res);
 
             toast.success("Signature Created Successfully", {
                 position: "top-center",
@@ -317,283 +321,32 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
         }
     };
 
-    // const renderContent = () => {
-    //     switch (activeTab) {
-    //         case 'SELECT':
-    //             return (
-    //                 <div className="h-full flex flex-col ">
-    //                     <div className="mb-6">
-    //                         <h2 className="text-xl font-semibold text-gray-900 mb-2">Choose Signature Style</h2>
-    //                         <p className="text-sm text-gray-600">Select from pre-designed signature styles</p>
-    //                     </div>
-
-    //                     <div className="flex-1 overflow-y-auto">
-    //                         <div className="space-y-4">
-    //                             {signatureOptions.map((option) => (
-    //                                 <div key={option.id} className="flex items-center space-x-4 px-2 py-1 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
-    //                                     <input
-    //                                         type="radio"
-    //                                         id={`signature-${option.id}`}
-    //                                         name="signature"
-    //                                         checked={selectedSignature.id === option.id}
-    //                                         onChange={() => setSelectedSignature({ id: option.id, style: option.style })}
-    //                                         className="w-4 h-4 text-blue-600 focus:ring-blue-500"
-    //                                     />
-    //                                     <div className="flex-1 grid grid-cols-2 gap-2">
-    //                                         <div className=" border-gray-300 rounded-lg px-2 py-1 bg-white ">
-    //                                             <div className="text-xs text-gray-500 mb-2">Signed by:</div>
-    //                                             <div className={`text-lg ${option.style === 'cursive' ? 'font-serif italic' :
-    //                                                 option.style === 'script' ? 'font-mono' :
-    //                                                     option.style === 'elegant' ? 'font-serif' :
-    //                                                         option.style === 'modern' ? 'font-sans tracking-wide' :
-    //                                                             'font-sans'
-    //                                                 }`}>
-    //                                                 {fullName || option.name}
-    //                                             </div>
-    //                                             <div className="text-xs text-gray-400 mt-2">
-    //                                                 dca3e646-62cd-4cc...
-    //                                             </div>
-    //                                         </div>
-    //                                         <div className=" rounded-lg px-2 py-2 bg-white ">
-    //                                             <div className="text-xs text-gray-500 mb-2">DS</div>
-    //                                             <div className={`text-2xl ${option.style === 'cursive' ? 'font-serif italic' :
-    //                                                 option.style === 'script' ? 'font-mono' :
-    //                                                     option.style === 'elegant' ? 'font-serif' :
-    //                                                         option.style === 'modern' ? 'font-sans tracking-wide' :
-    //                                                             'font-sans'
-    //                                                 }`}>
-    //                                                 {initials || option.initials}
-    //                                             </div>
-    //                                         </div>
-    //                                     </div>
-    //                                 </div>
-    //                             ))}
-    //                         </div>
-    //                     </div>
-    //                 </div>
-    //             );
-
-    //         case 'DRAW':
-    //             return (
-    //                 <DrawSignatureCanvas
-    //                     onSignatureChange={handleSignatureChange}
-    //                 // initialSignatures={isEditMode ? signatures : undefined}
-    //                 />
-    //             );
-
-    //         case 'UPLOAD':
-    //             return (
-    //                 <div className="h-full flex flex-col">
-    //                     <div className="mb-6">
-    //                         <h2 className="text-xl font-semibold text-gray-900 mb-2">Upload Signature</h2>
-    //                     </div>
-    //                     <div className="flex-1 overflow-y-auto">
-    //                         <div>
-    //                             <div className="grid grid-cols-12 gap-6">
-    //                                 {/* Upload 1 */}
-    //                                 <div className="col-span-8">
-    //                                     <label className="block text-sm font-medium text-gray-700 mb-2">Full Signature</label>
-    //                                     <label htmlFor="upload1" className=" border-2 border-dashed border-gray-300 rounded-lg h-62 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
-    //                                         {preview1 ? (
-    //                                             <img src={preview1} alt="Signature Preview" className="max-h-44 object-contain" />
-    //                                         ) : (
-    //                                             <div className="text-center">
-    //                                                 <MdCloudUpload className="mx-auto h-12 w-12 text-gray-400 mb-3" />
-    //                                                 <p className="text-sm text-gray-500 mb-1">Click to upload or drag and drop</p>
-    //                                                 <p className="text-xs text-gray-400">PNG, JPG, GIF up to 10MB</p>
-    //                                             </div>
-    //                                         )}
-    //                                     </label>
-    //                                     <input
-    //                                         id="upload1"
-    //                                         type="file"
-    //                                         accept="image/*"
-    //                                         className="hidden"
-    //                                         onChange={(e) => handleImageChange(e, setFile1, setPreview1, "fullSignature")}
-    //                                     />
-    //                                 </div>
-
-    //                                 {/* Upload 2 */}
-    //                                 <div className="col-span-4">
-    //                                     <label className="block text-sm font-medium text-gray-700 mb-2">Initials</label>
-    //                                     <label htmlFor="upload2" className=" border-2 border-dashed border-gray-300 rounded-lg h-62 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
-    //                                         {preview2 ? (
-    //                                             <img src={preview2} alt="Initials Preview" className="max-h-44 object-contain" />
-    //                                         ) : (
-    //                                             <div className="text-center">
-    //                                                 <MdCloudUpload className="mx-auto h-8 w-8 text-gray-400 mb-2" />
-    //                                                 <p className="text-xs text-gray-500">Upload initials</p>
-    //                                             </div>
-    //                                         )}
-    //                                     </label>
-    //                                     <input
-    //                                         id="upload2"
-    //                                         type="file"
-    //                                         accept="image/*"
-    //                                         className="hidden"
-    //                                         onChange={(e) => handleImageChange(e, setFile2, setPreview2, "initials")}
-    //                                     />
-    //                                 </div>
-    //                             </div>
-    //                         </div>
-    //                     </div>
-    //                 </div>
-    //             );
-    //         case 'SAVED':
-    //             return (
-    //                 <div className="h-full flex flex-col ">
-    //                     <div className="mb-6">
-    //                         <h2 className="text-xl font-semibold text-gray-900 mb-2">Saved Signature's</h2>
-    //                         {/* <p className="text-sm text-gray-600">Select from pre-designed signature styles</p> */}
-    //                     </div>
-
-    //                     <div className="flex-1 overflow-y-auto">
-    //                         <div className="space-y-4">
-    //                             {preSaveSignatures.map((signature) => (
-    //                                 <div key={signature?.id} className="grid grid-cols-12 gap-4 px-6 py-9 hover:bg-gray-50 transition-colors duration-150">
-    //                                     {/* Signature Column */}
-    //                                     <div className="col-span-5">
-    //                                         <div className="flex flex-col space-y-2 relative ps-6 border-l-3 border-blue-600 rounded-bl-2xl rounded-tl-2xl">
-    //                                             <div className="text-sm text-gray-600 font-medium mb-1">
-    //                                                 Signed by:
-    //                                             </div>
-
-    //                                             {/* Signature Image or Fallback Text */}
-    //                                             <div className="bg-white rounded-lg p-1 flex items-center justify-center">
-    //                                                 {signature?.signatureBlob ? (
-    //                                                     <img
-    //                                                         src={`data:${signature?.signatureMimeType || "image/png"};base64,${signature?.signatureBlob}`}
-    //                                                         className="h-[50px] w-[250px] object-contain"
-    //                                                         alt="Signature"
-    //                                                     />
-    //                                                 ) : (
-    //                                                     <div className="text-gray-400 italic text-sm">No Signature</div>
-    //                                                 )}
-    //                                             </div>
-
-    //                                             {/* Name */}
-    //                                             <div className="text-xs text-gray-500 truncate">
-    //                                                 {signature?.signatureHash ?? ' '}
-    //                                             </div>
-    //                                         </div>
-    //                                     </div>
-
-    //                                     {/* Initial Column */}
-    //                                     <div className="col-span-5">
-    //                                         <div className="flex flex-col space-y-2 relative ps-6 border-l-3 border-green-600 rounded-bl-2xl rounded-tl-2xl">
-    //                                             <div className="text-sm text-gray-600 font-medium mb-1">
-    //                                                 Initials
-    //                                             </div>
-
-    //                                             {/* Initials Image */}
-    //                                             <div className="bg-white rounded-lg p-1 flex items-center justify-center">
-    //                                                 {signature?.initialsBlob ? (
-    //                                                     <img
-    //                                                         src={`data:image/png;base64,${signature?.initialsBlob}`}
-    //                                                         className="h-[50px] object-contain"
-    //                                                         alt="Initials"
-    //                                                     />
-    //                                                 ) : (
-    //                                                     <div className="text-gray-400 italic text-sm">No Initials</div>
-    //                                                 )}
-    //                                             </div>
-
-    //                                             {/* Optional initials hash or font */}
-    //                                             <div className="text-xs text-gray-500 truncate">
-    //                                                 {signature?.initialsHash || " "}
-    //                                             </div>
-    //                                         </div>
-    //                                     </div>
-    //                                 </div>
-    //                             ))}
-
-    //                         </div>
-    //                     </div>
-    //                 </div>
-    //             );
-
-    //         default:
-    //             return null;
-    //     }
-    // };
-
-
-    const renderSignatureText = (type, font, firstName, lastName, mode = 'name') => {
-        if (type !== 'SELECT') return null;
-
-        const selectedFont = signatureOptions.find(opt => opt.style === font);
-        const fontClass = `${selectedFont?.style || 'print'}`;
-        console.log("fontClass",fontClass)
-
-
-        if (mode === 'initials') {
-            const initials = `${(firstName?.[0] ?? '')}${(lastName?.[0] ?? '')}`.toUpperCase();
-            return (
-                <div className={`text-center text-[24px]`} style={{fontFamily:selectedFont?.style}}>
-                    {initials}
-                </div>
-            );
-        }
-
-        const fullName = `${firstName ?? ''} ${lastName ?? ''}`.trim();
-        return (
-            <div className={`text-center text-[20px]`}style={{fontFamily:selectedFont?.style}}>
-                <div>{fullName}</div>
-            </div>
-        );
-    };
-
-
-    // Fixed renderContent function for SELECT case with proper radio button styling
     const renderContent = () => {
         switch (activeTab) {
-            case 'SELECT':
+            case 'TYPED':
                 return (
-                    <div className="h-full flex flex-col">
+                    <div className="h-full flex flex-col ">
-                        <div className="mb-1 md:mb-4 lg:mb-6 flex-shrink-0">
+                        <div className="mb-6">
-                            <h2 className="text-base md:text-lg lg:text-xl font-semibold text-gray-900 mb-1">Choose Signature Style</h2>
+                            <h2 className="text-xl font-semibold text-gray-900 mb-2">Choose Signature Style</h2>
-                            <p className="text-xs md:text-sm text-gray-600 hidden md:block">Select from pre-designed signature styles</p>
+                            <p className="text-sm text-gray-600">Select from pre-designed signature styles</p>
                         </div>
 
-                        <div className="flex-1 min-h-0 overflow-y-auto no-scrollbar">
+                        <div className="flex-1 overflow-y-auto">
-                            <div className="space-y-2 md:space-y-3 pb-2">
+                            <div className="space-y-4">
                                 {signatureOptions.map((option) => (
-                                    <div
+                                    <div key={option.id} className="flex items-center space-x-4 px-2 py-1 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
-                                        key={option.id}
-                                        className={`flex items-center space-x-2 md:space-x-3 p-2 md:p-3 border rounded-lg transition-all duration-200 cursor-pointer ${selectedSignature.id === option.id
-                                            ? 'border-gray-100 shadow-sm'
-                                            : 'border-gray-200 hover:bg-gray-50 hover:border-gray-300'
-                                            }`}
-                                        onClick={() => setSelectedSignature({ id: option.id, style: option.style })}
-                                    >
-                                        {/* Custom Radio Button */}
-                                        <div className="flex-shrink-0">
-                                            <div
-                                                className={`w-4 h-4 md:w-3 md:h-3 rounded-full border-2 flex items-center justify-center transition-all duration-200 ${selectedSignature.id === option.id
-                                                    ? 'border-gray-300 bg-blue-600'
-                                                    : 'border-gray-300 bg-white hover:border-gray-400'
-                                                    }`}
-                                            >
-                                                {selectedSignature.id === option.id && (
-                                                    <div className="w-2 h-2 md:w-3 md:h-2 rounded-full bg-blue-500"></div>
-                                                )}
-                                            </div>
-                                        </div>
-
-                                        {/* Hidden native radio button for accessibility */}
                                         <input
                                             type="radio"
                                             id={`signature-${option.id}`}
                                             name="signature"
                                             checked={selectedSignature.id === option.id}
                                             onChange={() => setSelectedSignature({ id: option.id, style: option.style })}
-                                            className="sr-only"
+                                            className="w-4 h-4 text-blue-600 focus:ring-blue-500"
                                         />
-
+                                        <div className="flex-1 grid grid-cols-2 gap-2">
-                                        <div className="flex-1 min-w-0 grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-3">
+                                            <div className=" border-gray-300 rounded-lg px-2 py-1 bg-white ">
-                                            <div className="border border-gray-300 rounded-lg px-2 md:px-3 py-2 md:py-3 bg-white min-w-0">
+                                                <div className="text-xs text-gray-500 mb-2">Signed by:</div>
-                                                <div className="text-xs text-gray-500 mb-1">Signed by:</div>
+                                                <div className={`text-lg ${option.style === 'cursive' ? 'font-serif italic' :
-                                                <div className={`text-sm md:text-base truncate ${option.style === 'cursive' ? 'font-serif italic' :
                                                     option.style === 'script' ? 'font-mono' :
                                                         option.style === 'elegant' ? 'font-serif' :
                                                             option.style === 'modern' ? 'font-sans tracking-wide' :
@@ -601,13 +354,13 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                                                     }`}>
                                                     {fullName || option.name}
                                                 </div>
-                                                <div className="text-xs text-gray-400 mt-1 truncate">
+                                                <div className="text-xs text-gray-400 mt-2">
                                                     dca3e646-62cd-4cc...
                                                 </div>
                                             </div>
-                                            <div className="border border-gray-300 rounded-lg px-2 md:px-3 py-2 md:py-3 bg-white min-w-0">
+                                            <div className=" rounded-lg px-2 py-2 bg-white ">
-                                                <div className="text-xs text-gray-500 mb-1">DS</div>
+                                                <div className="text-xs text-gray-500 mb-2">DS</div>
-                                                <div className={`text-lg md:text-xl truncate ${option.style === 'cursive' ? 'font-serif italic' :
+                                                <div className={`text-2xl ${option.style === 'cursive' ? 'font-serif italic' :
                                                     option.style === 'script' ? 'font-mono' :
                                                         option.style === 'elegant' ? 'font-serif' :
                                                             option.style === 'modern' ? 'font-sans tracking-wide' :
@@ -626,74 +379,71 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
 
             case 'DRAW':
                 return (
-                    <div className="h-full">
+                    <DrawSignatureCanvas
-                         <DrawSignatureCanvas
                         onSignatureChange={handleSignatureChange}
                     // initialSignatures={isEditMode ? signatures : undefined}
                     />
-                    </div>
                 );
 
             case 'UPLOAD':
                 return (
                     <div className="h-full flex flex-col">
-                        <div className="mb-3 md:mb-4 lg:mb-6 flex-shrink-0">
+                        <div className="mb-6">
-                            <h2 className="text-base md:text-lg lg:text-xl font-semibold text-gray-900 mb-1">Upload Signature</h2>
+                            <h2 className="text-xl font-semibold text-gray-900 mb-2">Upload Signature</h2>
-                            <p className="text-xs md:text-sm text-gray-600 hidden md:block">Upload your signature images</p>
                         </div>
-                        <div className="flex-1 min-h-0 overflow-y-auto">
+                        <div className="flex-1 overflow-y-auto">
-                            <div className="grid grid-cols-1 lg:grid-cols-12 gap-3 md:gap-4 pb-2">
+                            <div>
-                                {/* Upload 1 - Full Signature */}
+                                <div className="grid grid-cols-12 gap-6">
-                                <div className="lg:col-span-8">
+                                    {/* Upload 1 */}
-                                    <label className="block text-xs md:text-sm font-medium text-gray-700 mb-2">Full Signature</label>
+                                    <div className="col-span-8">
-                                    <label htmlFor="upload1" className="block border-2 border-dashed border-gray-300 rounded-lg h-32 md:h-40 lg:h-48 xl:h-56 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
+                                        <label className="block text-sm font-medium text-gray-700 mb-2">Full Signature</label>
-                                        {preview1 ? (
+                                        <label htmlFor="upload1" className=" border-2 border-dashed border-gray-300 rounded-lg h-62 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
-                                            <img src={preview1} alt="Signature Preview" className="max-h-full max-w-full object-contain p-2" />
+                                            {preview1 ? (
-                                        ) : (
+                                                <img src={preview1} alt="Signature Preview" className="max-h-44 object-contain" />
-                                            <div className="text-center px-4">
+                                            ) : (
-                                                <MdCloudUpload className="mx-auto h-6 w-6 md:h-8 md:w-8 lg:h-10 lg:w-10 text-gray-400 mb-2" />
+                                                <div className="text-center">
-                                                <p className="text-xs md:text-sm text-gray-500 mb-1">Click to upload or drag and drop</p>
+                                                    <MdCloudUpload className="mx-auto h-12 w-12 text-gray-400 mb-3" />
-                                                <p className="text-xs text-gray-400">PNG, JPG, GIF up to 10MB</p>
+                                                    <p className="text-sm text-gray-500 mb-1">Click to upload or drag and drop</p>
-                                            </div>
+                                                    <p className="text-xs text-gray-400">PNG, JPG, GIF up to 10MB</p>
-                                        )}
+                                                </div>
-                                    </label>
+                                            )}
-                                    <input
+                                        </label>
-                                        id="upload1"
+                                        <input
-                                        type="file"
+                                            id="upload1"
-                                        accept="image/*"
+                                            type="file"
-                                        className="hidden"
+                                            accept="image/*"
-                                        onChange={(e) => handleImageChange(e, setFile1, setPreview1, "fullSignature")}
+                                            className="hidden"
-                                    />
+                                            onChange={(e) => handleImageChange(e, setFile1, setPreview1, "fullSignature")}
-                                </div>
+                                        />
+                                    </div>
 
-                                {/* Upload 2 - Initials */}
+                                    {/* Upload 2 */}
-                                <div className="lg:col-span-4">
+                                    <div className="col-span-4">
-                                    <label className="block text-xs md:text-sm font-medium text-gray-700 mb-2">Initials</label>
+                                        <label className="block text-sm font-medium text-gray-700 mb-2">Initials</label>
-                                    <label htmlFor="upload2" className="block border-2 border-dashed border-gray-300 rounded-lg h-32 md:h-40 lg:h-48 xl:h-56 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
+                                        <label htmlFor="upload2" className=" border-2 border-dashed border-gray-300 rounded-lg h-62 flex items-center justify-center bg-gray-50 hover:bg-gray-100 cursor-pointer transition-colors">
-                                        {preview2 ? (
+                                            {preview2 ? (
-                                            <img src={preview2} alt="Initials Preview" className="max-h-full max-w-full object-contain p-2" />
+                                                <img src={preview2} alt="Initials Preview" className="max-h-44 object-contain" />
-                                        ) : (
+                                            ) : (
-                                            <div className="text-center px-2">
+                                                <div className="text-center">
-                                                <MdCloudUpload className="mx-auto h-5 w-5 md:h-6 md:w-6 lg:h-8 lg:w-8 text-gray-400 mb-2" />
+                                                    <MdCloudUpload className="mx-auto h-8 w-8 text-gray-400 mb-2" />
-                                                <p className="text-xs md:text-sm text-gray-500 mb-1">Upload initials</p>
+                                                    <p className="text-xs text-gray-500">Upload initials</p>
-                                                <p className="text-xs text-gray-400 hidden md:block">PNG, JPG, GIF</p>
+                                                </div>
-                                            </div>
+                                            )}
-                                        )}
+                                        </label>
-                                    </label>
+                                        <input
-                                    <input
+                                            id="upload2"
-                                        id="upload2"
+                                            type="file"
-                                        type="file"
+                                            accept="image/*"
-                                        accept="image/*"
+                                            className="hidden"
-                                        className="hidden"
+                                            onChange={(e) => handleImageChange(e, setFile2, setPreview2, "initials")}
-                                        onChange={(e) => handleImageChange(e, setFile2, setPreview2, "initials")}
+                                        />
-                                    />
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 );
-
+            case 'SAVED':
-                case 'SAVED':
                 return (
                     <div className="h-full flex flex-col ">
                         <div className="mb-6">
@@ -714,16 +464,16 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
 
                                                 {/* Signature Image or Fallback Text */}
                                                 <div className="bg-white rounded-lg p-1 flex items-center justify-center">
-                                                            {signature?.signatureType !== 'SELECT' ? (
+                                                    {signature?.signatureBlob ? (
-                                                                <img
+                                                        <img
-                                                                    src={`data:${signature?.signatureMimeType};base64,${signature?.signatureBlob}`}
+                                                            src={`data:${signature?.signatureMimeType || "image/png"};base64,${signature?.signatureBlob}`}
-                                                                    className="h-[50px] w-[250px] object-contain"
+                                                            className="h-[50px] w-[250px] object-contain"
-                                                                    alt="Signature"
+                                                            alt="Signature"
-                                                                />
+                                                        />
-                                                            ) : (
+                                                    ) : (
-                                                                renderSignatureText(signature?.signatureType, signature?.font, signature?.firstName, signature?.lastName, 'name')
+                                                        <div className="text-gray-400 italic text-sm">No Signature</div>
-                                                            )}
+                                                    )}
-                                                        </div>
+                                                </div>
 
                                                 {/* Name */}
                                                 <div className="text-xs text-gray-500 truncate">
@@ -741,16 +491,16 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
 
                                                 {/* Initials Image */}
                                                 <div className="bg-white rounded-lg p-1 flex items-center justify-center">
-                                                            {signature?.signatureType !== 'SELECT' ? (
+                                                    {signature?.initialsBlob ? (
-                                                                <img
+                                                        <img
-                                                                    src={`data:${signature.initialsMimeType};base64,${signature.initialsBlob}`}
+                                                            src={`data:image/png;base64,${signature?.initialsBlob}`}
-                                                                    className="h-[50px] object-contain"
+                                                            className="h-[50px] object-contain"
-                                                                    alt="Initials"
+                                                            alt="Initials"
-                                                                />
+                                                        />
-                                                            ) : (
+                                                    ) : (
-                                                                renderSignatureText(signature?.signatureType, signature?.font, signature?.firstName, signature?.lastName, 'initials')
+                                                        <div className="text-gray-400 italic text-sm">No Initials</div>
-                                                            )}
+                                                    )}
-                                                        </div>
+                                                </div>
 
                                                 {/* Optional initials hash or font */}
                                                 <div className="text-xs text-gray-500 truncate">
@@ -770,6 +520,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
                 return null;
         }
     };
+
     const getUserDetails = async () => {
         try {
             // let res = await axios.get(`/api/user/details`, {
@@ -781,7 +532,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)).toUpperCase());
+            setInitials(recipient.firstName.slice(0, 1) + recipient.lastName.slice(0, 1));
         } catch (error) {
             console.error("Error fetching user details:", error);
         }
@@ -792,250 +543,122 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
     }, []);
 
     return (
-        <div className="fixed inset-0 backdrop-blur-sm bg-opacity-50 bg-black/30 flex items-center  justify-center z-50 p-2 md:p-4">
+        <div className="fixed inset-0 backdrop-blur-sm bg-opacity-50 bg-black/30 flex items-center justify-center z-50 p-4">
-                    <div className="bg-white rounded-md shadow-xl w-full h-full md:max-w-[95vw] lg:max-w-[85vw] xl:max-w-[80vw] md:max-h-[95vh] lg:max-h-[90vh] flex flex-col md:flex-row relative overflow-hidden ">
+            <div className="bg-white rounded-md shadow-xl w-full max-w-[80vw] h-[80vh] flex relative">
-        
+
-                        {/* Mobile Navigation - Fixed at top on mobile only */}
+                {/* Sidebar Navigation */}
-                        <div className="md:hidden flex-1 flex flex-col min-h-0">
+                <div className="w-64 bg-gray-50 rounded-l-lg border-r border-gray-200 flex flex-col">
-        
+                    {/* Header */}
-                            {/* Scrollable area (mobile: inputs + nav + content) */}
+                    <div className="px-4 py-4 border-b border-gray-200">
-                            <div className="flex-1 min-h-0 overflow-y-auto no-scrollbar">
+                        <div className="flex items-center space-x-3">
-                                <div className="px-3 lg:px-6 py-2 border-b border-gray-200 flex-shrink-0">
+                            <div className='px-1 py-1'>
-                                    <h3 className="text-sm font-semibold text-gray-900">
+                                <h3 className="text-md font-semibold text-gray-900">Add Signature Sign</h3>
-                                         Add Signature
+                                <p className="text-xs text-gray-500">Create your digital signature</p>
-                                    </h3>
-                                </div>
-                                {/* Mobile Inputs */}
-                                <div className="md:hidden w-full bg-white border-b border-gray-200 flex-shrink-0 px-3 py-2">
-                                    <div className="grid grid-cols-3 gap-2">
-                                        <div className='col-span-2'>
-                                            <label className="block text-xs font-medium text-gray-700 mb-1">
-                                                Full Name
-                                            </label>
-                                            <input
-                                                type="text"
-                                                value={fullName}
-                                                onChange={(e) => setFullName(e.target.value)}
-                                                placeholder="Enter full name"
-                                                className="w-full px-2 py-2 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                                            />
-                                        </div>
-                                        <div className='col-span-1'>
-                                            <label className="block text-xs font-medium text-gray-700 mb-1">
-                                                Initials
-                                            </label>
-                                            <input
-                                                type="text"
-                                                value={initials}
-                                                onChange={(e) => setInitials(e.target.value)}
-                                                placeholder="Enter initials"
-                                                className="w-full px-2 py-2 text-xs border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                                            />
-                                        </div>
-                                    </div>
-                                </div>
-        
-                                {/* Mobile Navigation - Sticky inside scroll */}
-                                <div className="md:hidden w-full bg-gray-50 border-b border-gray-200 sticky top-0 z-20">
-                                    <div className="px-3 py-1.5">
-                                        <nav className="flex gap-1">
-                                            {navigationItems.map((item) => (
-                                                <button
-                                                    key={item.id}
-                                                    onClick={() => setActiveTab(item.id as 'SELECT' | 'DRAW' | 'UPLOAD')}
-                                                    className={`flex-1 flex items-center justify-center space-x-1 px-2 py-2 text-xs font-medium rounded-lg transition-all duration-200 whitespace-nowrap ${activeTab === item.id
-                                                        ? 'bg-blue-50 text-blue-700 border border-blue-200 shadow-sm'
-                                                        : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
-                                                        }`}
-                                                >
-                                                    <span className={activeTab === item.id ? 'text-blue-600' : 'text-gray-400'}>
-                                                        {item.icon}
-                                                    </span>
-                                                    <span className="hidden sm:block">{item.label}</span>
-                                                </button>
-                                            ))}
-                                        </nav>
-                                    </div>
-                                </div>
-        
-                                {/* Main Content */}
-                                <div className="md:hidden p-3 md:p-4 lg:py-5 lg:px-5">
-                                    <div className="h-full min-h-[300px] md:min-h-[400px]">
-                                        {renderContent()}
-                                    </div>
-                                </div>
-                            </div>
-        
-                            {/* Checkbox - Fixed */}
-                            {/* <div className="px-3 md:px-4 lg:px-6 py-2 md:py-3 text-gray-700 border-t border-gray-100 flex-shrink-0">
-                                <label className="inline-flex items-center cursor-pointer text-xs md:text-sm hover:text-gray-900 transition-colors">
-                                    <input
-                                        type="checkbox"
-                                        checked={checked}
-                                        onChange={toggleCheckbox}
-                                        className="sr-only"
-                                    />
-                                    <div
-                                        className={`w-3 h-3 md:w-4 md:h-4 border rounded flex items-center justify-center mr-2 md:mr-3 transition-colors flex-shrink-0 ${checked
-                                            ? 'bg-[var(--modalSubmitBG)] border-[var(--modalSubmitBG)]'
-                                            : 'bg-white border-gray-400 hover:border-gray-500'
-                                            }`}
-                                    >
-                                        {checked && <FiCheck className="text-white text-xs" />}
-                                    </div>
-                                    <span>Signature will be used by default</span>
-                                </label>
-                            </div> */}
-        
-                            {/* Footer Buttons - Fixed */}
-                            <div className="p-3 md:p-4 lg:p-3 border-t border-gray-200 flex sm:flex-row justify-end gap-2 md:gap-3 flex-shrink-0">
-                                <button
-                                    className="w-full sm:w-auto px-3 md:px-4 lg:px-6 py-2 md:py-3 text-xs md:text-sm font-medium rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400 disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-200"
-                                    onClick={() => setOpenSign?.(false)}
-                                    disabled={isSubmitting}
-                                >
-                                    CANCEL
-                                </button>
-                                <button
-                                    className="w-full sm:w-auto px-3 md:px-4 lg:px-6 py-2 md:py-3 text-xs md:text-sm font-medium rounded-md bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white hover:opacity-90 hover:shadow-lg flex items-center justify-center gap-1 md:gap-2 disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-200"
-                                    onClick={handleSubmit}
-                                    disabled={isSubmitting}
-                                >
-                                    {isSubmitting ? (
-                                        <>
-                                            <FaSpinner className="animate-spin w-3 h-3 md:w-4 md:h-4" />
-                                            <span>CREATING...</span>
-                                        </>
-                                    ) : (
-                                        <span>CREATE SIGNATURE</span>
-                                    )}
-                                </button>
-                            </div>
-                        </div>
-        
-        
-                        {/* Desktop Sidebar Navigation */}
-                        <div className="hidden md:flex md:w-64 lg:w-72 xl:w-80 bg-gray-50 md:border-r border-gray-200 flex-col">
-                            {/* Header - Fixed */}
-                            <div className="px-4 lg:px-6 py-4 border-b border-gray-200 flex-shrink-0">
-                                <h3 className="text-sm font-semibold text-gray-900">
-                                         Add Signature
-                                    </h3>
-                                <p className="text-sm text-gray-500">
-                                    Create your digital signature
-                                </p>
-                            </div>
-        
-                            {/* Form Inputs - Fixed */}
-                            <div className="px-4 lg:px-6 py-4 border-b border-gray-200 flex-shrink-0">
-                                <div className="grid grid-cols-1 gap-3">
-                                    <div>
-                                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                                            Full Name
-                                        </label>
-                                        <input
-                                            type="text"
-                                            value={fullName}
-                                            onChange={(e) => setFullName(e.target.value)}
-                                            placeholder="Enter full name"
-                                            className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                                        />
-                                    </div>
-                                    <div>
-                                        <label className="block text-sm font-medium text-gray-700 mb-2">
-                                            Initials
-                                        </label>
-                                        <input
-                                            type="text"
-                                            value={initials}
-                                            onChange={(e) => setInitials(e.target.value)}
-                                            placeholder="Enter initials"
-                                            className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-        
-                            {/* Navigation Menu - Fixed */}
-                            <div className="px-4 lg:px-6 py-4 flex-shrink-0">
-                                <nav className="flex flex-col gap-2">
-                                    {navigationItems.map((item) => (
-                                        <button
-                                            key={item.id}
-                                            onClick={() => setActiveTab(item.id as 'SELECT' | 'DRAW' | 'UPLOAD')}
-                                            className={`w-full flex items-center justify-start space-x-2 px-3 py-3 text-sm font-medium rounded-lg transition-all duration-200 whitespace-nowrap ${activeTab === item.id
-                                                ? 'bg-blue-50 text-blue-700 border border-blue-200 shadow-sm'
-                                                : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
-                                                }`}
-                                        >
-                                            <span className={activeTab === item.id ? 'text-blue-600' : 'text-gray-400'}>
-                                                {item.icon}
-                                            </span>
-                                            <span>{item.label}</span>
-                                        </button>
-                                    ))}
-                                </nav>
-                            </div>
-        
-                            {/* Spacer for desktop */}
-                            <div className="flex-1"></div>
-                        </div>
-        
-                        {/* Main Content Area */}
-                        <div className="hidden flex-1 md:flex flex-col min-h-0">
-                            {/* Content - Scrollable */}
-                            <div className="flex-1 min-h-0 p-3 md:p-4 lg:py-5 lg:px-5 overflow-y-auto no-scrollbar">
-                                <div className="h-full min-h-[300px] md:min-h-[400px]">
-                                    {renderContent()}
-                                </div>
-                            </div>
-        
-                            {/* Checkbox - Fixed */}
-                            {/* <div className="px-3 md:px-4 lg:px-6 py-2 md:py-3 text-gray-700 border-t border-gray-100 flex-shrink-0">
-                                <label className="inline-flex items-center cursor-pointer text-xs md:text-sm hover:text-gray-900 transition-colors">
-                                    <input
-                                        type="checkbox"
-                                        checked={checked}
-                                        onChange={toggleCheckbox}
-                                        className="sr-only"
-                                    />
-                                    <div
-                                        className={`w-3 h-3 md:w-4 md:h-4 border rounded flex items-center justify-center mr-2 md:mr-3 transition-colors flex-shrink-0 ${checked ? 'bg-[var(--modalSubmitBG)] border-[var(--modalSubmitBG)]' : 'bg-white border-gray-400 hover:border-gray-500'
-                                            }`}
-                                    >
-                                        {checked && <FiCheck className="text-white text-xs" />}
-                                    </div>
-                                    <span>Signature will be used by default</span>
-                                </label>
-                            </div> */}
-        
-                            {/* Footer Buttons - Fixed */}
-                            <div className="p-3 md:p-4 lg:p-3 border-t border-gray-200 flex sm:flex-row justify-end gap-2 md:gap-3 flex-shrink-0">
-                                <button
-                                    className="w-full sm:w-auto px-3 md:px-4 lg:px-6 py-2 md:py-3 text-xs md:text-sm font-medium rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400 disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-200"
-                                    onClick={() => setOpenSign?.(false)}
-                                    disabled={isSubmitting}
-                                >
-                                    CANCEL
-                                </button>
-                                <button
-                                    className="w-full sm:w-auto px-3 md:px-4 lg:px-6 py-2 md:py-3 text-xs md:text-sm font-medium rounded-md bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white hover:opacity-90 hover:shadow-lg flex items-center justify-center gap-1 md:gap-2 disabled:opacity-60 disabled:cursor-not-allowed transition-all duration-200"
-                                    onClick={handleSubmit}
-                                    disabled={isSubmitting}
-                                >
-                                    {isSubmitting ? (
-                                        <>
-                                            <FaSpinner className="animate-spin w-3 h-3 md:w-4 md:h-4" />
-                                            <span>CREATING...</span>
-                                        </>
-                                    ) : (
-                                        <span>CREATE SIGNATURE</span>
-                                    )}
-                                </button>
                             </div>
                         </div>
                     </div>
+
+                    {/* Form Inputs */}
+                    <div className="px-6 py-2.5 border-b border-gray-200">
+                        <div className="space-y-2">
+                            <div>
+                                <label className="block text-sm font-medium text-gray-700 mb-2">
+                                    Full Name
+                                </label>
+                                <input
+                                    type="text"
+                                    value={fullName}
+                                    onChange={(e) => setFullName(e.target.value)}
+                                    placeholder="Enter full name"
+                                    className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                                />
+                            </div>
+
+                            <div>
+                                <label className="block text-sm font-medium text-gray-700 mb-2">
+                                    Initials
+                                </label>
+                                <input
+                                    type="text"
+                                    value={initials}
+                                    onChange={(e) => setInitials(e.target.value)}
+                                    placeholder="Enter initials"
+                                    className="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Navigation Menu */}
+                    <div className="flex-1 px-6 py-2.5">
+                        <nav className="space-y-2">
+                            {navigationItems.map((item) => (
+                                <button
+                                    key={item.id}
+                                    onClick={() => setActiveTab(item.id as 'TYPED' | 'DRAW' | 'UPLOAD' | 'SAVED')}
+                                    className={`w-full flex items-center space-x-3 px-2 py-2 text-sm font-medium rounded-lg cursor-pointer transition-colors ${activeTab === item.id
+                                        ? 'bg-blue-50 text-blue-700 border border-blue-200'
+                                        : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+                                        }`}
+                                >
+                                    <span className={activeTab === item.id ? 'text-blue-600' : 'text-gray-400'}>
+                                        {item.icon}
+                                    </span>
+
+                                    <span>{item.label}</span>
+                                </button>
+                            ))}
+                        </nav>
+                    </div>
+
                 </div>
+
+                {/* Main Content Area */}
+                <div className="flex-1 flex flex-col ">
+                    {/* Header with close button */}
+
+                    {/* Content */}
+                    <div className="flex-1 py-5 px-5 overflow-hidden ">
+                        {/* <button
+                            onClick={() => setShowAddSignature?.(false)}
+                            className="absolute top-2 right-3 p-2 hover:bg-gray-100 rounded-full transition-colors z-20"
+                        >
+                            <AiOutlineClose className="w-5 h-5 text-gray-500" />
+                        </button> */}
+                        {renderContent()}
+                    </div>
+
+                    {/* Footer Buttons in Main Area */}
+                    <div className="p-4 border-t border-gray-200 flex justify-end gap-3">
+                        <button
+                            className="cursor-pointer px-4 py-2 text-sm font-medium rounded-md border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors disabled:opacity-60 disabled:cursor-not-allowed"
+                            onClick={() => setOpenSign?.(false)}
+                            disabled={isSubmitting}
+                        >
+                            CANCEL
+                        </button>
+                        <button
+                            className="cursor-pointer px-4 py-2 text-sm font-medium rounded-md bg-[var(--modalSubmitBG)] text-white hover:bg-[var(--modalSubmitBGHover)] transition-colors flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
+                            onClick={handleSubmit}
+                            disabled={isSubmitting}
+                        >
+                            {isSubmitting ? (
+                                <>
+                                    <FaSpinner className="animate-spin" />
+                                    {/* {isEditMode ? 'UPDATING...' : 'CREATING...'} */}
+                                </>
+                            ) : (
+                                <>
+                                    {activeTab === "SAVED" ? "CHANGE SIGNATURE" : "CREATE SIGNATURE"}
+                                    {/* isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE' */}
+                                </>
+                            )}
+                        </button>
+                    </div>
+
+                </div>
+            </div>
+        </div>
     );
 };
 

src/components/signature_pad/InitialCon.tsx

@@ -13,6 +13,7 @@ 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,6 +14,7 @@ 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,
@@ -22,7 +23,9 @@ 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,6 +9,9 @@ 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);
 
@@ -20,6 +23,7 @@ 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,6 +220,7 @@ 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,6 +31,7 @@ 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,6 +149,7 @@ 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,6 +77,8 @@ 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,14 +43,18 @@ 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";
@@ -58,6 +62,8 @@ const DocView = () => {
         zoom(Number(indx), 'zoom-con')
     }, [selFitIndx])
 
+    console.log(isFitDd);
+
     return (
         <>
 

src/config/axiosInstance.tsx

@@ -19,6 +19,8 @@ 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,3 +1,166 @@
+// 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';
@@ -81,29 +244,21 @@ export const uploadDocuments = createAsyncThunk<
       };
       const toggle = state.selectedRecipients.transactionTemplateToggle;
 
-      let response = [];
+      console.log(`/api/accounts/${accountId}/${toggle}/${transactionId}/documents`)
-      // debugger
-      for (let i = 0; i < formData.getAll("file").length; i++) {
-        const file = new FormData();
-        file.append("file", formData.getAll("file")[i]);
-
-        const res = await api.post(
-          `/api/accounts/${accountId}/${toggle}/${transactionId}/documents`,
-          file,
-          {
-            headers: {
-              'Content-Type': 'multipart/form-data',
-            },
-          }
-        );
-
-        console.log(res.data);
-        response.push(res.data);
-      }
 
+      const response = await api.post(
+        `/api/accounts/${accountId}/${toggle}/${transactionId}/documents`,
+        formData,
+        {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        }
+      );
+      console.log("//  await sleep(5000);", response.data)
       // await sleep(5000);
       dispatch(hideLoader());
-      return [...response];
+      return [response.data];
     } catch (error: any) {
       dispatch(hideLoader());
 
@@ -171,9 +326,7 @@ const documentsSlice = createSlice({
       })
       .addCase(uploadDocuments.fulfilled, (state, action: PayloadAction<Document[]>) => {
         state.loading = false;
-        action.payload.forEach((doc, indx) => {
+        state.documents.push(...action.payload);
-          state.documents.push(doc);
-        });
       })
       .addCase(uploadDocuments.rejected, (state, action) => {
         state.loading = false;

src/store/slices/selectedDocsSlice.ts

@@ -55,6 +55,10 @@ 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,3 +1,335 @@
+// 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';
@@ -10,7 +342,7 @@ export enum recipientType {
 }
 
 export interface Recipient {
-    id?: string | null;
+    id?: string;
     firstName: string;
     lastName: string;
     routingOrder: number;
@@ -24,7 +356,7 @@ export interface Recipient {
     roleName: string
     provideOwnTags?: boolean;
     uuid?: string;
-    newOne?: boolean;
+    newOne: boolean;
 }
 
 export interface SelectedRecipientInt {
@@ -73,6 +405,8 @@ 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
@@ -103,6 +437,7 @@ 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}`);
@@ -132,10 +467,10 @@ 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
             }
@@ -152,6 +487,21 @@ 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,6 +23,7 @@ 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,21 +10,12 @@ const type_last_four = (str: string, changeWith: string): string => {
 };
 
 const type_credit_card = (str: string, changeWith: string): string => {
-    if (str.length !== 15 && str.length !== 16) return str;
+    if (str.length !== 16) return str;
-
+    // console.log(str.replace(/\d(?=\d{4})/g, "*"), "line 11", str)
-    const last4 = str.slice(-4);
+    // return str.replace(/\d(?=\d{4})/g, `${changeWith}`);
-    const masked = str.slice(0, -4).replace(/\d/g, changeWith);
+    return `${changeWith.repeat(4)} ${changeWith.repeat(4)} ${changeWith.repeat(4)} ${str.slice(-4)}`
-
-    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);
@@ -49,7 +40,7 @@ const type_social_insurance = (str: string, changeWith: string): string => {
 };
 
 const maskUtils = (type: string, original: string, changeWith: string): string => {
-
+    
     switch (changeWith) {
         case MASKCHARACTER.ASTERISK:
             changeWith = "*";

src/utlity/tagGroupConUtils.ts

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