From 72bb28b416e7a3a866813c1c8c3538f19e036023 Mon Sep 17 00:00:00 2001 From: =bhagwanSingh <=bhagwan.r@hicglobalsolutions.com> Date: Mon, 6 Oct 2025 09:29:53 +0530 Subject: [PATCH] Update TagsCon and UI 06-10 --- .env | 5 +- src/components/CommonNav.tsx | 376 +++++++++--------- .../accounts/TransactionDataTable.tsx | 3 +- src/components/client/SignDocument.tsx | 22 +- src/components/client/TagsCon.tsx | 36 +- src/components/contacts/Contacts.tsx | 3 +- src/components/dashboard/Loader.tsx | 2 +- src/components/dashboard/LogOutModal.tsx | 38 ++ src/components/dashboard/SideBar.tsx | 29 +- .../process/processStepOne/ProcessStepOne.tsx | 7 +- src/components/templates/TemplateTable.tsx | 3 +- 11 files changed, 277 insertions(+), 247 deletions(-) create mode 100644 src/components/dashboard/LogOutModal.tsx diff --git a/.env b/.env index 249b3e4..a291dd4 100644 --- a/.env +++ b/.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_SSE_URI="http://10.10.1.75:8083" \ No newline at end of file +# VITE_BASE_URI="https://sacha-countryfied-evolutionistically.ngrok-free.dev" +VITE_BASE_URI="http://52.10.89.255:8083" +VITE_SSE_URI="http://52.10.89.255:8083" \ No newline at end of file diff --git a/src/components/CommonNav.tsx b/src/components/CommonNav.tsx index 9662279..e5834a5 100644 --- a/src/components/CommonNav.tsx +++ b/src/components/CommonNav.tsx @@ -317,208 +317,210 @@ const CommonNav: React.FC = ({ ); return ( -
-
- {/* Mobile Hamburger Menu - Only show on mobile */} - {isMobile && ( -
- SME - -
- )} - - {/* Breadcrumb Navigation */} - -
- -
- - {/* SETINGS - START */} -
- - - - - - -
- {/* SETINGS - END */} - - {/* Bell START */} -
- - - - - - - - - - - -
- {/* Bell END */} - -
-
- + )} - {open && ( -
-
-
-
- {user ? ( - - {initial} - + {/* Breadcrumb Navigation */} +
-
-
{user?.name || '-'}
-
{user?.email || '-'}
-
- Account #{user?.account?.name || '-'} + + ); + }) + )} + +
+ +
+ + {/* SETINGS - START */} +
+ + + + + + +
+ {/* SETINGS - END */} + + {/* Bell START */} +
+ + + + + + + + + + + +
+ {/* Bell END */} + +
+ + + {open && ( +
+
+
+
+ {user ? ( + + {initial} + + ) : ( + + )} +
+
+
{user?.name || '-'}
+
{user?.email || '-'}
+
+ Account #{user?.account?.name || '-'} +
-
-
- -
-
- +
+ +
+
+ - {accountsOpen && ( -
- {loadingAccounts ? ( -
- - -
- ) : ( -
- {accounts?.length > 0 ? ( - accounts?.map((account) => ( -
- - )) - ) : ( - No Account... - )} -
- )} -
- )} -
+ + )) + ) : ( + No Account... + )} +
+ )} +
+ )} +
-
- +
+ +
-
- )} + )} +
-
-
+ + ); } export default CommonNav; \ No newline at end of file diff --git a/src/components/accounts/TransactionDataTable.tsx b/src/components/accounts/TransactionDataTable.tsx index 893b2fa..31e6235 100644 --- a/src/components/accounts/TransactionDataTable.tsx +++ b/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 = { CREATED: "bg-blue-100 text-blue-600", @@ -121,7 +122,7 @@ const TransactionDataTable = ({ activeAccountId }) => { - + diff --git a/src/components/client/SignDocument.tsx b/src/components/client/SignDocument.tsx index 44c8901..fda553b 100644 --- a/src/components/client/SignDocument.tsx +++ b/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) => { - setPageScales((prev) => ({ - ...prev, - [page.index]: { - x: imgElem.clientWidth / page.width, - y: imgElem.clientHeight / page.height, - }, - })); - }} + // onLoad={(imgElem) => { + // setPageScales((prev) => ({ + // ...prev, + // [page.index]: { + // x: imgElem.clientWidth / page.width, + // y: imgElem.clientHeight / page.height, + // }, + // })); + // }} width={page.width} height={page.height} src={page.src} @@ -1031,7 +1031,7 @@ const SignDocument = () => { {!hideTags && <> = ({ - scale, + pageWidth, currDocTags, pageIdkey, provideTags, @@ -301,12 +301,12 @@ const TagsCon: React.FC = ({ } } - 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 (
= ({ // 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}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, - // top: item.dimensions.top * scale.y, - // width: item.dimensions.width * scale.x, - // height: item.dimensions.height * scale.y, - // }} + style={{ + left: `${((item.dimensions.left / pageWidth) * 100)}%`, + top: item.dimensions.top, + width: `${((item.dimensions.width / pageWidth) * 100)}%`, + height: item.dimensions.height, + }} > {item.required &&
= ({ }} // contentEditable={true} - className={`outline-none whitespace-nowrap w-full max-h-max text-[${item.color}] text-[${item.textSize}px] ${item.italic ? "italic": ""} ${item.bold ? "font-semibold": ""} ${item.underline ? "underline": ""}`} + className={`outline-none whitespace-nowrap w-full max-h-max text-[${item.color}] text-[${item.textSize}px] ${item.italic ? "italic" : ""} ${item.bold ? "font-semibold" : ""} ${item.underline ? "underline" : ""}`} > {item.value ?? ""}

diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx index 3ea7c5e..4c7ff1f 100644 --- a/src/components/contacts/Contacts.tsx +++ b/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 ? ( - + ) : contacts.length === 0 ? ( diff --git a/src/components/dashboard/Loader.tsx b/src/components/dashboard/Loader.tsx index 786ede3..66a6e46 100644 --- a/src/components/dashboard/Loader.tsx +++ b/src/components/dashboard/Loader.tsx @@ -10,7 +10,7 @@ const Loader = () => { const loaderData = useSelector((state: RootState) => state.loader); return ( -
+
{/* Background */} {/*
*/}
diff --git a/src/components/dashboard/LogOutModal.tsx b/src/components/dashboard/LogOutModal.tsx new file mode 100644 index 0000000..2996cfc --- /dev/null +++ b/src/components/dashboard/LogOutModal.tsx @@ -0,0 +1,38 @@ +import React from 'react' + +interface LogOutModalInt { + showLogoutModal: boolean + setShowLogoutModal: React.Dispatch + onConfirm: () => void; +} + +const LogOutModal : React.FC = ({showLogoutModal, setShowLogoutModal, onConfirm}) => { + return ( + <> + {showLogoutModal && ( +
+
+

Confirm Logout

+

Are you sure you want to log out?

+
+ + +
+
+
+ )} + + ) +} + +export default LogOutModal \ No newline at end of file diff --git a/src/components/dashboard/SideBar.tsx b/src/components/dashboard/SideBar.tsx index d12167f..93689d5 100644 --- a/src/components/dashboard/SideBar.tsx +++ b/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 = ({ showSideBar, setShowSideBar, isMobile
{/* Logout Confirmation Modal */} - {showLogoutModal && ( -
-
-

Confirm Logout

-

Are you sure you want to log out?

-
- - -
-
-
- )} + + + ); }; diff --git a/src/components/process/processStepOne/ProcessStepOne.tsx b/src/components/process/processStepOne/ProcessStepOne.tsx index 07c5d05..350b2ba 100644 --- a/src/components/process/processStepOne/ProcessStepOne.tsx +++ b/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 '> - + */} {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (