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://concrete-gladly-mullet.ngrok-free.app"
# VITE_BASE_URI="https://smashing-albacore-engaging.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://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"

376
src/components/CommonNav.tsx
View File

@ -317,208 +317,210 @@ const CommonNav: React.FC<AccountNavProps> = ({
); );
return ( 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"> <header className="w-full px-3 py-1.5 flex justify-between items-center bg-white border-b border-gray-200">
{/* Mobile Hamburger Menu - Only show on mobile */} <div className="flex items-center space-x-4">
{isMobile && ( {/* Mobile Hamburger Menu - Only show on mobile */}
<div className='flex items-center justify-start'> {isMobile && (
<span className='text-[var(--primary)] text-xl text-center tracking-widest font-medium text-shadow-2xs'>SME</span> <div className='flex items-center justify-start'>
<button <span className='text-[var(--primary)] text-xl text-center tracking-widest font-medium text-shadow-2xs'>SME</span>
onClick={handleSidebarToggle} <button
className="p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200 text-gray-600 hover:text-gray-900" onClick={handleSidebarToggle}
aria-label="Toggle sidebar" className="p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200 text-gray-600 hover:text-gray-900"
> aria-label="Toggle sidebar"
<FaBars className="text-lg" /> >
</button> <FaBars className="text-lg" />
</div> </button>
)}
{/* Breadcrumb Navigation */}
<nav className="text-md font-medium text-gray-800 capitalize flex items-center flex-wrap">
{filteredPathnames.length === 0 ? (
<span className="hidden sm:block text-sm ml-4">Welcome <span className='text-white ml-1 bg-[#34BEFF] px-2.5 py-1 rounded-2xl'>{user.firstName ? user.firstName : user.lastName}!</span></span>
) : (
filteredPathnames.map((segment, index) => {
const label = labelMap[segment] || formatSegment(segment);
const to = "/" + filteredPathnames.slice(0, index + 1).join("/");
const isLast = index === filteredPathnames.length - 1;
return (
<span key={to} className="flex items-center">
{index > 0 && <span className="mx-2 text-gray-400">{">"}</span>}
{!isLast ? (
<Link
to={to}
className="text-blue-600 hover:text-blue-700 hover:underline transition-colors"
>
{label}
</Link>
) : (
<span className="text-gray-900 font-semibold">{label}</span>
)}
</span>
);
})
)}
</nav>
</div>
<div className="flex items-center space-x-2">
{/* SETINGS - START */}
<div
onClick={handleSettingsClick}
className="bg-[#F6F6F6] rounded-md py-1.5 px-2 cursor-pointer transition-all duration-200 hover:bg-[#DCDADA] mr-3">
<svg width="16" height="20" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.54">
<path d="M2 9.10996V14.88C2 17 2 17 4 18.35L9.5 21.53C10.33 22.01 11.68 22.01 12.5 21.53L18 18.35C20 17 20 17 20 14.89V9.10996C20 6.99996 20 6.99996 18 5.64996L12.5 2.46996C11.68 1.98996 10.33 1.98996 9.5 2.46996L4 5.64996C2 6.99996 2 6.99996 2 9.10996Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M11 15C12.6569 15 14 13.6569 14 12C14 10.3431 12.6569 9 11 9C9.34315 9 8 10.3431 8 12C8 13.6569 9.34315 15 11 15Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</g>
</svg>
</div>
{/* SETINGS - END */}
{/* Bell START */}
<div className="bg-[#F6F6F6] rounded-md py-1.5 px-2 cursor-pointer transition-all duration-200 hover:bg-[#DCDADA]">
<svg width="14" height="20" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.7493 8.74963C16.3353 8.74963 15.9993 8.41363 15.9993 7.99963C15.9993 4.92988 13.6087 2.30563 10.5562 2.02513C7.49653 1.7435 4.6574 3.88475 4.0994 6.9005C4.03265 7.25975 3.9989 7.6295 3.9989 7.99963C3.9989 8.41363 3.6629 8.74963 3.2489 8.74963C2.8349 8.74963 2.4989 8.41363 2.4989 7.99963C2.4989 7.538 2.5409 7.07638 2.62415 6.6275C3.32165 2.85763 6.8639 0.177876 10.6938 0.531126C14.5102 0.882126 17.4993 4.16263 17.4993 7.99963C17.4993 8.414 17.1637 8.74963 16.7493 8.74963Z" fill="#757575" />
<path d="M16.7493 17.7496C16.3353 17.7496 15.9993 17.4136 15.9993 16.9996C15.9993 16.5856 16.3353 16.2496 16.7493 16.2496C17.4873 16.2496 17.9433 15.7445 18.1237 15.2716C18.3033 14.8014 18.2996 14.1234 17.7495 13.6314C17.4408 13.3554 17.4138 12.881 17.6906 12.5724C17.9662 12.2637 18.441 12.2371 18.7492 12.5135C19.6702 13.337 19.9747 14.63 19.5247 15.8067C19.074 16.9869 17.9846 17.7496 16.7493 17.7496Z" fill="#757575" />
<path d="M16.7493 10.4686C16.3353 10.4686 15.9993 10.1326 15.9993 9.71863V8C15.9993 7.586 16.3353 7.25 16.7493 7.25C17.1633 7.25 17.4993 7.586 17.4993 8V9.71863C17.4993 10.1326 17.1637 10.4686 16.7493 10.4686Z" fill="#757575" />
<path d="M18.249 13.8226C18.0708 13.8226 17.8923 13.7596 17.7495 13.6318C16.6372 12.6369 15.9993 11.2108 15.9993 9.71863C15.9993 9.30463 16.3353 8.96863 16.7493 8.96863C17.1633 8.96863 17.4993 9.30463 17.4993 9.71863C17.4993 10.7844 17.955 11.8033 18.7492 12.5139C19.0578 12.7899 19.0848 13.2643 18.8081 13.5729C18.6603 13.7383 18.4552 13.8226 18.249 13.8226Z" fill="#757575" />
<path d="M3.24927 10.4686C2.83527 10.4686 2.49927 10.1326 2.49927 9.71863V8C2.49927 7.586 2.83527 7.25 3.24927 7.25C3.66327 7.25 3.99927 7.586 3.99927 8V9.71863C3.99927 10.1326 3.66364 10.4686 3.24927 10.4686Z" fill="#757575" />
<path d="M1.74974 13.8226C1.54349 13.8226 1.33837 13.7382 1.19062 13.5725C0.914245 13.2639 0.94087 12.7895 1.24949 12.5135C2.04374 11.8029 2.49937 10.7844 2.49937 9.71825C2.49937 9.30425 2.83537 8.96825 3.24937 8.96825C3.66337 8.96825 3.99937 9.30425 3.99937 9.71825C3.99937 11.2104 3.36149 12.6365 2.24924 13.6314C2.10637 13.7596 1.92787 13.8226 1.74974 13.8226Z" fill="#757575" />
<path d="M9.99933 21.4996C7.55995 21.4996 5.49933 19.439 5.49933 16.9996C5.49933 16.5856 5.83533 16.2496 6.24933 16.2496C6.66333 16.2496 6.99933 16.5856 6.99933 16.9996C6.99933 18.6256 8.37295 19.9996 9.99933 19.9996C11.6257 19.9996 12.9993 18.6256 12.9993 16.9996C12.9993 16.5856 13.3353 16.2496 13.7493 16.2496C14.1633 16.2496 14.4993 16.5856 14.4993 16.9996C14.4993 19.439 12.4387 21.4996 9.99933 21.4996Z" fill="#757575" />
<path d="M3.24931 17.7496C2.01406 17.7496 0.925435 16.9888 0.47581 15.8113C0.02506 14.6315 0.32881 13.337 1.24944 12.5139C1.55844 12.2379 2.03244 12.2641 2.30844 12.5731C2.58444 12.8821 2.55781 13.3558 2.24919 13.6321C1.69944 14.1238 1.69644 14.804 1.87681 15.2765C2.05644 15.7471 2.51169 16.2504 3.24931 16.2504C3.66331 16.2504 3.99931 16.5864 3.99931 17.0004C3.99931 17.4144 3.66369 17.7496 3.24931 17.7496Z" fill="#757575" />
<path d="M16.7493 17.7496H3.24927C2.83527 17.7496 2.49927 17.4136 2.49927 16.9996C2.49927 16.5856 2.83527 16.2496 3.24927 16.2496H16.7493C17.1633 16.2496 17.4993 16.5856 17.4993 16.9996C17.4993 17.4136 17.1636 17.7496 16.7493 17.7496Z" fill="#757575" />
</svg>
</div>
{/* Bell END */}
<div className="relative" ref={dropdownRef}>
<button
id='user-details-avatar'
className="flex items-center space-x-2 p-1 cursor-pointer rounded-lg transition-colors"
onClick={handleMainDropdownToggle}
aria-expanded={open}
aria-haspopup="true"
>
<div className="w-8 h-8 rounded-md overflow-hidden bg-gradient-to-br from-[var(--primary)] to-blue-600 flex items-center justify-center text-white font-semibold text-sm shadow-md">
{user ? (
<span className="w-full h-full object-cover p-1.5 font-bold">
{initial}
</span>
) : (
<FaUser className="text-lg" />
)}
</div> </div>
</button> )}
{open && ( {/* Breadcrumb Navigation */}
<div className="absolute right-0 mt-2 w-72 top-8 rounded-xl shadow-xl bg-white border border-gray-200 z-50 overflow-hidden"> <nav className="text-md font-medium text-gray-800 capitalize flex items-center flex-wrap">
<div className="px-4 py-4 bg-gradient-to-r from-blue-50 to-purple-50 border-b border-gray-100"> {filteredPathnames.length === 0 ? (
<div className="flex items-center space-x-3"> <span className="hidden sm:block text-sm ml-4">Welcome <span className='text-white ml-1 bg-[#34BEFF] px-2.5 py-1 rounded-2xl'>{user.firstName ? user.firstName : user.lastName}!</span></span>
<div className="w-12 h-12 rounded-full overflow-hidden bg-gradient-to-br from-[var(--primary)] to-blue-600 flex items-center justify-center text-white font-semibold shadow-md"> ) : (
{user ? ( filteredPathnames.map((segment, index) => {
<span className="w-full h-full object-cover px-3 text-xl py-2.5 font-bold"> const label = labelMap[segment] || formatSegment(segment);
{initial} const to = "/" + filteredPathnames.slice(0, index + 1).join("/");
</span> const isLast = index === filteredPathnames.length - 1;
return (
<span key={to} className="flex items-center">
{index > 0 && <span className="mx-2 text-gray-400">{">"}</span>}
{!isLast ? (
<Link
to={to}
className="text-blue-600 hover:text-blue-700 hover:underline transition-colors"
>
{label}
</Link>
) : ( ) : (
<FaUser className="text-lg" /> <span className="text-gray-900 font-semibold">{label}</span>
)} )}
</div> </span>
<div className="flex-1 min-w-0"> );
<div className="font-semibold text-gray-900 truncate">{user?.name || '-'}</div> })
<div className="text-sm text-gray-600 truncate">{user?.email || '-'}</div> )}
<div className="text-xs text-gray-500 mt-1"> </nav>
Account #{user?.account?.name || '-'} </div>
<div className="flex items-center space-x-2">
{/* SETINGS - START */}
<div
onClick={handleSettingsClick}
className="bg-[#F6F6F6] rounded-md py-1.5 px-2 cursor-pointer transition-all duration-200 hover:bg-[#DCDADA] mr-3">
<svg width="16" height="20" viewBox="0 0 22 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.54">
<path d="M2 9.10996V14.88C2 17 2 17 4 18.35L9.5 21.53C10.33 22.01 11.68 22.01 12.5 21.53L18 18.35C20 17 20 17 20 14.89V9.10996C20 6.99996 20 6.99996 18 5.64996L12.5 2.46996C11.68 1.98996 10.33 1.98996 9.5 2.46996L4 5.64996C2 6.99996 2 6.99996 2 9.10996Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M11 15C12.6569 15 14 13.6569 14 12C14 10.3431 12.6569 9 11 9C9.34315 9 8 10.3431 8 12C8 13.6569 9.34315 15 11 15Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</g>
</svg>
</div>
{/* SETINGS - END */}
{/* Bell START */}
<div className="bg-[#F6F6F6] rounded-md py-1.5 px-2 cursor-pointer transition-all duration-200 hover:bg-[#DCDADA]">
<svg width="14" height="20" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.7493 8.74963C16.3353 8.74963 15.9993 8.41363 15.9993 7.99963C15.9993 4.92988 13.6087 2.30563 10.5562 2.02513C7.49653 1.7435 4.6574 3.88475 4.0994 6.9005C4.03265 7.25975 3.9989 7.6295 3.9989 7.99963C3.9989 8.41363 3.6629 8.74963 3.2489 8.74963C2.8349 8.74963 2.4989 8.41363 2.4989 7.99963C2.4989 7.538 2.5409 7.07638 2.62415 6.6275C3.32165 2.85763 6.8639 0.177876 10.6938 0.531126C14.5102 0.882126 17.4993 4.16263 17.4993 7.99963C17.4993 8.414 17.1637 8.74963 16.7493 8.74963Z" fill="#757575" />
<path d="M16.7493 17.7496C16.3353 17.7496 15.9993 17.4136 15.9993 16.9996C15.9993 16.5856 16.3353 16.2496 16.7493 16.2496C17.4873 16.2496 17.9433 15.7445 18.1237 15.2716C18.3033 14.8014 18.2996 14.1234 17.7495 13.6314C17.4408 13.3554 17.4138 12.881 17.6906 12.5724C17.9662 12.2637 18.441 12.2371 18.7492 12.5135C19.6702 13.337 19.9747 14.63 19.5247 15.8067C19.074 16.9869 17.9846 17.7496 16.7493 17.7496Z" fill="#757575" />
<path d="M16.7493 10.4686C16.3353 10.4686 15.9993 10.1326 15.9993 9.71863V8C15.9993 7.586 16.3353 7.25 16.7493 7.25C17.1633 7.25 17.4993 7.586 17.4993 8V9.71863C17.4993 10.1326 17.1637 10.4686 16.7493 10.4686Z" fill="#757575" />
<path d="M18.249 13.8226C18.0708 13.8226 17.8923 13.7596 17.7495 13.6318C16.6372 12.6369 15.9993 11.2108 15.9993 9.71863C15.9993 9.30463 16.3353 8.96863 16.7493 8.96863C17.1633 8.96863 17.4993 9.30463 17.4993 9.71863C17.4993 10.7844 17.955 11.8033 18.7492 12.5139C19.0578 12.7899 19.0848 13.2643 18.8081 13.5729C18.6603 13.7383 18.4552 13.8226 18.249 13.8226Z" fill="#757575" />
<path d="M3.24927 10.4686C2.83527 10.4686 2.49927 10.1326 2.49927 9.71863V8C2.49927 7.586 2.83527 7.25 3.24927 7.25C3.66327 7.25 3.99927 7.586 3.99927 8V9.71863C3.99927 10.1326 3.66364 10.4686 3.24927 10.4686Z" fill="#757575" />
<path d="M1.74974 13.8226C1.54349 13.8226 1.33837 13.7382 1.19062 13.5725C0.914245 13.2639 0.94087 12.7895 1.24949 12.5135C2.04374 11.8029 2.49937 10.7844 2.49937 9.71825C2.49937 9.30425 2.83537 8.96825 3.24937 8.96825C3.66337 8.96825 3.99937 9.30425 3.99937 9.71825C3.99937 11.2104 3.36149 12.6365 2.24924 13.6314C2.10637 13.7596 1.92787 13.8226 1.74974 13.8226Z" fill="#757575" />
<path d="M9.99933 21.4996C7.55995 21.4996 5.49933 19.439 5.49933 16.9996C5.49933 16.5856 5.83533 16.2496 6.24933 16.2496C6.66333 16.2496 6.99933 16.5856 6.99933 16.9996C6.99933 18.6256 8.37295 19.9996 9.99933 19.9996C11.6257 19.9996 12.9993 18.6256 12.9993 16.9996C12.9993 16.5856 13.3353 16.2496 13.7493 16.2496C14.1633 16.2496 14.4993 16.5856 14.4993 16.9996C14.4993 19.439 12.4387 21.4996 9.99933 21.4996Z" fill="#757575" />
<path d="M3.24931 17.7496C2.01406 17.7496 0.925435 16.9888 0.47581 15.8113C0.02506 14.6315 0.32881 13.337 1.24944 12.5139C1.55844 12.2379 2.03244 12.2641 2.30844 12.5731C2.58444 12.8821 2.55781 13.3558 2.24919 13.6321C1.69944 14.1238 1.69644 14.804 1.87681 15.2765C2.05644 15.7471 2.51169 16.2504 3.24931 16.2504C3.66331 16.2504 3.99931 16.5864 3.99931 17.0004C3.99931 17.4144 3.66369 17.7496 3.24931 17.7496Z" fill="#757575" />
<path d="M16.7493 17.7496H3.24927C2.83527 17.7496 2.49927 17.4136 2.49927 16.9996C2.49927 16.5856 2.83527 16.2496 3.24927 16.2496H16.7493C17.1633 16.2496 17.4993 16.5856 17.4993 16.9996C17.4993 17.4136 17.1636 17.7496 16.7493 17.7496Z" fill="#757575" />
</svg>
</div>
{/* Bell END */}
<div className="relative" ref={dropdownRef}>
<button
id='user-details-avatar'
className="flex items-center space-x-2 p-1 cursor-pointer rounded-lg transition-colors"
onClick={handleMainDropdownToggle}
aria-expanded={open}
aria-haspopup="true"
>
<div className="w-8 h-8 rounded-md overflow-hidden bg-gradient-to-br from-[var(--primary)] to-blue-600 flex items-center justify-center text-white font-semibold text-sm shadow-md">
{user ? (
<span className="w-full h-full object-cover p-1.5 font-bold">
{initial}
</span>
) : (
<FaUser className="text-lg" />
)}
</div>
</button>
{open && (
<div className="absolute right-0 mt-2 w-72 top-8 rounded-xl shadow-xl bg-white border border-gray-200 z-50 overflow-hidden">
<div className="px-4 py-4 bg-gradient-to-r from-blue-50 to-purple-50 border-b border-gray-100">
<div className="flex items-center space-x-3">
<div className="w-12 h-12 rounded-full overflow-hidden bg-gradient-to-br from-[var(--primary)] to-blue-600 flex items-center justify-center text-white font-semibold shadow-md">
{user ? (
<span className="w-full h-full object-cover px-3 text-xl py-2.5 font-bold">
{initial}
</span>
) : (
<FaUser className="text-lg" />
)}
</div>
<div className="flex-1 min-w-0">
<div className="font-semibold text-gray-900 truncate">{user?.name || '-'}</div>
<div className="text-sm text-gray-600 truncate">{user?.email || '-'}</div>
<div className="text-xs text-gray-500 mt-1">
Account #{user?.account?.name || '-'}
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div className="border-b border-gray-100"> <div className="border-b border-gray-100">
<button <button
onClick={handleSettingsClick} onClick={handleSettingsClick}
className="w-full flex items-center justify-between px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer" className="w-full flex items-center justify-between px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer"
> >
<div className="flex items-center"> <div className="flex items-center">
<IoSettings className="mr-2.5 text-lg text-gray-500" /> <IoSettings className="mr-2.5 text-lg text-gray-500" />
<span>Settings</span> <span>Settings</span>
</div> </div>
{/* <FaChevronDown className={`text-gray-400 transition-transform ${accountsOpen ? 'rotate-180' : ''}`} /> */} {/* <FaChevronDown className={`text-gray-400 transition-transform ${accountsOpen ? 'rotate-180' : ''}`} /> */}
</button> </button>
</div> </div>
<div className="border-b border-gray-100"> <div className="border-b border-gray-100">
<button <button
onClick={handleAccountsClick} onClick={handleAccountsClick}
className="w-full flex items-center justify-between px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer" className="w-full flex items-center justify-between px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors cursor-pointer"
> >
<div className="flex items-center"> <div className="flex items-center">
<FaBuilding className="mr-3 text-gray-500" /> <FaBuilding className="mr-3 text-gray-500" />
<span>Switch Account</span> <span>Switch Account</span>
</div> </div>
<FaChevronDown className={`text-gray-400 transition-transform ${accountsOpen ? 'rotate-180' : ''}`} /> <FaChevronDown className={`text-gray-400 transition-transform ${accountsOpen ? 'rotate-180' : ''}`} />
</button> </button>
{accountsOpen && ( {accountsOpen && (
<div className="bg-gray-50 max-h-64 overflow-y-auto"> <div className="bg-gray-50 max-h-64 overflow-y-auto">
{loadingAccounts ? ( {loadingAccounts ? (
<div className="space-y-0"> <div className="space-y-0">
<ShimmerRow /> <ShimmerRow />
<ShimmerRow /> <ShimmerRow />
</div> </div>
) : ( ) : (
<div className="divide-y divide-gray-200"> <div className="divide-y divide-gray-200">
{accounts?.length > 0 ? ( {accounts?.length > 0 ? (
accounts?.map((account) => ( accounts?.map((account) => (
<button <button
key={account.accountId} key={account.accountId}
onClick={() => handleAccountSwitch(account)} onClick={() => handleAccountSwitch(account)}
className={`w-full px-4 py-3 hover:bg-white transition-colors cursor-pointer text-left`} className={`w-full px-4 py-3 hover:bg-white transition-colors cursor-pointer text-left`}
> >
<div className={`flex items-center justify-between`}> <div className={`flex items-center justify-between`}>
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 flex items-center justify-center text-white font-semibold text-xs"> <div className="w-8 h-8 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 flex items-center justify-center text-white font-semibold text-xs">
{account.accountName.slice(0, 2).toUpperCase()} {account.accountName.slice(0, 2).toUpperCase()}
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<span className="font-medium text-gray-900 text-sm">{account.accountName}</span> <span className="font-medium text-gray-900 text-sm">{account.accountName}</span>
{account.accountId === activeAccountId && ( {account.accountId === activeAccountId && (
<FaCheck className="text-green-600 text-xs" /> <FaCheck className="text-green-600 text-xs" />
)} )}
</div>
</div> </div>
</div> </div>
<div className="text-xs text-gray-500 bg-gray-200 px-2 py-1 rounded">
{account.role}
</div>
</div> </div>
<div className="text-xs text-gray-500 bg-gray-200 px-2 py-1 rounded"> </button>
{account.role} ))
</div> ) : (
</div> <span className='text-gray-400 font-medium text-[12px] flex justify-center p-3'>No Account...</span>
</button> )}
)) </div>
) : ( )}
<span className='text-gray-400 font-medium text-[12px] flex justify-center p-3'>No Account...</span> </div>
)} )}
</div> </div>
)}
</div>
)}
</div>
<div className="border-t border-gray-100"> <div className="border-t border-gray-100">
<button <button
onClick={handleLogout} onClick={handleLogout}
className="w-full flex items-center px-4 py-3 text-sm text-red-600 hover:bg-red-50 transition-colors cursor-pointer" className="w-full flex items-center px-4 py-3 text-sm text-red-600 hover:bg-red-50 transition-colors cursor-pointer"
> >
<FaSignOutAlt className="mr-3" /> <FaSignOutAlt className="mr-3" />
<span>Log Out</span> <span>Log Out</span>
</button> </button>
</div>
</div> </div>
</div> )}
)} </div>
</div> </div>
</div> </header>
</header> </>
); );
} }
export default CommonNav; 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 logoRecord from "../../assets/record.svg";
import api from "../../config/api"; import api from "../../config/api";
import DownloadDocument from "./DownloadDocument"; import DownloadDocument from "./DownloadDocument";
import Loader from "../dashboard/Loader";
const statusColorMap: Record<string, string> = { const statusColorMap: Record<string, string> = {
CREATED: "bg-blue-100 text-blue-600", CREATED: "bg-blue-100 text-blue-600",
@ -121,7 +122,7 @@ const TransactionDataTable = ({ activeAccountId }) => {
<tbody> <tbody>
<tr> <tr>
<td colSpan={6} className="py-10 text-center"> <td colSpan={6} className="py-10 text-center">
<LoaderUi /> <Loader />
</td> </td>
</tr> </tr>
</tbody> </tbody>

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

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

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

@ -14,7 +14,7 @@ import axios from 'axios';
interface TagsConProps { interface TagsConProps {
scale: { x: number | null, y: number | null } pageWidth: number,
currDocTags: DroppedItem[] currDocTags: DroppedItem[]
pageIdkey: string; pageIdkey: string;
provideTags: boolean provideTags: boolean
@ -40,7 +40,7 @@ interface TagsConProps {
} }
const TagsCon: React.FC<TagsConProps> = ({ const TagsCon: React.FC<TagsConProps> = ({
scale, pageWidth,
currDocTags, currDocTags,
pageIdkey, pageIdkey,
provideTags, provideTags,
@ -301,12 +301,12 @@ const TagsCon: React.FC<TagsConProps> = ({
} }
} }
console.log(droppedItems)
return ( return (
<> <>
{currDocTags.map((item, index) => { {currDocTags.map((item, index) => {
if (item.pageIndex !== pageIndex || item.documentId != documentId) return <></>; if (item.pageIndex !== pageIndex || item.documentId != documentId) return <></>;
console.log('pageWidth:', pageWidth, 'computed left:', (item.dimensions.left / pageWidth) * 100);
return ( return (
<div <div
tabIndex={index + 1} tabIndex={index + 1}
@ -319,21 +319,21 @@ const TagsCon: React.FC<TagsConProps> = ({
// onPointerDown={(e) => handleTagMouseDown(e, key, index)} // onPointerDown={(e) => handleTagMouseDown(e, key, index)}
className="absolute rounded dropped-item text-sm" className="absolute rounded dropped-item text-sm"
// onClick={() => handleTagClick(key, index)} // onClick={() => handleTagClick(key, index)}
style={{ // style={{
left: `${item.dimensions.left}px`, // left: `${item.dimensions.left}px`,
top: `${item.dimensions.top}px`, // top: `${item.dimensions.top}px`,
width: `${item.dimensions.width}px`, // width: `${item.dimensions.width}px`,
height: `${item.dimensions.height}px`, // height: `${item.dimensions.height}px`,
border: `${((!hideTags && focusElement) && !transparentTags && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) ? '2px dashed #1c398e' : 'none'}`, // border: `${((!hideTags && focusElement) && !transparentTags && focusElement.documentId === item.documentId && focusElement.focusElementIndx === index) ? '2px dashed #1c398e' : 'none'}`,
// display: `${hideTags ? 'none' : 'block'}` // // display: `${hideTags ? 'none' : 'block'}`
}} // }}
// style={{ style={{
// left: item.dimensions.left * scale.x, left: `${((item.dimensions.left / pageWidth) * 100)}%`,
// top: item.dimensions.top * scale.y, top: item.dimensions.top,
// width: item.dimensions.width * scale.x, width: `${((item.dimensions.width / pageWidth) * 100)}%`,
// height: item.dimensions.height * scale.y, height: item.dimensions.height,
// }} }}
> >
{item.required && <div {item.required && <div
@ -518,7 +518,7 @@ const TagsCon: React.FC<TagsConProps> = ({
}} }}
// contentEditable={true} // 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 ?? ""} {item.value ?? ""}
</p> </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 { IoMdAdd } from 'react-icons/io';
import LoaderUi from '../../helper/LoaderUi'; import LoaderUi from '../../helper/LoaderUi';
import logoRecord from '../../assets/record.svg' import logoRecord from '../../assets/record.svg'
import Loader from '../dashboard/Loader';
type ContactSchema = [{ type ContactSchema = [{
id: number, id: number,
@ -145,7 +146,7 @@ const Contacts = () => {
{loading ? ( {loading ? (
<tr> <tr>
<td colSpan="4" className="relative h-100"> <td colSpan="4" className="relative h-100">
<LoaderUi /> <Loader />
</td> </td>
</tr> </tr>
) : contacts.length === 0 ? ( ) : contacts.length === 0 ? (

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

@ -10,7 +10,7 @@ const Loader = () => {
const loaderData = useSelector((state: RootState) => state.loader); const loaderData = useSelector((state: RootState) => state.loader);
return ( 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 */} {/* 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-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> <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 { GrContactInfo, GrTransaction } from 'react-icons/gr';
import logoSME from '../../assets/SMELogo.png' import logoSME from '../../assets/SMELogo.png'
import api from '../../config/api'; import api from '../../config/api';
import LogOutModal from './LogOutModal';
type SideBarProps = { type SideBarProps = {
showSideBar: boolean; showSideBar: boolean;
@ -139,28 +140,12 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar, isMobile
</div> </div>
{/* Logout Confirmation Modal */} {/* 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>
)}
</> </>
); );
}; };

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

@ -337,8 +337,9 @@ const ProcessStepOne = () => {
(async () => { (async () => {
try { try {
await api.put(`/api/v1/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" }) await api.put(`/api/v1/accounts/${accountId}/${transactionTemplateToggle}/${transactionId}`, { status: "SENT" })
dispatch(showLoader("Redirecting . . ."));
if (accountId && transactionId) signSessionRedirect(accountId, transactionId, recipientId); if (accountId && transactionId) signSessionRedirect(accountId, transactionId, recipientId);
dispatch(hideLoader()); // dispatch(hideLoader());
} catch (err) { } catch (err) {
console.log("Error Transaction Sent", err.message); console.log("Error Transaction Sent", err.message);
} }
@ -443,12 +444,12 @@ const ProcessStepOne = () => {
id="add-tags-btn-step-one" 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 '> 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)} 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" 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 Advanced Options
</button> </button> */}
{transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && ( {transactionTemplateToggle === TRANSACTION_TEMPLATE_TOGGLE.TEMPLATES && (
<button <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 { PiDotsThreeOutlineVerticalFill } from 'react-icons/pi';
import { TemplateInterface } from '../../utlity/types'; import { TemplateInterface } from '../../utlity/types';
import TemplateDeleteWarnModal from './TemplateDeleteWarnModal'; import TemplateDeleteWarnModal from './TemplateDeleteWarnModal';
import Loader from '../dashboard/Loader';
const TemplateTable = () => { const TemplateTable = () => {
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
@ -158,7 +159,7 @@ const TemplateTable = () => {
<tbody> <tbody>
<tr> <tr>
<td colSpan="6" className="relative h-100"> <td colSpan="6" className="relative h-100">
<LoaderUi /> <Loader />
</td> </td>
</tr> </tr>
</tbody> </tbody>