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

Compare commits

base: BhawanSingh:a1c93a4a6120e3533749e33127dc858492c5108b
Branches Tags
BhawanSingh:master
BhawanSingh:fontAdded
BhawanSingh:main
BhawanSingh:remove_ps1
BhawanSingh:jai
BhawanSingh:bhagwan
BhawanSingh:bhagwanSingh
..
compare: BhawanSingh:ee6160ff711660252e909bdabd827c3362e33f5e
Branches Tags
BhawanSingh:fontAdded
BhawanSingh:main
BhawanSingh:remove_ps1
BhawanSingh:jai
BhawanSingh:bhagwan
BhawanSingh:master
BhawanSingh:bhagwanSingh

No commits in common. "a1c93a4a6120e3533749e33127dc858492c5108b" and "ee6160ff711660252e909bdabd827c3362e33f5e" have entirely different histories.
a1c93a4a61 ... ee6160ff71

21 changed files with 622 additions and 1053 deletions
Show Stats Expand all files Collapse all files

141
src/components/CommonNav.tsx
View File

@ -1,14 +1,12 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom'; import { Link, useLocation, useNavigate } from 'react-router-dom';
import { FaSignOutAlt, FaUser, FaBuilding, FaChevronDown, FaCheck, FaBars } from "react-icons/fa"; import { FaSignOutAlt, FaUser, FaBuilding, FaChevronDown, FaCheck } from "react-icons/fa";
import api from '../config/api'; import api from '../config/api';
interface AccountNavProps { interface AccountNavProps {
accountName?: string | null; accountName?: string | null;
transactionName?: string | null; transactionName?: string | null;
showSideBar?: boolean;
setShowSideBar?: (show: boolean) => void;
isMobile?: boolean;
} }
interface Account { interface Account {
@ -42,11 +40,7 @@ const dispatchSessionStorageChange = (key: string, newValue: any) => {
})); }));
}; };
const CommonNav: React.FC<AccountNavProps> = ({ const CommonNav: React.FC<AccountNavProps> = () => {
showSideBar,
setShowSideBar,
isMobile = false
}) => {
const activeAccountId = JSON.parse(sessionStorage.getItem('activeAccountId') || 'null'); const activeAccountId = JSON.parse(sessionStorage.getItem('activeAccountId') || 'null');
const userDetails = JSON.parse(sessionStorage.getItem('userDetails') || '{}'); const userDetails = JSON.parse(sessionStorage.getItem('userDetails') || '{}');
console.log("activeAccountId", activeAccountId); console.log("activeAccountId", activeAccountId);
@ -118,6 +112,7 @@ const CommonNav: React.FC<AccountNavProps> = ({
dispatchSessionStorageChange('activeAccountId', account.accountId); dispatchSessionStorageChange('activeAccountId', account.accountId);
// Update user state // Update user state
setUser({ setUser({
id: account.userId, id: account.userId,
name: account.name, name: account.name,
@ -146,6 +141,7 @@ const CommonNav: React.FC<AccountNavProps> = ({
setOpen(false); setOpen(false);
}; };
const navigate = useNavigate(); const navigate = useNavigate();
const getUserDetails = async () => { const getUserDetails = async () => {
@ -177,6 +173,8 @@ const CommonNav: React.FC<AccountNavProps> = ({
console.log("Data is saved in sessionStorage"); console.log("Data is saved in sessionStorage");
} }
} catch (error) { } catch (error) {
console.error("Error fetching user details:", error); console.error("Error fetching user details:", error);
} }
@ -196,7 +194,17 @@ const CommonNav: React.FC<AccountNavProps> = ({
.split("/") .split("/")
.filter((x) => x && isNaN(Number(x))); .filter((x) => x && isNaN(Number(x)));
// Special case: if first segment is 's' and next is 'settings', remove 's'
const pathnames =
rawPathnames[0] === "s" && rawPathnames[1] === "settings"
? rawPathnames.slice(1)
: rawPathnames;
const labelMap: Record<string, string> = {
accounts: "Accounts",
transactions: "Transactions",
templates: "Templates"
};
useEffect(() => { useEffect(() => {
function handleClickOutside(event: MouseEvent) { function handleClickOutside(event: MouseEvent) {
@ -236,39 +244,11 @@ const CommonNav: React.FC<AccountNavProps> = ({
} }
}; };
const handleSidebarToggle = () => {
if (setShowSideBar) {
setShowSideBar(!showSideBar);
}
};
// Special case: if first segment is 's' and next is 'settings', remove 's'
const pathnames =
rawPathnames[0] === "s" && rawPathnames[1] === "settings"
? rawPathnames.slice(1)
: rawPathnames;
const labelMap: Record<string, string> = {
accounts: "Accounts",
transactions: "Transactions",
templates: "Templates",
};
const formatSegment = (segment: string) => const formatSegment = (segment: string) =>
segment segment
.replace(/[-_]/g, " ") .replace(/[-_]/g, " ")
.replace(/\b\w/g, (char) => char.toUpperCase()); .replace(/\b\w/g, (char) => char.toUpperCase());
// If URL has accounts → transactions, only keep "transactions"
let filteredPathnames = [...pathnames];
const accIndex = pathnames.indexOf("accounts");
const txnIndex = pathnames.indexOf("transactions");
if (accIndex !== -1 && txnIndex !== -1 && txnIndex > accIndex) {
// keep only "transactions" and everything after it
filteredPathnames = pathnames.slice(txnIndex);
}
const ShimmerRow = () => ( const ShimmerRow = () => (
<div className="animate-pulse px-4 py-3 border-b border-gray-100 last:border-b-0"> <div className="animate-pulse px-4 py-3 border-b border-gray-100 last:border-b-0">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
@ -283,51 +263,34 @@ 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"> <header className="w-full px-6 py-1.5 flex justify-between items-center bg-white border-b border-gray-200">
<div className="flex items-center space-x-4"> <nav className="text-md font-medium text-gray-800 capitalize flex items-center flex-wrap">
{/* Mobile Hamburger Menu - Only show on mobile */} {pathnames.length === 0 ? (
{isMobile && ( <span className="text-gray-900 font-semibold">Home</span>
<div className='flex items-center justify-start'> ) : (
<span className='text-[var(--primary)] text-xl text-center tracking-widest font-medium text-shadow-2xs'>SME</span> pathnames.map((segment, index) => {
<button const label = labelMap[segment] || formatSegment(segment);
onClick={handleSidebarToggle} const to = "/" + pathnames.slice(0, index + 1).join("/");
className="p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200 text-gray-600 hover:text-gray-900" const isLast = index === pathnames.length - 1;
aria-label="Toggle sidebar"
> return (
<FaBars className="text-lg" /> <span key={to} className="flex items-center">
</button> {index > 0 && <span className="mx-2 text-gray-400">{">"}</span>}
</div> {!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>
{/* Breadcrumb Navigation */}
<nav className="text-md font-medium text-gray-800 capitalize flex items-center flex-wrap">
{filteredPathnames.length === 0 ? (
<span className="text-gray-900 font-semibold">Home</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"> <div className="flex items-center space-x-2">
<div className="relative" ref={dropdownRef}> <div className="relative" ref={dropdownRef}>
@ -444,20 +407,6 @@ const CommonNav: React.FC<AccountNavProps> = ({
</div> </div>
</header> </header>
); );
};
// const ShimmerRow = () => (
// <div className="animate-pulse px-4 py-3 border-b border-gray-100 last:border-b-0">
// <div className="flex items-center space-x-3">
// <div className="w-8 h-8 bg-gray-200 rounded-full"></div>
// <div className="flex-1 space-y-2">
// <div className="h-4 bg-gray-200 rounded w-3/4"></div>
// <div className="h-3 bg-gray-200 rounded w-1/2"></div>
// </div>
// <div className="w-16 h-6 bg-gray-200 rounded"></div>
// </div>
// </div>
// );
// };
}
export default CommonNav; export default CommonNav;

2
src/components/accounts/Account.tsx
View File

@ -249,7 +249,7 @@ const Account = () => {
<Cards type="transactions" onOpenModal={handleOpenModal} cards={cards} <Cards type="transactions" onOpenModal={handleOpenModal} cards={cards}
isLoading={isLoading} /> isLoading={isLoading} />
<section className="my-4 mx-3"> <section className="my-4 mx-3">
<TransactionDataTable activeAccountId={activeAccountId}/> <TransactionDataTable />
</section> </section>
{isModalOpen && <AddInviteModal onClose={() => setIsModalOpen(false)} onInvite={handleInvite} inviteLoading={inviteLoading} {isModalOpen && <AddInviteModal onClose={() => setIsModalOpen(false)} onInvite={handleInvite} inviteLoading={inviteLoading}

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

@ -22,13 +22,16 @@ const statusColorMap = {
}; };
const TransactionDataTable = ({activeAccountId}) => { const TransactionDataTable = () => {
const navigate = useNavigate() const navigate = useNavigate()
const loaction = useLocation() const loaction = useLocation()
console.log("loaction", loaction.pathname); console.log("loaction", loaction.pathname);
const [currentEmailId, setCurrentEmailId] = useState<string | null>('null'); const [currentEmailId, setCurrentEmailId] = useState<string | null>('null');
const [selectedTransactions, setSelectedTransactions] = useState<number[]>([]); const [selectedTransactions, setSelectedTransactions] = useState<number[]>([]);
const [activeAccountId, setActiveAccountId] = useState<string | null>(
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
);
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const fetchTransactions = async () => { const fetchTransactions = async () => {

1
src/components/auth/LoginForm.tsx
View File

@ -108,7 +108,6 @@ function LoginForm() {
.then((res) => { .then((res) => {
console.log(res.status, "Response Status Line 42 LoginForm.tsx", res); console.log(res.status, "Response Status Line 42 LoginForm.tsx", res);
if (res.status === 200) { if (res.status === 200) {
toast.dismiss(); toast.dismiss();
// console.log('User Logined Successfully Line 45 LoginForm.tsx headerCookie:', res.headers.authorization); // console.log('User Logined Successfully Line 45 LoginForm.tsx headerCookie:', res.headers.authorization);
// Cookies.set("authorization", res.headers.authorization, { // Cookies.set("authorization", res.headers.authorization, {

162
src/components/contacts/ContactsFormModal.tsx
View File

@ -170,71 +170,113 @@ const ContactFormModal = ({
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm bg-black/30 bg-opacity-50 p-4 sm:p-6"> <div className="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm bg-opacity-50 bg-black/30">
<div className="bg-white rounded-md p-6 max-w-[700px] w-full sm:max-w-[700px] shadow-lg relative overflow-auto max-h-[90vh]"> <div className="bg-white rounded-md p-6 max-w-[700px] w-full shadow-lg relative">
<div className="space-y-4"> <div className="ms-2 space-y-2 max-w-[60vw]">
<h2 className="text-lg font-medium text-slate-500">{`${actionStatus} Contact`}</h2> <h2 className="text-lg font-medium text-slate-500">{`${actionStatus} Contact`}</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-3">
{[ {[
{ label: "First Name", field: "firstName" }, { label: "First Name", field: "firstName" },
{ label: "Last Name", field: "lastName" }, { label: "Last Name", field: "lastName" },
{ label: "Email", field: "email", fieldType: "email" }, { label: "Email", field: "email", fieldType: "email" },
{ label: "Title", field: "title" }, { label: "Title", field: "title" },
{ label: "Company", field: "company" }, { label: "Company", field: "company" },
{ label: "Website", field: "website", fieldType: "url" }, { label: "Website", field: "website", fieldType: "url" },
{ label: "Phone", field: "phone", fieldType: "tel" }, { label: "Phone", field: "phone", fieldType: "tel" },
].map(({ label, field, fieldType }) => ( ].map(({ label, field, fieldType }) => (
<div key={field} className="flex flex-col"> <div key={field} className="flex flex-col">
<label className="text-sm font-medium text-[var(--greyTextCol)] mb-1"> <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">
{label} {label}
</label> </label>
<input <input
type={fieldType ?? "text"} type={fieldType ? fieldType : "text"}
value={(formData[field as keyof ContactData] as string) || ""} value={(formData[field as keyof ContactData] as string) || ""}
onChange={(e) => onChange={(e) =>
handleChange(field as keyof ContactData, e.target.value) handleChange(field as keyof ContactData, e.target.value)
} }
required required={true}
className="px-3 py-1.5 border border-gray-400 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--primary)] text-sm" className="px-3 py-1.5 border border-gray-400 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--primary)] text-sm"
placeholder={`Enter ${label}`} placeholder={`Enter ${label}`}
/> />
{errors[field] && ( {errors[field] && (
<span className="text-sm text-red-500 mt-1">{errors[field]}</span> <span className="text-sm text-red-500 mt-1">
)} {errors[field]}
</span>
)}
</div>
))}
</div> </div>
))}
</div>
<div className="flex flex-col sm:flex-row justify-end gap-3 mt-4"> {/* <div>
<button <label className="text-sm font-medium text-[var(--greyTextCol)] mb-1">Phone Number</label>
type="button" <div className="space-y-2">
onClick={() => setShowModal((prev) => !prev)} {formData?.phones?.map((phone, index) => (
disabled={loading} <div key={index} className="flex flex-col gap-1">
className="bg-gray-300 px-5 py-1.5 rounded-md text-slate-700 text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer" <div className="flex items-center gap-2">
> <input
Cancel type="text"
</button> value={phone}
<button onChange={(e) => handlePhoneChange(index, e.target.value)}
type="button" className="flex-1 px-3 py-1.5 border border-gray-400 rounded-md focus:outline-none focus:ring-1 focus:ring-[var(--primary)] text-sm"
onClick={handleSubmit} maxLength={15}
disabled={loading} placeholder='Enter Phone Numbers'
className="bg-gradient-to-br from-[var(--primary)] to-blue-600 px-5 py-1.5 rounded-md text-white text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer" />
> {formData.phones.length > 1 && (
{loading ? ( <button
<> type="button"
<FaSpinner className="animate-spin inline-block mr-2" /> onClick={() => removePhoneField(index)}
SAVING... className="text-xs text-red-500 hover:underline"
</> >
) : ( Remove
`${actionStatus?.toUpperCase() || "SAVE"} CONTACT` </button>
)} )}
</button> </div>
{errors[`phones_${index}`] && (
<span className="text-sm text-red-500">{errors[`phones_${index}`]}</span>
)}
</div>
))}
<button
type="button"
onClick={addPhoneField}
className="text-sm text-blue-500 hover:underline mt-1 cursor-pointer"
>
+ Add another phone
</button>
</div>
</div> */}
<div className="flex justify-end">
<button
type="button"
onClick={() => setShowModal((prev) => !prev)}
disabled={loading}
className="bg-gray-300 px-5 py-1.5 rounded-md text-slate-700 text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer me-3"
>
{" "}
Cancel
</button>
<button
type="button"
onClick={handleSubmit}
disabled={loading}
className="bg-gradient-to-br from-[var(--primary)] to-blue-600 px-5 py-1.5 rounded-md text-white text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
>
{loading ? (
<>
<FaSpinner className="animate-spin inline-block mr-2" />
SAVING...
</>
) : (
`${actionStatus?.toUpperCase() || "SAVE"} CONTACT`
)}
</button>
</div>
</div>
</div> </div>
</div> </div>
</div>
</div>
); );
}; };

105
src/components/dashboard/Dashboard.tsx
View File

@ -1,4 +1,3 @@
// Dashboard.jsx - Updated version
import React, { useEffect, useLayoutEffect } from 'react' import React, { useEffect, useLayoutEffect } from 'react'
import SideBar from './SideBar' import SideBar from './SideBar'
import { Outlet, useNavigate } from 'react-router-dom' import { Outlet, useNavigate } from 'react-router-dom'
@ -23,7 +22,6 @@ import CommonNav from '../CommonNav'
function Dashboard() { function Dashboard() {
const [showSideBar, setShowSideBar] = React.useState(true) const [showSideBar, setShowSideBar] = React.useState(true)
const [showConfetti, setShowConfetti] = React.useState(false) const [showConfetti, setShowConfetti] = React.useState(false)
const [isMobile, setIsMobile] = React.useState(false)
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -76,6 +74,8 @@ function Dashboard() {
} }
}, []) }, [])
useEffect(() => { useEffect(() => {
if (transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED) return; if (transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_SEND_SUCCESS || transactionStatus === TRANSACTION_STATUS_ENUMS.TRANSACTION_INITIATED) return;
@ -102,55 +102,35 @@ function Dashboard() {
dispatch(hideLoader()); dispatch(hideLoader());
}, [documentSignType]) }, [documentSignType])
useEffect(() => {
if (showConfetti) {
const duration = 3000;
const end = Date.now() + duration;
const interval = setInterval(() => { useEffect(() => {
if (Date.now() > end) { if (showConfetti) {
clearInterval(interval); const duration = 3000;
return; const end = Date.now() + duration;
}
confetti({ const interval = setInterval(() => {
particleCount: 80, // more particles if (Date.now() > end) {
angle: Math.random() * 360, // fire in random direction clearInterval(interval);
spread: 220, // wider spread return;
startVelocity: 15, // more power }
scalar: 1.2, // bigger pieces (default is 1)
origin: {
x: Math.random(),
y: Math.random() * 0.6,
},
zIndex: 9999,
});
}, 350); // fire every 150ms
}
}, [showConfetti]);
useEffect(() => { confetti({
// Function to handle window resize particleCount: 80, // more particles
const handleResize = () => { angle: Math.random() * 360, // fire in random direction
const mobile = window.innerWidth <= 768; spread: 220, // wider spread
setIsMobile(mobile); startVelocity: 15, // more power
scalar: 1.2, // bigger pieces (default is 1)
if (mobile) { origin: {
setShowSideBar(false); // hide sidebar on mobile by default x: Math.random(),
} else { y: Math.random() * 0.6,
setShowSideBar(true); // show sidebar on desktop },
zIndex: 9999,
});
}, 350); // fire every 150ms
} }
}; }, [showConfetti]);
// Set sidebar visibility on mount
handleResize();
// Add event listener
window.addEventListener('resize', handleResize);
// Cleanup listener on unmount
return () => window.removeEventListener('resize', handleResize);
}, []);
return ( return (
<> <>
@ -185,44 +165,19 @@ function Dashboard() {
{ {
user?.authorized && user?.authorized &&
<div className={`relative`}> <div className={`relative`}>
{/* Mobile Overlay when sidebar is open */} {/* Complet DashBoard Back Side SideBar */}
{isMobile && showSideBar && (
<div
className="fixed inset-0 bg-black/30 bg-opacity-50 z-40"
onClick={() => setShowSideBar(false)}
/>
)}
{/* Complete Dashboard Back Side SideBar */}
<div className={`relative w-full h-screen overflow-hidden bg-[var(--dashBoardBg)] ${(globalLoader.isLoading || globalModalIsOpen) ? 'pointer-events-none' : ''}`}> <div className={`relative w-full h-screen overflow-hidden bg-[var(--dashBoardBg)] ${(globalLoader.isLoading || globalModalIsOpen) ? 'pointer-events-none' : ''}`}>
<SideBar <SideBar showSideBar={showSideBar} setShowSideBar={setShowSideBar} />
showSideBar={showSideBar}
setShowSideBar={setShowSideBar}
isMobile={isMobile}
/>
{/* On Top Main Content - START */} {/* On Top Main Content - START */}
<div <div className={`overflow-y-auto absolute no-scrollbar ${showSideBar ? 'w-[calc(100%-250px)]' : 'w-[calc(100%-60px)]'} h-full right-0 bottom-0 overflow-hidden bg-[var(--mainViewBg)] transition-all duration-300`}>
className={`overflow-y-auto absolute no-scrollbar h-full right-0 bottom-0 overflow-hidden bg-[var(--mainViewBg)]`}
style={{
width: !isMobile
? (showSideBar ? 'calc(100% - 250px)' : 'calc(100% - 60px)')
: '100%', // Full width on mobile
transition: 'width 0.6s ease'
}}
>
{/* Main Content */} {/* Main Content */}
<div> <div className=''>
<CommonNav <CommonNav />
showSideBar={showSideBar}
setShowSideBar={setShowSideBar}
isMobile={isMobile}
/>
<Outlet /> <Outlet />
</div> </div>
</div> </div>
{/* On Top Main Content - END */} {/* On Top Main Content - END */}
</div> </div>

83
src/components/dashboard/SendForSign.tsx
View File

@ -77,97 +77,52 @@ const SendForSign: React.FC<Props> = ({ showSideBar }) => {
// } // }
return ( return (
<div <div
id='send-for-sign-self-sign-btn' id='send-for-sign-self-sign-btn'
className='relative max-h-max pb-3' className='relative max-h-max pb-3'
tabIndex={0} tabIndex={0}
ref={dropDownRef} ref={dropDownRef}
onBlur={() => setSendForSignDropdown(false)} onBlur={() => setSendForSignDropdown(false)}
> >
{/* <div <div
className={`flex justify-between items-center gap-2 cursor-pointer bg-[var(--sidebarDropDownBg)] rounded text-[var(--sendForSignTextCol)] ${showSideBar ? "" : "pt-[0.4rem] pr-[0.6rem] pb-[0.4rem] pl-[0.2rem]"}`}> className={`flex justify-between items-center gap-2 cursor-pointer bg-[var(--sidebarDropDownBg)] rounded text-[var(--sendForSignTextCol)] ${showSideBar ? "" : "pt-[0.4rem] pr-[0.6rem] pb-[0.4rem] pl-[0.2rem]"}`}>
<div <div
onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)} onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}
className={`w-full`}> className={`w-full`}>
{ {
showSideBar ? showSideBar ?
<p <p
className='text-center text-sm'>Send for signature</p> className='text-center text-sm'>Send for signature</p>
: :
<IoIosSend className={`pl-2 text-3xl`} /> <IoIosSend className={`pl-2 text-3xl`} />
} }
</div> </div>
{showSideBar && {showSideBar &&
<p <p
className=' border-[var(--sendForSignTextCol)] pe-2 py-2'> className=' border-[var(--sendForSignTextCol)] px-2 py-2'>
<IoMdArrowDropdown <IoMdArrowDropdown
onClick={() => setSendForSignDropdown(!sendForSignDropdown)} onClick={() => setSendForSignDropdown(!sendForSignDropdown)}
className={`text-2xl ${sendForSignDropdown ? 'rotate-180' : ''} transition-all duration-150`} /> className={`text-2xl ${sendForSignDropdown ? 'rotate-180' : ''} transition-all duration-150`} />
</p>} </p>}
</div> */}
<div
className={`flex items-center gap-0.5 cursor-pointer text-[var(--sendForSignTextCol)]`}
>
<div
onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}
className={`
flex items-center justify-center
bg-[var(--sidebarDropDownBg)]
text-center
px-2 py-2.5
overflow-hidden
transition-all duration-300 ease-in-out w-full
${showSideBar ? "rounded-l" : "rounded"}
`}
style={{ whiteSpace: "nowrap" }}
>
{showSideBar ? (
<p className="text-sm select-none">Send for signature</p>
) : (
<IoIosSend className="text-2xl" />
)}
</div>
{showSideBar && (
<div
className="rounded-r btn px-2 py-2 bg-[var(--sidebarDropDownBg)] transition-all duration-300 ease-in-out flex items-center justify-center"
style={{ opacity: showSideBar ? 1 : 0 }}
>
<IoMdArrowDropdown
onClick={() => setSendForSignDropdown(!sendForSignDropdown)}
className={`text-2xl transition-transform duration-150 ${sendForSignDropdown ? "rotate-180" : ""
}`}
/>
</div>
)}
</div> </div>
{/* Drop Down Box */} {/* Drop Down Box */}
{ {
sendForSignDropdown && sendForSignDropdown &&
<div className={`w-[220px] sm:w-[260px] lg:w-[250px] rounded absolute z-40 bg-[var(--sendForSignDropDownBg)] shadow-lg top-[52px] text-left outline-none`}> <div className={`w-[300px] rounded absolute z-40 bg-[var(--sendForSignDropDownBg)] shadow-lg top-[54px] text-left outline-none`}>
<div <div className='py-3 px-8 leading-6 rounded-t-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer'
className='py-2 px-6 leading-5 rounded-t-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer' onClick={() => handleStartSectionClick(SignTypeEnum.selfSign)}>
onClick={() => handleStartSectionClick(SignTypeEnum.selfSign)} <p>Self Sign</p>
> <p className='text-[var(--greyTextCol)] text-sm'>You're the only signer.</p>
<p className='text-sm sm:text-base'>Self Sign</p>
<p className='text-[var(--greyTextCol)] text-xs sm:text-sm'>You're the only signer.</p>
</div> </div>
<div className='w-full h-[1px] opacity-30 bg-[var(--greyTextCol)]'></div> <div className='w-full h-[1px] opacity-30 bg-[var(--greyTextCol)]'></div>
<div <div className='py-3 px-8 leading-6 rounded-b-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer'
className='py-2 px-6 leading-5 rounded-b-sm hover:bg-[var(--sendForSignDropDownHover)] cursor-pointer' onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)}>
onClick={() => handleStartSectionClick(SignTypeEnum.multipleSign)} <p>Send for Sign</p>
> <p className='text-[var(--greyTextCol)] text-sm'>You and other need to sign.</p>
<p className='text-sm sm:text-base'>Send for Sign</p>
<p className='text-[var(--greyTextCol)] text-xs sm:text-sm'>You and other need to sign.</p>
</div> </div>
</div> </div>
} }
</div> </div>
) )
} }

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

@ -1,4 +1,3 @@
// SideBar.jsx - Updated version
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import NavLink from './NavLink'; import NavLink from './NavLink';
@ -17,7 +16,6 @@ import logoSME from '../../assets/SMELogo.png'
type SideBarProps = { type SideBarProps = {
showSideBar: boolean; showSideBar: boolean;
setShowSideBar: React.Dispatch<React.SetStateAction<boolean>>; setShowSideBar: React.Dispatch<React.SetStateAction<boolean>>;
isMobile?: boolean;
}; };
type MenuPathMap = { type MenuPathMap = {
@ -32,7 +30,7 @@ const menuPathMap: MenuPathMap = {
'/contacts': 'Contacts' '/contacts': 'Contacts'
}; };
const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar, isMobile = false }) => { const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
const location = useLocation(); const location = useLocation();
const [showLogoutModal, setShowLogoutModal] = useState(false); const [showLogoutModal, setShowLogoutModal] = useState(false);
@ -56,17 +54,7 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar, isMobile
return ( return (
<> <>
{/* Side Bar */} {/* Side Bar */}
<div className={` <div className={`relative h-screen ${showSideBar ? 'w-[250px]' : 'w-[60px]'} transition-all duration-300 bg-[var(--sidebarBg)] shadow-md`}>
${isMobile ? 'fixed left-0 top-0 z-50' : 'relative'}
h-screen
${isMobile
? (showSideBar ? 'w-[250px] translate-x-0' : 'hidden -translate-x-full')
: (showSideBar ? 'w-[250px]' : 'w-[60px]')
}
transition-all duration-600
bg-[var(--sidebarBg)]
shadow-md
`}>
{/* Menu */} {/* Menu */}
<div className={`absolute top-0 ${showSideBar ? 'p-4' : 'py-4'} w-full max-h-max ${showSideBar ? '' : 'text-center'}`}> <div className={`absolute top-0 ${showSideBar ? 'p-4' : 'py-4'} w-full max-h-max ${showSideBar ? '' : 'text-center'}`}>
<h1 className='w-full text-lg text-center tracking-widest font-medium text-gray-800'> <h1 className='w-full text-lg text-center tracking-widest font-medium text-gray-800'>
@ -88,26 +76,10 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar, isMobile
{/* SideBar Toggle Button */} {/* SideBar Toggle Button */}
<div <div
onClick={() => setShowSideBar(!showSideBar)} onClick={() => setShowSideBar(!showSideBar)}
className={` className='absolute top-[100%] translate-y-[-100%] right-0 bg-[var(--dashBoardBg)] p-2 rounded-tl-sm rounded-bl-sm cursor-pointer transition-colors'
absolute top-[95%] translate-y-[-60%]
${isMobile
? (showSideBar ? 'right-2' : 'right-2')
: 'right-0 top-[100%] translate-y-[-100%]'
}
bg-[var(--dashBoardBg)] p-1
${isMobile
? 'rounded-md'
: (showSideBar ? 'rounded-tl-sm rounded-bl-sm' : 'rounded-tl-sm rounded-bl-sm')
}
cursor-pointer transition-colors
`}
> >
{!isMobile && ( <div className='absolute top-[-14px] right-0 w-[14px] h-[14px] rounded-full shadow-[5px_5px_0px_0px_rgba(255,255,255,1)]'></div>
<> <div className='absolute bottom-[-14px] right-0 w-[14px] h-[14px] rounded-full shadow-[5px_-5px_0px_0px_rgba(255,255,255,1)]'></div>
<div className='absolute top-[-14px] right-0 w-[14px] h-[14px] rounded-full shadow-[5px_5px_0px_0px_rgba(255,255,255,1)]'></div>
<div className='absolute bottom-[-14px] right-0 w-[14px] h-[14px] rounded-full shadow-[5px_-5px_0px_0px_rgba(255,255,255,1)]'></div>
</>
)}
{showSideBar ? ( {showSideBar ? (
<BsLayoutSidebarInsetReverse className='fill-[var(--primary)] hover:text-[var(--primary)] transition-all text-2xl' /> <BsLayoutSidebarInsetReverse className='fill-[var(--primary)] hover:text-[var(--primary)] transition-all text-2xl' />
@ -141,7 +113,7 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar, isMobile
{/* Logout Confirmation Modal */} {/* Logout Confirmation Modal */}
{showLogoutModal && ( {showLogoutModal && (
<div className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50"> <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"> <div className="bg-white rounded-lg shadow-xl p-6 w-80">
<h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Logout</h3> <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> <p className="text-gray-600 mb-6">Are you sure you want to log out?</p>
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">

34
src/components/home/StartSection.tsx
View File

@ -47,9 +47,6 @@ const cards = [
const StartSection = () => { const StartSection = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useDispatch<AppDispatch>() const dispatch = useDispatch<AppDispatch>()
const [activeAccountId, setActiveAccountId] = useState<string | null>(
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
);
const user = useSelector((state: RootState) => state.user); const user = useSelector((state: RootState) => state.user);
if (!user.account || user.account === null) { if (!user.account || user.account === null) {
@ -84,35 +81,6 @@ const StartSection = () => {
// } // }
// }, []) // }, [])
// Listen for sessionStorage changes
useEffect(() => {
const handleStorageChange = (e: StorageEvent) => {
if (e.key === 'activeAccountId') {
const newActiveAccountId = e.newValue ? JSON.parse(e.newValue) : null;
setActiveAccountId(newActiveAccountId);
}
};
// Listen for storage events (works for changes from other tabs)
window.addEventListener('storage', handleStorageChange);
// Custom event listener for same-tab changes
const handleCustomStorageChange = (e: CustomEvent) => {
if (e.detail.key === 'activeAccountId') {
setActiveAccountId(e.detail.newValue);
}
};
window.addEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
return () => {
window.removeEventListener('storage', handleStorageChange);
window.removeEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
};
}, []);
return ( return (
<section className="px-3 py-2 w-full mt-2"> <section className="px-3 py-2 w-full mt-2">
<h2 className="text-sm font-semibold text-gray-800 px-1 pb-2"> <h2 className="text-sm font-semibold text-gray-800 px-1 pb-2">
@ -127,7 +95,7 @@ const StartSection = () => {
{/* Recent Data Section */} {/* Recent Data Section */}
<div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 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"> <section className="w-full">
<TransactionDataTable activeAccountId={activeAccountId}/> <TransactionDataTable />
</section> </section>
<section className="w-full"> <section className="w-full">
<TemplateTable /> <TemplateTable />

6
src/components/process/CompletionScreen/DocumentCompletionScreen.tsx
View File

@ -47,8 +47,8 @@ type Signer = {
const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => { const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
return ( return (
// <div className="bg-white/60 rounded-md shadow-sm border border-gray-100 "> // <div className="bg-white/60 rounded-md shadow-sm border border-gray-100 ">
<div className="p-2 "> <div className="p-6 ">
<div className="flex items-center justify-evenly mb-1"> <div className="flex items-center justify-evenly mb-2">
<h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2 "> <h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2 ">
<FaUsers className="text-blue-600" /> <FaUsers className="text-blue-600" />
Signature Status Signature Status
@ -58,7 +58,7 @@ const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
</span> </span>
</div> </div>
<div className="space-y-3 max-h-[24vh] overflow-y-auto no-scrollbar"> <div className="space-y-3 max-h-[20vh] overflow-y-auto no-scrollbar">
{signers.map((signer) => ( {signers.map((signer) => (
<div key={signer.id} className="text-xs mx-auto flex items-center gap-4 p-3 w-[70vh] bg-gradient-to-br from-gray-50 to-blue-100 rounded-lg"> <div key={signer.id} className="text-xs mx-auto flex items-center gap-4 p-3 w-[70vh] bg-gradient-to-br from-gray-50 to-blue-100 rounded-lg">
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-medium"> <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-medium">

2
src/components/process/processStepOne/SelfSignWarnModal.tsx
View File

@ -9,7 +9,7 @@ const SelfSignWarnModal = ({ setShowSelfSignWarnModal }: PropsType) => {
const navigate = useNavigate() const navigate = useNavigate()
return ( return (
<div className="fixed inset-0 backdrop-blur-sm bg-black/30 flex items-center justify-center z-50"> <div className="fixed inset-0 backdrop-blur-sm flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-xl p-6 w-100"> <div className="bg-white rounded-lg shadow-xl p-6 w-100">
<h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Self Sign</h3> <h3 className="text-lg font-medium text-gray-800 mb-4">Confirm Self Sign</h3>
<p className="text-gray-600 mb-6"> <p className="text-gray-600 mb-6">

48
src/components/setting/Setting.tsx
View File

@ -9,7 +9,7 @@ import AsideSection from "./AsideSection";
import Signature from "./Signature/Signature"; import Signature from "./Signature/Signature";
import { Bounce, toast } from "react-toastify"; import { Bounce, toast } from "react-toastify";
import AccountNav from "../accounts/AccountNav"; import AccountNav from "../accounts/AccountNav";
import ContactForm, { ContactData } from "./ContactForm"; import ContactForm , {ContactData} from "./ContactForm";
// Define the shape of state object // Define the shape of state object
interface Account { interface Account {
@ -392,7 +392,7 @@ const Setting = () => {
const handleContactSubmit = async (data: ContactData) => { const handleContactSubmit = async (data: ContactData) => {
try { try {
setCreateAndInviteLoader(true); setCreateAndInviteLoader(true);
const res = await api.post(`/api/accounts/${activeAccountId}/contacts`, [data]); const res = await api.post(`/api/accounts/${activeAccountId}/contacts`, [data]);
if (res.status === 200) { if (res.status === 200) {
toast.success('Contact created successfully!', { toast.success('Contact created successfully!', {
position: "top-center", position: "top-center",
@ -415,16 +415,16 @@ const Setting = () => {
{/* <SettingNav /> */} {/* <SettingNav /> */}
{/* <AccountNav/> */} {/* <AccountNav/> */}
<div className="bg-[#f9fafa] h-[calc(90vh-20px)] flex flex-col mt-2"> <div className="bg-[#f9fafa] h-[calc(90vh-20px)] flex flex-col mt-2">
{/* Tabs */} {/* Main Navigation Tabs */}
<div className="sticky top-0 z-10 bg-white border-b border-gray-200 px-4 md:px-6 lg:px-8 pt-4"> <div className="sticky top-0 z-10 bg-white border-b border-gray-200 px-8 pt-5">
<div className="flex flex-wrap gap-4 md:gap-6"> <div className="flex gap-6">
{tabs.map((tab) => {tabs.map((tab) =>
tab.type === page1 && ( tab.type === page1 && (
<button <button
key={tab.id} key={tab.id}
onClick={() => handleMainTabClick(tab.id)} onClick={() => handleMainTabClick(tab.id)}
className={`cursor-pointer relative pb-3 text-sm font-medium transition-all duration-200 className={`cursor-pointer relative pb-3 text-sm font-medium transition-all duration-200
${activeTab === tab.id ${activeTab === tab.id
? "text-blue-600 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-blue-600" ? "text-blue-600 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-blue-600"
: "text-gray-600 hover:text-blue-500" : "text-gray-600 hover:text-blue-500"
}`} }`}
@ -436,12 +436,11 @@ const Setting = () => {
</div> </div>
</div> </div>
{/* Responsive Layout */} {/* Content with Aside Navigation */}
<div className="flex-1 min-h-0 flex flex-col lg:flex-row px-4 md:px-6 lg:px-8 mt-3 gap-6"> <div className="flex mt-3 px-8 flex-1 min-h-0">
{/* Fixed Aside Navigation - Shows subsections of active tab */}
{/* Sidebar (hidden on small, shown on lg) */} {activeTab === 'userProfile' &&
{activeTab === 'userProfile' && ( <section className="flex-shrink-0 mr-6 w-50 relative">
<section className="hidden lg:block flex-shrink-0 w-56">
<div className="sticky top-6 z-20"> <div className="sticky top-6 z-20">
<AsideSection <AsideSection
activeSubSection={activeSubSection} activeSubSection={activeSubSection}
@ -451,28 +450,8 @@ const Setting = () => {
/> />
</div> </div>
</section> </section>
)} }
{/* Scrollable Main Content */}
{/* Sidebar as horizontal nav (only on mobile) */}
{activeTab === 'userProfile' && (
<section className="lg:hidden mb-4">
<div className="flex overflow-x-auto no-scrollbar gap-4 border-b pb-2">
{getSubSections(activeTab).map((sub) => (
<button
key={sub.id}
onClick={() => handleSubSectionClick(sub.id)}
className={`whitespace-nowrap text-sm font-medium px-2 py-1 rounded-md
${activeSubSection === sub.id ? "bg-blue-100 text-blue-600" : "text-gray-600"}
`}
>
{sub.label}
</button>
))}
</div>
</section>
)}
{/* Main Content */}
<div <div
ref={scrollContainerRef} ref={scrollContainerRef}
className="flex-1 min-w-0 overflow-y-auto no-scrollbar" className="flex-1 min-w-0 overflow-y-auto no-scrollbar"
@ -481,7 +460,6 @@ const Setting = () => {
</div> </div>
</div> </div>
</div> </div>
</> </>
) )
} }

441
src/components/setting/Signature/AddSignatureModal.tsx
View File

@ -55,7 +55,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
getAllSignatures, getAllSignatures,
editingSignature editingSignature
}) => { }) => {
console.log("editingSignature", editingSignature)
const [activeTab, setActiveTab] = useState<'SELECT' | 'DRAW' | 'UPLOAD'>('SELECT'); const [activeTab, setActiveTab] = useState<'SELECT' | 'DRAW' | 'UPLOAD'>('SELECT');
const [fullName, setFullName] = useState(''); const [fullName, setFullName] = useState('');
const [initials, setInitials] = useState(''); const [initials, setInitials] = useState('');
@ -82,8 +81,6 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" } signatureOptions.length > 0 ? { id: signatureOptions[0].id, style: signatureOptions[0].style } : { id: 0, style: "" }
); );
console.log("selectedSignature", selectedSignature)
// Store the actual file // Store the actual file
const [file1, setFile1] = useState<File | null>(null); const [file1, setFile1] = useState<File | null>(null);
const [file2, setFile2] = useState<File | null>(null); const [file2, setFile2] = useState<File | null>(null);
@ -110,9 +107,10 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
// Navigation items // Navigation items
const navigationItems = [ const navigationItems = [
{ id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-3 h-3 md:w-4 md:h-4" /> }, { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
{ id: 'DRAW', label: 'DRAW', icon: <AiOutlineEdit className="w-3 h-3 md:w-4 md:h-4" /> }, { id: 'DRAW', label: 'DRAW', icon: <AiOutlineEdit className="w-5 h-5" /> },
{ id: 'UPLOAD', label: 'UPLOAD', icon: <AiOutlineUpload className="w-3 h-3 md:w-4 md:h-4" /> }, { id: 'UPLOAD', label: 'UPLOAD', icon: <AiOutlineUpload className="w-5 h-5" /> },
// { id: 'SELECT', label: 'SELECT', icon: <GrCheckboxSelected className="w-4 h-4" /> },
]; ];
// Initialize form with editing signature data // Initialize form with editing signature data
@ -195,43 +193,25 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
const handleSubmit = async () => { const handleSubmit = async () => {
setIsSubmitting(true); setIsSubmitting(true);
// Only validate for DRAW and UPLOAD if (activeTab === 'DRAW' || activeTab === 'UPLOAD') {
if ((activeTab === 'DRAW' || activeTab === 'UPLOAD') && if (!signatures.fullSignature || !signatures.initials) {
(!signatures.fullSignature || !signatures.initials)) { alert('Please provide both signature and initials');
// alert('Please provide both signature and initials'); setIsSubmitting(false);
toast.error('Please provide both signature and initials in draw and upload case', { return;
position: "top-center", }
autoClose: 2000,
hideProgressBar: false,
closeOnClick: false,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
transition: Bounce,
});
setIsSubmitting(false);
return;
} }
try { try {
// Base payload
const payload = { const payload = {
signatureType: activeTab, signatureType: activeTab,
signatureBase64: signatures.fullSignature,
initialsBase64: signatures.initials,
firstName: fullName.split(' ')[0] || user.firstName, firstName: fullName.split(' ')[0] || user.firstName,
lastName: fullName.split(' ')[1] || user.lastName, lastName: fullName.split(' ')[1] || user.lastName,
font: selectedSignature.style, font: selectedSignature.style,
default: checked default: checked
}; };
// Only add signatures if not SELECT
if (activeTab !== 'SELECT') {
payload.signatureBase64 = signatures.fullSignature;
payload.initialsBase64 = signatures.initials;
}
console.log("payload214", payload);
let res; let res;
if (isEditMode && editingSignature) { if (isEditMode && editingSignature) {
// Update existing signature // Update existing signature
@ -293,57 +273,32 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
} }
}; };
// Fixed renderContent function for SELECT case with proper radio button styling
const renderContent = () => { const renderContent = () => {
switch (activeTab) { switch (activeTab) {
case 'SELECT': case 'SELECT':
return ( 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>
<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) => ( {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 <input
type="radio" type="radio"
id={`signature-${option.id}`} id={`signature-${option.id}`}
name="signature" name="signature"
checked={selectedSignature.id === option.id} checked={selectedSignature.id === option.id}
onChange={() => setSelectedSignature({ id: option.id, style: option.style })} 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 === 'script' ? 'font-mono' :
option.style === 'elegant' ? 'font-serif' : option.style === 'elegant' ? 'font-serif' :
option.style === 'modern' ? 'font-sans tracking-wide' : option.style === 'modern' ? 'font-sans tracking-wide' :
@ -351,13 +306,13 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
}`}> }`}>
{fullName || option.name} {fullName || option.name}
</div> </div>
<div className="text-xs text-gray-400 mt-1 truncate"> <div className="text-xs text-gray-400 mt-2">
dca3e646-62cd-4cc... dca3e646-62cd-4cc...
</div> </div>
</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 === 'script' ? 'font-mono' :
option.style === 'elegant' ? 'font-serif' : option.style === 'elegant' ? 'font-serif' :
option.style === 'modern' ? 'font-sans tracking-wide' : option.style === 'modern' ? 'font-sans tracking-wide' :
@ -376,73 +331,79 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
case 'DRAW': case 'DRAW':
return ( return (
<div className="h-full"> <DrawSignatureCanvas
<DrawSignatureCanvas onSignatureChange={handleSignatureChange}
onSignatureChange={handleSignatureChange} initialSignatures={isEditMode ? signatures : undefined}
initialSignatures={isEditMode ? signatures : undefined} />
/>
</div>
); );
case 'UPLOAD': case 'UPLOAD':
return ( return (
<div className="h-full flex flex-col"> <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>
<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>
</div> </div>
</div> </div>
); );
// 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">Select Signature</h2>
// </div>
// </div>
// );
default: default:
return null; return null;
} }
@ -469,147 +430,25 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
getUserDetails(); getUserDetails();
}, []); }, []);
return ( 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 </h3>
{isEditMode ? 'Edit Signature' : '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> </div>
</div> </div>
{/* Checkbox - Fixed */} {/* Form Inputs */}
<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"> <div className="px-6 py-2.5 border-b border-gray-200">
<label className="inline-flex items-center cursor-pointer text-xs md:text-sm hover:text-gray-900 transition-colors"> <div className="space-y-2">
<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={() => setShowAddSignature?.(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>{isEditMode ? 'UPDATING...' : 'CREATING...'}</span>
</>
) : (
<span>{isEditMode ? 'UPDATE SIGNATURE' : '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-base lg:text-lg font-semibold text-gray-900">
{isEditMode ? 'Edit Signature' : 'Add Signature'}
</h3>
<p className="text-sm text-gray-500">
{isEditMode ? 'Update your digital signature' : '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> <div>
<label className="block text-sm font-medium text-gray-700 mb-2"> <label className="block text-sm font-medium text-gray-700 mb-2">
Full Name Full Name
@ -619,9 +458,10 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
value={fullName} value={fullName}
onChange={(e) => setFullName(e.target.value)} onChange={(e) => setFullName(e.target.value)}
placeholder="Enter full name" 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" 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> <div>
<label className="block text-sm font-medium text-gray-700 mb-2"> <label className="block text-sm font-medium text-gray-700 mb-2">
Initials Initials
@ -631,94 +471,109 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
value={initials} value={initials}
onChange={(e) => setInitials(e.target.value)} onChange={(e) => setInitials(e.target.value)}
placeholder="Enter initials" 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" 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> </div>
</div> </div>
{/* Navigation Menu - Fixed */} {/* Navigation Menu */}
<div className="px-4 lg:px-6 py-4 flex-shrink-0"> <div className="flex-1 px-6 py-2.5">
<nav className="flex flex-col gap-2"> <nav className="space-y-2">
{navigationItems.map((item) => ( {navigationItems.map((item) => (
<button <button
key={item.id} key={item.id}
onClick={() => setActiveTab(item.id as 'SELECT' | 'DRAW' | 'UPLOAD')} 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 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 shadow-sm' ? 'bg-blue-50 text-blue-700 border border-blue-200'
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
}`} }`}
> >
<span className={activeTab === item.id ? 'text-blue-600' : 'text-gray-400'}> <span className={activeTab === item.id ? 'text-blue-600' : 'text-gray-400'}>
{item.icon} {item.icon}
</span> </span>
<span>{item.label}</span> <span>{item.label}</span>
</button> </button>
))} ))}
</nav> </nav>
</div> </div>
{/* Spacer for desktop */}
<div className="flex-1"></div>
</div> </div>
{/* Main Content Area */} {/* Main Content Area */}
<div className="hidden flex-1 md:flex flex-col min-h-0"> <div className="flex-1 flex flex-col ">
{/* Content - Scrollable */} {/* Header with close button */}
<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 */} {/* Content */}
<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"> <div className="flex-1 py-5 px-5 overflow-hidden ">
<label className="inline-flex items-center cursor-pointer text-xs md:text-sm hover:text-gray-900 transition-colors"> {/* <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>
<div className="text-right px-6 py-1 text-white">
<label className="inline-flex items-center cursor-pointer group">
<input <input
type="checkbox" type="checkbox"
checked={checked} checked={checked}
onChange={toggleCheckbox} onChange={toggleCheckbox}
className="sr-only" className="sr-only"
/> />
{/* Custom checkbox UI */}
<div <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' className={`w-4 h-4 border rounded transition-all duration-300 flex items-center justify-center
}`} ${checked ? 'bg-[var(--modalSubmitBG)] border-[var(--modalSubmitBG)] scale-110' : 'bg-white border-gray-400'}
`}
> >
{checked && <FiCheck className="text-white text-xs" />} {checked && (
<FiCheck className="text-white text-sm transform scale-100 transition-transform duration-300" />
)}
</div> </div>
<span>Signature will be used by default</span>
<p className="text-sm text-gray-700 opacity-80 ms-1">
Signature will be used by default.
</p>
</label> </label>
{/* Caption text below */}
</div> </div>
{/* Footer Buttons - Fixed */} {/* Footer Buttons in Main Area */}
<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"> <div className="p-4 border-t border-gray-200 flex justify-end gap-3">
<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 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" 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={() => setShowAddSignature?.(false)} onClick={() => setShowAddSignature?.(false)}
disabled={isSubmitting} disabled={isSubmitting}
> >
CANCEL CANCEL
</button> </button>
<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" className="cursor-pointer px-4 py-2 text-sm font-medium rounded-md bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white hover:bg-[var(--modalSubmitBGHover)] transition-colors flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
onClick={handleSubmit} onClick={handleSubmit}
disabled={isSubmitting} disabled={isSubmitting}
> >
{isSubmitting ? ( {isSubmitting ? (
<> <>
<FaSpinner className="animate-spin w-3 h-3 md:w-4 md:h-4" /> <FaSpinner className="animate-spin" />
<span>{isEditMode ? 'UPDATING...' : 'CREATING...'}</span> {isEditMode ? 'UPDATING...' : 'CREATING...'}
</> </>
) : ( ) : (
<span>{isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE'}</span> isEditMode ? 'UPDATE SIGNATURE' : 'CREATE SIGNATURE'
)} )}
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); );
}; };
export default AddSignatureModal; export default AddSignatureModal;

22
src/components/setting/Signature/DrawSignatureCanvas.tsx
View File

@ -224,20 +224,20 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
return ( return (
<div className="h-full flex flex-col"> <div className="h-full flex flex-col">
<div className="mb-2 lg:mb-6"> <div className="mb-6">
<h2 className="text-lg sm:text-xl lg:text-2xl font-semibold text-gray-900 mb-1 sm:mb-2 ">Draw Signature</h2> <h2 className="text-xl font-semibold text-gray-900 mb-2">Draw Signature</h2>
<p className="text-xs sm:text-sm text-gray-600 hidden sm:block">Create your signature by drawing directly on the canvas</p> <p className="text-sm text-gray-600">Create your signature by drawing directly on the canvas</p>
</div> </div>
<div className="flex-1 overflow-y-auto"> <div className="flex-1 flex flex-col">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-6"> <div className="grid grid-cols-12 gap-6 mb-2">
{/* Full Signature Canvas */} {/* Full Signature Canvas */}
<div className="lg:col-span-8"> <div className="col-span-8">
<label className="block text-xs sm:text-sm font-medium text-gray-700 mb-2">Full Signature</label> <label className="block text-sm font-medium text-gray-700 mb-2">Full Signature</label>
<div className="border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"> <div className="border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors">
<canvas <canvas
ref={canvasRef1} ref={canvasRef1}
className="w-full h-51 cursor-crosshair" className="w-full h-48 cursor-crosshair"
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp} onMouseUp={handleMouseUp}
@ -247,12 +247,12 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
</div> </div>
{/* Initials Canvas */} {/* Initials Canvas */}
<div className="lg:col-span-4"> <div className="col-span-4">
<label className="block 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>
<div className="border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"> <div className="border-2 border-dashed border-gray-300 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors">
<canvas <canvas
ref={canvasRef2} ref={canvasRef2}
className="w-full h-51 cursor-crosshair" className="w-full h-48 cursor-crosshair"
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove} onMouseMove={handleMouseMove}
onMouseUp={handleMouseUp} onMouseUp={handleMouseUp}
@ -263,7 +263,7 @@ const DrawSignatureCanvas: React.FC<Props> = ({ onSignatureChange, initialSignat
</div> </div>
{/* Controls */} {/* Controls */}
<div className="flex gap-4 mt-3"> <div className="flex gap-4">
<button <button
className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50 transition-colors" className="px-4 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
onClick={clearCanvas} onClick={clearCanvas}

245
src/components/setting/Signature/Signature.tsx
View File

@ -19,8 +19,8 @@ interface Signature {
signatureBlob: string; signatureBlob: string;
signatureStampedBlob: string; signatureStampedBlob: string;
default: boolean; default: boolean;
signatureMimeType: string; signatureMimeType:string;
initialsMimeType: string initialsMimeType:string
} }
const SignatureManager: React.FC = () => { const SignatureManager: React.FC = () => {
@ -30,15 +30,6 @@ const SignatureManager: React.FC = () => {
const [showAddSignature, setShowAddSignature] = useState<boolean>(false); const [showAddSignature, setShowAddSignature] = useState<boolean>(false);
const [editingSignature, setEditingSignature] = useState<Signature | null>(null); const [editingSignature, setEditingSignature] = useState<Signature | null>(null);
const signatureOptions = [
{ id: 1, name: 'print', initials: 'LA', style: 'print' },
{ id: 2, name: 'cursive', initials: 'LA', style: 'cursive' },
{ id: 3, name: 'script', initials: 'LA', style: 'script' },
{ id: 4, name: 'elegant', initials: 'LA', style: 'elegant' },
{ id: 5, name: 'modern', initials: 'LA', style: 'modern' },
{ id: 6, name: 'classic', initials: 'LA', style: 'classic' },
];
const getAllSignatures = async () => { const getAllSignatures = async () => {
setLoading(true) setLoading(true)
try { try {
@ -61,7 +52,7 @@ const SignatureManager: React.FC = () => {
console.log('Edit signature:', id); console.log('Edit signature:', id);
let editSignature = signatures.find((item) => item.id === id); let editSignature = signatures.find((item) => item.id === id);
console.log("editSignature", editSignature); console.log("editSignature", editSignature);
if (editSignature) { if (editSignature) {
setEditingSignature(editSignature); setEditingSignature(editSignature);
setShowAddSignature(true); setShowAddSignature(true);
@ -109,34 +100,6 @@ const SignatureManager: React.FC = () => {
setEditingSignature(null); setEditingSignature(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>
);
};
return ( return (
<> <>
{loading ? <div className=' flex items-center justify-center'> {loading ? <div className=' flex items-center justify-center'>
@ -148,7 +111,7 @@ const SignatureManager: React.FC = () => {
</div> </div>
</div> : </div> :
<div className="min-h-screen bg-white p-3 rounded-md px-4 mb-6"> <div className="min-h-screen bg-white p-3 rounded-md px-4 mb-6">
<div className="max-w-[84vw] mx-auto "> <div className="max-w-[84vw] mx-auto">
<> <>
{/* Header */} {/* Header */}
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between mb-3">
@ -163,121 +126,107 @@ const SignatureManager: React.FC = () => {
</div> </div>
{/* Table Card */} {/* Table Card */}
<div className="bg-white rounded-md overflow-hidden border border-gray-100">
<div className="overflow-x-auto"> {/* Table Header */}
<div className="bg-white rounded-md min-w-[800px] md:min-w-full overflow-hidden border border-gray-100"> <div className="bg-gray-50 border-b border-gray-200">
{/* Table Header */} <div className="grid grid-cols-12 gap-4 px-6 py-4">
<div className="bg-gray-50 border-b border-gray-200 "> <div className="col-span-5">
<div className="grid grid-cols-12 gap-4 px-6 py-4"> <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Signature</h3>
<div className="col-span-5"> </div>
<h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Signature</h3> <div className="col-span-5">
</div> <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Initial</h3>
<div className="col-span-5"> </div>
<h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider">Initial</h3> <div className="col-span-2">
</div> <h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider text-right">Actions</h3>
<div className="col-span-2">
<h3 className="text-sm font-semibold text-gray-700 uppercase tracking-wider text-right">Actions</h3>
</div>
</div> </div>
</div> </div>
</div>
{/* Table Body */} {/* Table Body */}
<div className="divide-y divide-gray-100"> <div className="divide-y divide-gray-100">
{signatures.map((signature, index) => ( {signatures.map((signature, index) => (
<div key={signature.id} className="grid grid-cols-12 gap-4 px-6 py-9 hover:bg-gray-50 transition-colors duration-150"> <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 */} {/* Signature Column */}
<div className="col-span-5"> <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="flex flex-col space-y-2 relative ps-6 border-l-3 border-blue-600 rounded-bl-2xl rounded-tl-2xl">
{/* Label */} {/* Label */}
<div className="text-sm text-gray-600 font-medium mb-1"> <div className="text-sm text-gray-600 font-medium mb-1">
Signed by: Signed by:
</div>
{/* Signature Image or Name/Initials */}
<div className="bg-white rounded-lg p-1 flex items-center justify-center">
{signature?.signatureType !== 'SELECT' ? (
<img
src={`data:${signature?.signatureMimeType};base64,${signature?.signatureBlob}`}
className="h-[50px] w-[250px] object-contain"
alt="Signature"
/>
) : (
renderSignatureText(signature?.signatureType, signature?.font, signature?.firstName, signature?.lastName, 'name')
)}
</div>
{/* Signature ID */}
<div className="text-xs text-gray-500 truncate">
{signature.signatureHash}
</div>
</div> </div>
</div> {/* Signature Image */}
<div className="bg-white rounded-lg p-1 flex items-center justify-center ">
{/* Initial Column */} <img
<div className="col-span-5"> src={`data:${signature.signatureMimeType};base64,${signature.signatureBlob}`}
<div className="flex flex-col space-y-2 relative ps-6 border-l-3 border-green-600 rounded-bl-2xl rounded-tl-2xl"> className="h-[50px] w-[250px] object-contain"
{/* Label */} alt="Signature"
<div className="text-sm text-gray-600 font-medium mb-1"> />
Initials
</div>
{/* Signature Initials: Image or Generated Text */}
<div className="bg-white rounded-lg p-1 flex items-center justify-center">
{signature?.signatureType !== 'SELECT' ? (
<img
src={`data:${signature.initialsMimeType};base64,${signature.initialsBlob}`}
className="h-[50px] object-contain"
alt="Initials"
/>
) : (
renderSignatureText(signature?.signatureType, signature?.font, signature?.firstName, signature?.lastName, 'initials')
)}
</div>
{/* Initial ID */}
<div className="text-xs text-gray-500 truncate">
{signature.initialsHash}
</div>
</div> </div>
</div>
{/* Signature ID */}
{/* Actions Column */} <div className="text-xs text-gray-500 truncate">
<div className="col-span-2 flex justify-between items-start pt-9 ps-8 "> {signature.signatureHash}
<div className="relative ">
<button
onClick={() => toggleDropdown(signature.id)}
className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-1.5 py-1.5 text-[13px] rounded-lg font-semibold flex items-center transition-all duration-200 border border-gray-300 "
>
ACTIONS
<FiMoreVertical />
</button>
{/* Dropdown Menu */}
{activeDropdown === signature.id && (
<div className={`absolute right-0 mt-0.5 -top-5 w-28 bg-white rounded-lg border border-gray-200 z-10 py-1`}>
<button
onClick={() => handleEdit(signature.id)}
className="w-full px-4 py-1 text-left text-gray-500 hover:bg-blue-50 hover:text-blue-700 flex items-center gap-3 text-sm transition-colors duration-150"
>
<FiEdit3 />
Edit
</button>
<button
onClick={() => handleDelete(signature.id)}
className="w-full px-4 py-1 text-left text-gray-500 hover:bg-red-50 hover:text-red-700 flex items-center gap-3 text-sm transition-colors duration-150"
>
<FiTrash2 />
Delete
</button>
</div>
)}
</div> </div>
</div> </div>
</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">
{/* Label */}
<div className="text-sm text-gray-600 font-medium mb-1">
Initials
</div>
{/* Signature Image */}
<div className="bg-white rounded-lg p-1 flex items-center justify-center ">
<img
src={`data:${signature.initialsMimeType};base64,${signature.initialsBlob}`}
className="h-[50px] object-contain"
alt="DS Signature"
/>
</div>
{/* Initial ID */}
<div className="text-xs text-gray-500 truncate">
{signature.initialsHash}
</div>
</div>
</div>
{/* Actions Column */}
<div className="col-span-2 flex justify-between items-start pt-9 ps-8 ">
<div className="relative ">
<button
onClick={() => toggleDropdown(signature.id)}
className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-1.5 py-1.5 text-[13px] rounded-lg font-semibold flex items-center transition-all duration-200 border border-gray-300 "
>
ACTIONS
<FiMoreVertical />
</button>
{/* Dropdown Menu */}
{activeDropdown === signature.id && (
<div className="absolute right-0 mt-0.5 w-28 bg-white rounded-lg border border-gray-200 z-10 py-1">
<button
onClick={() => handleEdit(signature.id)}
className="w-full px-4 py-1 text-left text-gray-500 hover:bg-blue-50 hover:text-blue-700 flex items-center gap-3 text-sm transition-colors duration-150"
>
<FiEdit3 />
Edit
</button>
<button
onClick={() => handleDelete(signature.id)}
className="w-full px-4 py-1 text-left text-gray-500 hover:bg-red-50 hover:text-red-700 flex items-center gap-3 text-sm transition-colors duration-150"
>
<FiTrash2 />
Delete
</button>
</div>
)}
</div>
</div>
</div>
))}
</div> </div>
</div> </div>
@ -303,8 +252,8 @@ const SignatureManager: React.FC = () => {
)} )}
{showAddSignature && ( {showAddSignature && (
<AddSignatureModal <AddSignatureModal
setShowAddSignature={handleModalClose} setShowAddSignature={handleModalClose}
getAllSignatures={getAllSignatures} getAllSignatures={getAllSignatures}
editingSignature={editingSignature} editingSignature={editingSignature}
/> />

89
src/components/setting/UserProfile.tsx
View File

@ -1,57 +1,62 @@
import { FiX, FiEdit2 } from "react-icons/fi"; import { FiX, FiEdit2 } from 'react-icons/fi';
interface Account { interface Account {
id: number; id: number;
isDefault: boolean; isDefault: boolean;
name: string; name: string;
} }
interface UserData { interface UserData {
id: number; id: number;
name: string; name:string
email: string; email: string;
language: string; language: string;
account: Account; account: Account;
} }
interface UserProfileProps { interface UserProfileProps {
userData: UserData; userData: UserData;
} }
const UserProfile: React.FC<UserProfileProps> = ({ userData }) => { const UserProfile: React.FC<UserProfileProps> = ({ userData }) => {
return ( const getInitials = (firstName: string, lastName: string) => {
<div className="bg-white rounded-md shadow-sm flex flex-col sm:flex-row items-center sm:items-start w-full p-6 gap-6"> return `${firstName.charAt(0)}${lastName.charAt(0)}`.toUpperCase();
{/* Profile Picture */} };
<div className="flex-shrink-0 text-center"> return (
<div className="w-20 h-20 bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white font-bold text-2xl rounded-full flex items-center justify-center shadow-lg"> <div className="bg-white rounded-md shadow-sm flex w-full p-6">
{userData.name.slice(0, 2).toUpperCase()} {/* Profile Picture */}
</div> <div className="flex-shrink-0 text-center">
</div> <div className="w-20 h-20 bg-[var(--primary)] text-white font-bold text-2xl rounded-full flex items-center justify-center shadow-lg">
{userData.name.slice(0,2).toUpperCase()}
</div>
</div>
{/* Info Fields */} {/* Info Fields */}
<div className="flex flex-col justify-center flex-1 w-full"> <div className="flex flex-col justify-center flex-1 ms-10">
{/* Row: Name */} {/* Row: Name */}
<div className="flex flex-col sm:flex-row py-1"> <div className="flex py-1">
<div className="text-gray-500 font-medium text-[13px] sm:w-32">Name</div> <div className="text-gray-500 font-medium text-[13px] w-32">Name</div>
<div className="text-gray-400 font-medium text-[13px]">{userData.name}</div> <div className="text-gray-400 font-medium text-[13px]">
{userData.name}
</div>
</div>
{/* Row: Email */}
<div className="flex py-1">
<div className="text-gray-500 font-medium text-[13px] w-32">Email</div>
<div className="text-gray-400 font-medium text-[13px]">{userData.email}</div>
</div>
{/* Row: Account Name */}
<div className="flex py-1">
<div className="text-gray-500 font-medium text-[13px] w-32">Account name</div>
<div className="text-gray-400 font-medium text-[13px]">
{userData.account.name}
</div>
</div>
</div>
</div> </div>
{/* Row: Email */}
<div className="flex flex-col sm:flex-row py-1">
<div className="text-gray-500 font-medium text-[13px] sm:w-32">Email</div>
<div className="text-gray-400 font-medium text-[13px]">{userData.email}</div>
</div>
{/* Row: Account Name */} );
<div className="flex flex-col sm:flex-row py-1">
<div className="text-gray-500 font-medium text-[13px] sm:w-32">Account name</div>
<div className="text-gray-400 font-medium text-[13px]">
{userData.account.name}
</div>
</div>
</div>
</div>
);
}; };
export default UserProfile; export default UserProfile

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

@ -41,34 +41,6 @@ const TemplateTable = () => {
}, [activeAccountId]) }, [activeAccountId])
// Listen for sessionStorage changes
useEffect(() => {
const handleStorageChange = (e: StorageEvent) => {
if (e.key === 'activeAccountId') {
const newActiveAccountId = e.newValue ? JSON.parse(e.newValue) : null;
setActiveAccountId(newActiveAccountId);
}
};
// Listen for storage events (works for changes from other tabs)
window.addEventListener('storage', handleStorageChange);
// Custom event listener for same-tab changes
const handleCustomStorageChange = (e: CustomEvent) => {
if (e.detail.key === 'activeAccountId') {
setActiveAccountId(e.detail.newValue);
}
};
window.addEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
return () => {
window.removeEventListener('storage', handleStorageChange);
window.removeEventListener('sessionStorageChange', handleCustomStorageChange as EventListener);
};
}, []);
const formatDate = (timestamp: number) => { const formatDate = (timestamp: number) => {
return new Date(timestamp * 1000).toLocaleString(); return new Date(timestamp * 1000).toLocaleString();
}; };

26
src/components/templates/Templates.tsx
View File

@ -28,8 +28,6 @@ const Templates = () => {
const filters = ["All", "My Templates", "Shared"]; const filters = ["All", "My Templates", "Shared"];
const handleAddTemplate = async () => { const handleAddTemplate = async () => {
console.log("handleAddTemplate called"); console.log("handleAddTemplate called");
try { try {
@ -41,23 +39,23 @@ const Templates = () => {
} }
return ( return (
<div className="p-3 text-sm"> <div className="p-3 text-sm">
{/* Header */} {/* Header */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3"> <div className="flex items-center justify-between mb-3">
{/* Filter as pill buttons */} {/* Filter as pill buttons */}
<div className="flex flex-wrap gap-2"> <div className="flex gap-2">
{filters.map((filter) => ( {filters.map((filter) => (
<button <button
key={filter} key={filter}
onClick={() => setActiveFilter(filter)} onClick={() => setActiveFilter(filter)}
className={`px-3 py-1 rounded-full text-xs border transition className={`px-3 py-1 rounded-full text-xs border transition
${activeFilter === filter ${activeFilter === filter
? "bg-[var(--primary)] text-white" ? "bg-[var(--primary)] text-white"
: "border-gray-300 text-gray-600 hover:bg-gray-100" : "border-gray-300 text-gray-600 hover:bg-gray-100"
}`} }`}
@ -67,22 +65,20 @@ const Templates = () => {
))} ))}
</div> </div>
{/* Add Template Button */}
<div <div
onClick={handleAddTemplate} onClick={handleAddTemplate}
className="flex items-center justify-center gap-1 bg-gradient-to-br from-[var(--primary)] to-blue-600 px-3 py-2 rounded-sm cursor-pointer hover:opacity-90" className="flex items-center gap-1 bg-gradient-to-br from-[var(--primary)] to-blue-600 px-2.5 py-1.5 rounded-sm cursor-pointer hover:opacity-90">
> <IoMdAdd className="text-white" />
<IoMdAdd className="text-white text-lg" /> <button
<button className="text-white text-sm font-medium"> className="text-white rounded text-sm hover:opacity-90">
Add Template Add Template
</button> </button>
</div> </div>
</div> </div>
{/* Table */} {/* Table */}
<section className="my-4 mx-3"></section> <section className="my-4 mx-3"></section>
<TemplateTable /> <TemplateTable/>
</div> </div>
); );
}; };

84
src/components/transactions/AuditModal.tsx
View File

@ -126,12 +126,11 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
]; ];
const getActionIcon = (action: string) => { const getActionIcon = (action: string) => {
const icons = { const icons = {
'CREATED': <FiFileText className="w-4 h-4 text-sky-500" />, 'CREATED': <FiFileText className="w-4 h-4 text-sky-500" />,
'SENT': <FiSend className="w-4 h-4" />, 'SENT': <FiSend className="w-4 h-4" />,
'INVITED': <FiMail className="w-4 h-4" />, 'INVITED': <FiMail className="w-4 h-4" />,
'COMPLETED': <FiCheckCircle className="w-4 h-4 bg-green-600 text-white rounded-full" />, 'COMPLETED': <FiCheckCircle className="w-4 h-4" />,
'RE_SENT_INVITATION': <FiRefreshCw className="w-4 h-4" />, 'RE_SENT_INVITATION': <FiRefreshCw className="w-4 h-4" />,
'RE_SENT_EXPIRED_INVITATION': <FiRefreshCw className="w-4 h-4" />, 'RE_SENT_EXPIRED_INVITATION': <FiRefreshCw className="w-4 h-4" />,
'VIEWED': <FiEye className="w-4 h-4" />, 'VIEWED': <FiEye className="w-4 h-4" />,
@ -149,7 +148,7 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
'REASSIGNED': <FiUserPlus className="w-4 h-4" />, 'REASSIGNED': <FiUserPlus className="w-4 h-4" />,
'EDITED': <FiEdit 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" />; return icons[action as keyof typeof icons] || <FiActivity className="w-4 h-4" />;
}; };
@ -219,12 +218,15 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
}; };
return ( return (
<div className="fixed inset-0 flex items-center justify-center backdrop-blur-sm bg-white/10 z-50 px-2"> <div className="fixed inset-0 flex items-center justify-center backdrop-blur-sm bg-white/10 z-50">
<div className="bg-white rounded-md shadow-md w-full h-[90vh] max-w-[95vw] sm:max-w-[90vw] md:max-w-[85vw] lg:max-w-[75vw] overflow-hidden flex flex-col"> <div className="bg-white rounded-md shadow-md w-full max-w-[75vw] max-h-[95vh] min-h-[85vh] flex flex-col">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between p-3 border-b border-gray-200 bg-[var(--primary)] rounded-t-md"> <div className="flex items-center justify-between p-3 border-b border-gray-200 bg-[var(--primary)] rounded-t-md">
<h2 className="text-base sm:text-lg md:text-xl font-semibold text-white">Audit Status</h2> <div className="flex items-center">
<h2 className="text-xl font-semibold text-white">
Audit Status
</h2>
</div>
<button <button
onClick={closeModal} onClick={closeModal}
className="text-white cursor-pointer transition-colors hover:text-gray-200" className="text-white cursor-pointer transition-colors hover:text-gray-200"
@ -235,57 +237,74 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
{/* Content */} {/* Content */}
<div className="flex-1 overflow-y-auto p-4 no-scrollbar"> <div className="flex-1 overflow-y-auto p-4 no-scrollbar">
{auditStatus.length ? ( {/* {loading ? <LoaderUi /> : ""} */}
<div className="space-y-3"> {auditStatus.length ?
<div className="space-y-1.5">
{/* <div className="text-sm text-gray-500 font-medium mb-2">TODAY</div> */}
{auditStatus.map((item, index) => ( {auditStatus.map((item, index) => (
<div key={index} className="flex items-start space-x-3 pb-3 border-b border-gray-100 last:border-b-0"> <div key={index} className="flex items-start space-x-4 pb-3 border-b border-gray-100 last:border-b-0">
<div className={`${getActionColor(item.action.toUpperCase())} mt-1`}> <div className={`${getActionColor(item.action)} mt-1`}>
{getActionIcon(item.action.toUpperCase())} {getActionIcon(item.action)}
</div> </div>
<div className="flex-1"> <div className="flex-1">
<p className="text-gray-600 font-medium text-xs sm:text-xs mb-1"> <p className="text-gray-600 font-medium text-sm mb-1">{item.message}</p>
{item.message}
</p> <div className="flex items-center space-x-2 text-xs text-gray-600 mb-1">
<div className="flex flex-wrap items-center space-x-2 text-xs text-gray-600 mb-1">
<span>Action: {item.action}</span> <span>Action: {item.action}</span>
{extractEmailFromMessage(item.message) && ( {extractEmailFromMessage(item.message) && (
<> <>
<span className="hidden sm:inline">•</span> <span>•</span>
<span className="text-blue-600"> <span className="text-blue-600">{extractEmailFromMessage(item.message)}</span>
{extractEmailFromMessage(item.message)}
</span>
</> </>
)} )}
</div> </div>
<div className="flex flex-wrap items-center space-x-2 mb-2 text-xs text-gray-600"> <div className="flex items-center space-x-2 mb-2">
<span>Status:</span> <span className="text-xs text-gray-600">Status:</span> <span className={`px-2 py-0.5 text-xs rounded-full ${getStatusBadge(item.status)}`}>
<span className={`px-2 py-0.5 rounded-full ${getStatusBadge(item.status)}`}>
{item.status} {item.status}
</span> </span>
<span className="text-gray-500">{formatTimestamp(item.timestamp)}</span> <span className="text-xs text-gray-500">{formatTimestamp(item.timestamp)}</span>
{item.language && ( {item.language && (
<span className="text-gray-400 uppercase">{item.language}</span> <span className="text-xs text-gray-400 uppercase">{item.language}</span>
)} )}
</div> </div>
{/* Event Data Details */}
{/* <div className="grid grid-cols-2 gap-4 text-xs text-gray-600 bg-gray-50 p-2 rounded">
{item.eventData.ip && (
<div>
<span className="font-medium text-gray-700">IP:</span> {item.eventData.ip}
</div>
)}
{item.eventData.timezone && (
<div>
<span className="font-medium text-gray-700">Timezone:</span> {item.eventData.timezone}
</div>
)}
{item.eventData.latitude && item.eventData.longitude && (
<div className="col-span-2">
<span className="font-medium text-gray-700">Location:</span>
<span className="ml-1">Lat: {item.eventData.latitude}, Lng: {item.eventData.longitude}</span>
</div>
)}
</div> */}
</div> </div>
</div> </div>
))} ))}
</div> </div> :
) : ( <div className="flex justify-center items-center">
<div className="flex justify-center items-center h-full">
<img <img
src={logoRecord} src={logoRecord}
alt="Record Not Found" alt="Record Not Found"
className="w-64 h-64 opacity-70 object-contain" className="w-80 h-80 opacity-70" // adjust size and appearance
/> />
</div> </div>
)} }
</div> </div>
{/* Footer */} {/* Footer */}
<div className="flex justify-between items-center p-3 border-t border-gray-200 bg-gray-50 text-sm"> <div className="flex justify-between items-center p-3 border-t border-gray-200 bg-gray-50">
<div className="text-gray-600"> <div className="text-sm text-gray-600">
Showing {auditStatus.length} event{auditStatus.length !== 1 ? 's' : ''} Showing {auditStatus.length} event{auditStatus.length !== 1 ? 's' : ''}
</div> </div>
<button <button
@ -297,7 +316,6 @@ const AuditModal: React.FC<AuditModalProps> = ({ closeModal }) => {
</div> </div>
</div> </div>
</div> </div>
); );
}; };

99
src/components/transactions/TransactionView.tsx
View File

@ -91,7 +91,7 @@ const TransactionView = () => {
const fetchDocuments = async () => { const fetchDocuments = async () => {
try { try {
const res = await api.get(`/api/accounts/${accountId}/transactions/${transactionId}/documents`) const res = await api.get(`https://concrete-gladly-mullet.ngrok-free.app/api/accounts/${accountId}/transactions/${transactionId}/documents?include_images=true`)
if (res?.status === 200) { if (res?.status === 200) {
let resDoc = res?.data let resDoc = res?.data
setDocumentsData(resDoc) setDocumentsData(resDoc)
@ -112,27 +112,15 @@ const TransactionView = () => {
window.open(`./../../../../sign/${id}/${SignTypeEnum.selfSign}`) window.open(`./../../../../sign/${id}/${SignTypeEnum.selfSign}`)
} }
const getStatusBadge = (status: string) => {
const statusClasses = {
'SENT': 'bg-blue-100 text-blue-800',
'COMPLETED': 'bg-green-100 text-green-800',
'FAILED': 'bg-red-100 text-red-800',
'PENDING': 'bg-yellow-100 text-yellow-800',
'VIEWED': 'bg-purple-100 text-purple-800',
'REJECTED': 'bg-red-100 text-red-800'
};
return statusClasses[status as keyof typeof statusClasses] || 'bg-gray-100 text-gray-800';
};
return ( return (
<> <>
{transactionDetails && {transactionDetails &&
<> <>
<div className='mt-2 grid grid-cols-1 lg:grid-cols-12 items-stretch max-w-90vw min-h-[88vh] h-full bg-white rounded-lg shadow-sm mx-3'> <div className='mt-2 flex justify-center items-stretch max-w-90vw min-h-[88vh] h-full bg-white rounded-lg shadow-sm mx-3'>
<div className="lg:col-span-10 w-full px-6 py-4 rounded-tl-sm text-xs border-r-2 border-gray-200 overflow-y-auto"> <div className="w-full px-6 py-4 rounded-tl-sm text-xs border-r-2 border-gray-200 overflow-y-auto">
{/* Header */} {/* Header */}
<h1 className='text-lg font-semibold text-gray-800'> <h1 className='text-lg font-semibold text-gray-800'>
Complete with Sign Made Easy: <span className='text-slate-600'>{transactionDetails?.transaction?.subject ?? "Untitled"}</span> Complete with Forms Made Easy: <span className='text-slate-600'>{transactionDetails?.transaction?.subject ?? "Untitled"}</span>
</h1> </h1>
<div className='mt-2'> <div className='mt-2'>
@ -182,55 +170,38 @@ const TransactionView = () => {
{/* Recipients List */} {/* Recipients List */}
{transactionDetails.recipients.map((recipient, index) => ( {transactionDetails.recipients.map((recipient, index) => (
<div key={index}> <div key={index}>
<div className="mt-2 flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 sm:gap-0 "> <div className='mt-2 flex justify-between items-center'>
<div className='flex gap-8 items-center'>
{/* Left section: recipient info */} {/* <p className='text-slate-600'>{index+1}</p> */}
<div className="flex flex-col sm:flex-row gap-4 sm:items-center">
<div> <div>
<p className="text-slate-600 font-semibold text-xs sm:xs">{recipient.name}</p> <p className='text-slate-600 font-semibold'>{recipient.name}</p>
<p className="text-slate-600 text-xs sm:text-xs">{recipient.email}</p> <p className='text-slate-600'>{recipient.email}</p>
{recipient.hostEmail && ( {recipient.hostEmail !== null && recipient.hostEmail !== "" && <p className='text-xs'><i><b>Host: {recipient.hostEmail}</b></i></p>}
<p className="text-xs text-gray-500 italic">
<strong>Host:</strong> {recipient.hostEmail}
</p>
)}
</div> </div>
</div> </div>
{/* Right section: status and actions */} <div className='flex flex-col leading-4.5 items-start text-md text-slate-600'>
<div className="flex flex-col items-start sm:items-end gap-1 text-sm text-slate-600"> <div className='flex gap-3 items-center relative'>
<div className="flex flex-wrap gap-3 items-center relative"> <div className='flex gap-1 items-center relative'>
<div className="pl-6 relative"> <AiFillSignature className='absolute left-[-30px] text-[1rem]' />
<AiFillSignature className="absolute left-0 top-0 text-[1rem]" /> <p className='text-black font-semibold'>{recipient.status}</p>
<p className={`text-black text-xs font-semibold rounded-lg px-2 py-0.5 ${getStatusBadge(recipient.status)}`}>{recipient.status}</p>
</div> </div>
{recipient.email === user.email && recipient.status !== "COMPLETED" &&
{recipient.email === user.email && recipient.status !== "COMPLETED" && ( <p
<button
onClick={() => handleNavigateToSign(recipient.id)} onClick={() => handleNavigateToSign(recipient.id)}
className="text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold text-xs hover:bg-opacity-90 transition" className='text-white rounded-sm bg-[var(--primary)] px-3 py-1 font-semibold cursor-pointer'>
>
Sign Sign
</button> </p>}
)}
</div> </div>
{recipient.status !== "PENDING" && <p>on {recipient.completedAt}</p>}
{recipient.status !== "PENDING" && ( {/* <a href={recipient.viewLink} className='text-blue-600 hover:underline'>
<p className="text-xs text-gray-500">on {recipient.completedAt}</p> View signed location
)} </a> */}
{/* Optional signed document link */}
{/* {recipient.viewLink && (
<a href={recipient.viewLink} className="text-blue-600 text-xs hover:underline">
View signed location
</a>
)} */}
</div> </div>
</div> </div>
<hr className='my-2 border-slate-200' />
<hr className="my-3 border-slate-200" />
</div> </div>
))} ))}
</div> </div>
} }
@ -248,25 +219,19 @@ const TransactionView = () => {
</div>} </div>}
</div> </div>
<div className='lg:col-span-2 text-xs rounded-sm max-h-[88vh] overflow-y-auto no-scrollbar'> <div className='lg:w-[15vw] sm:w-[20vw] text-xs rounded-sm max-h-[88vh] overflow-y-auto no-scrollbar'>
{documentsData.map((docsD, index) => ( {documentsData.map((docsD, index) => (
<div className='p-4 flex flex-col gap-2 cursor-pointer' key={docsD.id}> <div className='p-4 flex flex-col gap-2 cursor-pointer' key={docsD.id}>
<p>{docsD.name}</p> <p>{docsD.name}</p>
<div className='border-3 rounded-sm border-slate-300 relative text-xs'> <div className='border-3 rounded-sm border-slate-300 relative text-xs'>
{docsD?.thumbnail ? ( {docsD?.pages[0]?.src ?
<img <img style={{ width: "200px", height: "160px" }} src={docsD?.pages[0]?.src} alt="" loading='lazy'/>
style={{ width: "200px", height: "160px" }} :
src={`data:image/jpeg;base64,${docsD.thumbnail}`} // Adjust MIME type if needed <FaFile className='h-35 w-20 mx-5 text-gray-300' />}
alt=""
loading="lazy"
/>
) : (
<FaFile className="h-35 w-20 mx-5 text-gray-300" />
)}
<div className='bg-slate-100 p-2 absolute w-full bottom-[0px]'> <div className='bg-slate-100 p-2 absolute w-full bottom-[0px]'>
<p className='text-[0.7rem] text-slate-500 flex justify-end items-center'> <p className='text-[0.7rem] text-slate-500 flex justify-between items-center'>
{/* <span> 1 of {docsD?.pages?.length}</span> */} <span> 1 of {docsD?.pages?.length}</span>
<span className='cursor-pointer '><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16} /></Link></span> <span className='cursor-pointer'><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16} /></Link></span>
</p> </p>
</div> </div>

12
src/index.css
View File

@ -59,18 +59,6 @@
} }
.btn {
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Button press effect */
.btn:active {
transform: scale(0.97) translateY(1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) inset;
}
/* Sortable CSS */ /* Sortable CSS */
.sortable-ghost { .sortable-ghost {