Update TagsCon and UI 06-10

.env

@@ -5,5 +5,6 @@
 # VITE_BASE_URI="https://concrete-gladly-mullet.ngrok-free.app"
 # VITE_BASE_URI="https://smashing-albacore-engaging.ngrok-free.app"
 # VITE_BASE_URI="https://basically-polished-yeti.ngrok-free.app"
-VITE_BASE_URI="https://sacha-countryfied-evolutionistically.ngrok-free.dev"
+# VITE_BASE_URI="https://sacha-countryfied-evolutionistically.ngrok-free.dev"
-VITE_SSE_URI="http://10.10.1.75:8083"
+VITE_BASE_URI="http://52.10.89.255:8083"
+VITE_SSE_URI="http://52.10.89.255:8083"

src/components/CommonNav.tsx

@@ -317,6 +317,7 @@ const CommonNav: React.FC<AccountNavProps> = ({
   );
 
   return (
+    <>
       <header className="w-full px-3 py-1.5 flex justify-between items-center bg-white border-b border-gray-200">
         <div className="flex items-center space-x-4">
           {/* Mobile Hamburger Menu - Only show on mobile */}
@@ -519,6 +520,7 @@ const CommonNav: React.FC<AccountNavProps> = ({
           </div>
         </div>
       </header>
+    </>
   );
 }
 export default CommonNav;

src/components/accounts/TransactionDataTable.tsx

@@ -5,6 +5,7 @@ import LoaderUi from "../../helper/LoaderUi";
 import logoRecord from "../../assets/record.svg";
 import api from "../../config/api";
 import DownloadDocument from "./DownloadDocument";
+import Loader from "../dashboard/Loader";
 
 const statusColorMap: Record<string, string> = {
     CREATED: "bg-blue-100 text-blue-600",
@@ -121,7 +122,7 @@ const TransactionDataTable = ({ activeAccountId }) => {
                         <tbody>
                             <tr>
                                 <td colSpan={6} className="py-10 text-center">
-                                    <LoaderUi />
+                                    <Loader />
                                 </td>
                             </tr>
                         </tbody>

src/components/client/SignDocument.tsx

@@ -542,7 +542,7 @@ const SignDocument = () => {
         if (droppedItems.length > 0) {
             handlePrefillValues();
         }
-    }, [droppedItems])
+    }, [droppedItems.length])
 
 
     useEffect(() => {
@@ -1015,15 +1015,15 @@ const SignDocument = () => {
                                                                 // style={{ "minWidth": page.width, "minHeight": page.height, "maxWidth": page.width, "maxHeight": page.height }}
                                                                 style={{ "width": page.width, "height": page.height, "maxWidth": "100%", "maxHeight": "100%" }}
                                                                 draggable="false"
-                                                                onLoad={(imgElem) => {
+                                                                // onLoad={(imgElem) => {
-                                                                    setPageScales((prev) => ({
+                                                                    // setPageScales((prev) => ({
-                                                                        ...prev,
+                                                                    //     ...prev,
-                                                                        [page.index]: {
+                                                                    //     [page.index]: {
-                                                                            x: imgElem.clientWidth / page.width,
+                                                                    //         x: imgElem.clientWidth / page.width,
-                                                                            y: imgElem.clientHeight / page.height,
+                                                                    //         y: imgElem.clientHeight / page.height,
-                                                                        },
+                                                                    //     },
-                                                                    }));
+                                                                    // }));
-                                                                }}
+                                                                // }}
                                                                 width={page.width}
                                                                 height={page.height}
                                                                 src={page.src}
@@ -1031,7 +1031,7 @@ const SignDocument = () => {
 
                                                             {!hideTags && <>
                                                                 <TagsCon
-                                                                    scale={pageScales[page.index] || { x: 1, y: 1 }}
+                                                                    pageWidth={page.width}
                                                                     currDocTags={currDocTags}
                                                                     pageIdkey={key}
                                                                     provideTags={provideTags}

src/components/client/TagsCon.tsx

@@ -14,7 +14,7 @@ import axios from 'axios';
 
 
 interface TagsConProps {
-    scale: { x: number | null, y: number | null }
+    pageWidth: number,
     currDocTags: DroppedItem[]
     pageIdkey: string;
     provideTags: boolean
@@ -40,7 +40,7 @@ interface TagsConProps {
 }
 
 const TagsCon: React.FC<TagsConProps> = ({
-    scale,
+    pageWidth,
     currDocTags,
     pageIdkey,
     provideTags,
@@ -301,12 +301,12 @@ const TagsCon: React.FC<TagsConProps> = ({
         }
     }
 
-    console.log(droppedItems)
 
     return (
         <>
             {currDocTags.map((item, index) => {
                 if (item.pageIndex !== pageIndex || item.documentId != documentId) return <></>;
+                console.log('pageWidth:', pageWidth, 'computed left:', (item.dimensions.left / pageWidth) * 100);
                 return (
                     <div
                         tabIndex={index + 1}
@@ -319,21 +319,21 @@ const TagsCon: React.FC<TagsConProps> = ({
                         // onPointerDown={(e) => handleTagMouseDown(e, key, index)}
                         className="absolute rounded dropped-item text-sm"
                         // onClick={() => handleTagClick(key, index)}
-                        style={{
-                            left: `${item.dimensions.left}px`,
-                            top: `${item.dimensions.top}px`,
-                            width: `${item.dimensions.width}px`,
-                            height: `${item.dimensions.height}px`,
-                            border: `${((!hideTags && focusElement) && !transparentTags && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) ? '2px dashed #1c398e' : 'none'}`,
-                            // display: `${hideTags ? 'none' : 'block'}`
-                        }}
-
                         // style={{
-                    //     left: item.dimensions.left * scale.x,
+                        //     left: `${item.dimensions.left}px`,
-                    //     top: item.dimensions.top * scale.y,
+                        //     top: `${item.dimensions.top}px`,
-                    //     width: item.dimensions.width * scale.x,
+                        //     width: `${item.dimensions.width}px`,
-                    //     height: item.dimensions.height * scale.y,
+                        //     height: `${item.dimensions.height}px`,
+                        //     border: `${((!hideTags && focusElement) && !transparentTags && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) ? '2px dashed #1c398e' : 'none'}`,
+                        //     // display: `${hideTags ? 'none' : 'block'}`
                         // }}
+
+                        style={{
+                            left: `${((item.dimensions.left / pageWidth) * 100)}%`,
+                            top: item.dimensions.top,
+                            width: `${((item.dimensions.width / pageWidth) * 100)}%`,
+                            height: item.dimensions.height,
+                        }}
                     >
 
                         {item.required && <div

src/components/contacts/Contacts.tsx

@@ -6,6 +6,7 @@ import { Bounce, toast } from 'react-toastify';
 import { IoMdAdd } from 'react-icons/io';
 import LoaderUi from '../../helper/LoaderUi';
 import logoRecord from '../../assets/record.svg'
+import Loader from '../dashboard/Loader';
 
 type ContactSchema = [{
     id: number,
@@ -145,7 +146,7 @@ const Contacts = () => {
                             {loading ? (
                                 <tr>
                                     <td colSpan="4" className="relative h-100">
-                                        <LoaderUi />
+                                        <Loader />
                                     </td>
                                 </tr>
                             ) : contacts.length === 0 ? (

src/components/dashboard/Loader.tsx

@@ -10,7 +10,7 @@ const Loader = () => {
     const loaderData = useSelector((state: RootState) => state.loader);
 
     return (
-        <div className='absolute w-full h-full top-0 left-0 transition-all duration-75'>
+        <div className='fixed w-full h-full top-0 left-0 transition-all duration-75 z-50'>
             {/* Background */}
             {/* <div className="z-50 absolute w-screen h-screen flex items-center justify-center bg-gradient-to-br from-white/20 to-white/10 backdrop-blur-xs"></div> */}
             <div className="z-50 absolute w-screen h-screen flex items-center justify-center bg-[var(--hideModalBg)] opacity-60"></div>

src/components/dashboard/LogOutModal.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+interface LogOutModalInt {
+    showLogoutModal: boolean
+    setShowLogoutModal: React.Dispatch<boolean>
+    onConfirm: () => void;
+}
+
+const LogOutModal : React.FC<LogOutModalInt> = ({showLogoutModal, setShowLogoutModal, onConfirm}) => {
+    return (
+        <>
+            {showLogoutModal && (
+                <div className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50">
+                    <div className="bg-white rounded-lg shadow-xl p-4 sm:p-6 w-70 sm:w-40 lg:w-80">
+                        <h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Logout</h3>
+                        <p className="text-gray-600 mb-6">Are you sure you want to log out?</p>
+                        <div className="flex justify-end gap-3">
+                            <button
+                                onClick={() => setShowLogoutModal(false)}
+                                className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                onClick={onConfirm}
+                                className="px-4 py-2 bg-red-600 text-white hover:bg-red-700 rounded-md transition-colors"
+                            >
+                                Log Out
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    )
+}
+
+export default LogOutModal

src/components/dashboard/SideBar.tsx

@@ -14,6 +14,7 @@ import { MdManageAccounts } from 'react-icons/md';
 import { GrContactInfo, GrTransaction } from 'react-icons/gr';
 import logoSME from '../../assets/SMELogo.png'
 import api from '../../config/api';
+import LogOutModal from './LogOutModal';
 
 type SideBarProps = {
     showSideBar: boolean;
@@ -139,28 +140,12 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar, isMobile
             </div>
 
             {/* Logout Confirmation Modal */}
-            {showLogoutModal && (
+            <LogOutModal
-                <div className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50">
+                showLogoutModal={showLogoutModal}
-                    <div className="bg-white rounded-lg shadow-xl p-4 sm:p-6 w-70 sm:w-40 lg:w-80">
+                setShowLogoutModal={setShowLogoutModal}
-                        <h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Logout</h3>
+                onConfirm={handleLogoutConfirm} />
-                        <p className="text-gray-600 mb-6">Are you sure you want to log out?</p>
+
-                        <div className="flex justify-end gap-3">
+
-                            <button
-                                onClick={() => setShowLogoutModal(false)}
-                                className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-md transition-colors"
-                            >
-                                Cancel
-                            </button>
-                            <button
-                                onClick={handleLogoutConfirm}
-                                className="px-4 py-2 bg-red-600 text-white hover:bg-red-700 rounded-md transition-colors"
-                            >
-                                Log Out
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            )}
         </>
     );
 };

src/components/process/processStepOne/ProcessStepOne.tsx

@@ -337,8 +337,9 @@ const ProcessStepOne = () => {
           (async () => {
             try {
               await api.put(`/api/v1/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
+              dispatch(showLoader("Redirecting . . ."));
               if (accountId && transactionId) signSessionRedirect(accountId, transactionId, recipientId);
-              dispatch(hideLoader());
+              // dispatch(hideLoader());
             } catch (err) {
               console.log("Error Transaction Sent", err.message);
             }
@@ -443,12 +444,12 @@ const ProcessStepOne = () => {
               id="add-tags-btn-step-one"
               className='flex sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3 w-full sm:w-auto '>
 
-              <button
+              {/* <button
                 onClick={() => setShowAdvancedOptions(true)}
                 className="text-sm w-full sm:w-auto px-4 py-2 rounded text-slate-800 border shadow hover:bg-[var(--primary)] hover:text-white transition duration-300 cursor-pointer"
               >
                 Advanced Options
-              </button>
+              </button> */}
 
               {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
                 <button

src/components/templates/TemplateTable.tsx

@@ -7,6 +7,7 @@ import api from '../../config/api';
 import { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
 import { TemplateInterface } from '../../utlity/types';
 import TemplateDeleteWarnModal from './TemplateDeleteWarnModal';
+import Loader from '../dashboard/Loader';
 
 const TemplateTable = () => {
     const [loading, setLoading] = useState(false)
@@ -158,7 +159,7 @@ const TemplateTable = () => {
                             <tbody>
                                 <tr>
                                     <td colSpan="6" className="relative h-100">
-                                        <LoaderUi />
+                                        <Loader />
                                     </td>
                                 </tr>
                             </tbody>