BhawanSingh
/
SME-Web
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Update TagsCon and UI 06-10

This commit is contained in:
=bhagwanSingh 2025-10-06 09:29:53 +05:30
parent 8b7193ad2d
commit 72bb28b416
11 changed files with 277 additions and 247 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.env
View File

@ -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"
# 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"

2
src/components/CommonNav.tsx
View File

@ -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;

3
src/components/accounts/TransactionDataTable.tsx
View File

@ -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>

22
src/components/client/SignDocument.tsx
View File

@ -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 && <>
<TagsCon
scale={pageScales[page.index] || { x: 1, y: 1 }}
pageWidth={page.width}
currDocTags={currDocTags}
pageIdkey={key}
provideTags={provideTags}

34
src/components/client/TagsCon.tsx
View File

@ -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,
// top: item.dimensions.top * scale.y,
// width: item.dimensions.width * scale.x,
// height: item.dimensions.height * scale.y,
// 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 / pageWidth) * 100)}%`,
top: item.dimensions.top,
width: `${((item.dimensions.width / pageWidth) * 100)}%`,
height: item.dimensions.height,
}}
>
{item.required && <div
@ -518,7 +518,7 @@ const TagsCon: React.FC<TagsConProps> = ({
}}
// 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 ?? ""}
</p>

3
src/components/contacts/Contacts.tsx
View File

@ -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 ? (

2
src/components/dashboard/Loader.tsx
View File

@ -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>

38
src/components/dashboard/LogOutModal.tsx Normal file
View File

@ -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

29
src/components/dashboard/SideBar.tsx
View File

@ -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 && (
<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={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>
)}
<LogOutModal
showLogoutModal={showLogoutModal}
setShowLogoutModal={setShowLogoutModal}
onConfirm={handleLogoutConfirm} />
</>
);
};

7
src/components/process/processStepOne/ProcessStepOne.tsx
View File

@ -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

3
src/components/templates/TemplateTable.tsx
View File

@ -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>