Compare commits
No commits in common. "13885abfda5c9973bdbf8816f7c0cd321871608e" and "467bc0266fd8bb4c5a2c6ba4185547a15e54596e" have entirely different histories.
13885abfda
...
467bc0266f
|
|
@ -301,7 +301,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
|
|||
aria-expanded={open}
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-full overflow-hidden bg-gradient-to-br from-[var(--primary)] to-blue-600 flex items-center justify-center text-white font-semibold text-sm shadow-md">
|
||||
<div className="w-8 h-8 rounded-full overflow-hidden bg-[var(--primaryLight2)] flex items-center justify-center text-white font-semibold text-sm shadow-md">
|
||||
{user ? (
|
||||
<span className="w-full h-full object-cover p-1.5 font-bold">
|
||||
{(user?.name?.slice(0, 2)).toUpperCase()}
|
||||
|
|
@ -316,7 +316,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
|
|||
<div className="absolute right-0 mt-2 w-72 top-8 rounded-xl shadow-xl bg-white border border-gray-200 z-50 overflow-hidden">
|
||||
<div className="px-4 py-4 bg-gradient-to-r from-blue-50 to-purple-50 border-b border-gray-100">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="w-12 h-12 rounded-full overflow-hidden bg-gradient-to-br from-[var(--primary)] to-blue-600 flex items-center justify-center text-white font-semibold shadow-md">
|
||||
<div className="w-12 h-12 rounded-full overflow-hidden bg-gradient-to-br from-green-500 to-blue-600 flex items-center justify-center text-white font-semibold shadow-md">
|
||||
{user ? (
|
||||
<span className="w-full h-full object-cover px-3 text-xl py-2.5 font-bold">
|
||||
{(user?.name?.slice(0, 2)).toUpperCase()}
|
||||
|
|
|
|||
|
|
@ -92,14 +92,12 @@ const TransactionDataTable = () => {
|
|||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
{/* Header */}
|
||||
{location.pathname !== '/transactions' &&
|
||||
<div className="flex justify-between items-center px-6 py-4 border-b border-gray-100">
|
||||
<h2 className="text-sm font-semibold text-gray-800">Recent Transactions</h2>
|
||||
<span className=' text-[var(--primary)] text-xs hover:underline cursor-pointer font-semibold'>View all</span>
|
||||
</div>}
|
||||
</div>
|
||||
|
||||
{/* Scrollable Table Container */}
|
||||
<div className={`overflow-auto no-scrollbar ${location.pathname === '/transactions' ? "min-h-[76vh] max-h-[76vh]" : "min-h-[70vh] max-h-[70vh]"}`}>
|
||||
<div className="overflow-auto max-h-[67vh] no-scrollbar">
|
||||
<table className="w-full text-sm">
|
||||
{/* Sticky Header */}
|
||||
<thead className="bg-gray-50 sticky top-0 z-10">
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ const Contacts = () => {
|
|||
setShowModal((prev) => !prev);
|
||||
setActionStatus("Add")
|
||||
}}
|
||||
className="flex items-center gap-1 bg-gradient-to-br from-[var(--primary)] to-blue-600 px-3 py-1.5 rounded-sm hover:opacity-90 ">
|
||||
className="flex items-center gap-2 bg-[var(--mainPrimaryBtn)] px-3 py-1.5 rounded-sm hover:opacity-90 ">
|
||||
<IoMdAdd className="text-white" />
|
||||
<button
|
||||
className="text-white rounded text-sm hover:opacity-90 cursor-pointer">
|
||||
|
|
@ -134,17 +134,17 @@ const Contacts = () => {
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-y-auto mx-2 min-h-[76vh] max-h-[76vh] rounded-xl shadow-sm border bg-white border-gray-100 no-scrollbar">
|
||||
<table className="min-w-full text-sm bg-gray-50">
|
||||
<thead className="text-gray-600 text-xs uppercase tracking-wider border-b border-gray-200">
|
||||
<div className="overflow-y-auto mx-2 max-h-[79vh] rounded-xl shadow-sm border border-gray-100 no-scrollbar">
|
||||
<table className="min-w-full text-sm bg-white">
|
||||
<thead className="text-gray-500 uppercase text-xs tracking-wider sticky top-0 z-10">
|
||||
<tr>
|
||||
<th className="px-6 py-4 font-medium text-left">First Name</th>
|
||||
<th className="px-6 py-4 font-medium text-left">Last Name</th>
|
||||
<th className="px-6 py-4 font-medium text-left">Email</th>
|
||||
<th className="px-6 py-4 font-medium text-center">Actions</th>
|
||||
<th className="px-6 py-3 font-medium text-left">First Name</th>
|
||||
<th className="px-6 py-3 font-medium text-left">Last Name</th>
|
||||
<th className="px-6 py-3 font-medium text-left">Email</th>
|
||||
<th className="px-6 py-3 font-medium text-center">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100 bg-white">
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td colSpan="4" className="relative h-100">
|
||||
|
|
|
|||
|
|
@ -170,7 +170,7 @@ const ContactFormModal = ({
|
|||
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm bg-opacity-50 bg-black/30">
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-white/5 backdrop-blur-sm bg-opacity-50">
|
||||
<div className="bg-white rounded-md p-6 max-w-[700px] w-full shadow-lg relative">
|
||||
<div className="ms-2 space-y-2 max-w-[60vw]">
|
||||
<h2 className="text-lg font-medium text-slate-500">{`${actionStatus} Contact`}</h2>
|
||||
|
|
@ -262,7 +262,7 @@ const ContactFormModal = ({
|
|||
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"
|
||||
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"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ const Loader = () => {
|
|||
<div className="z-50 absolute w-screen h-screen flex items-center justify-center bg-[var(--hideModalBg)] opacity-60"></div>
|
||||
|
||||
{/* Loader */}
|
||||
<div className="absolute z-50 w-screen h-screen flex items-center justify-center backdrop-blur-sm bg-opacity-50 bg-black/30">
|
||||
<div className="absolute z-50 w-screen h-screen flex items-center justify-center">
|
||||
<div className='bg-[var(--loaderBg)] flex flex-col justify-center items-center gap-2 px-16 py-8 rounded-md shadow-lg'>
|
||||
<LuSignature className="text-4xl font-bold animate-text" />
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -23,11 +23,11 @@ type MenuPathMap = {
|
|||
}
|
||||
|
||||
const menuPathMap: MenuPathMap = {
|
||||
'/': 'Home',
|
||||
'/templates': 'Templates',
|
||||
// '/accounts': 'Accounts',
|
||||
'/transactions': 'Transactions',
|
||||
'/contacts': 'Contacts'
|
||||
'/': 'Home',
|
||||
'/templates': 'Templates',
|
||||
// '/accounts': 'Accounts',
|
||||
'/transactions': 'Transactions',
|
||||
'/contacts': 'Contacts'
|
||||
};
|
||||
|
||||
const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
|
||||
|
|
@ -78,9 +78,8 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
|
|||
onClick={() => setShowSideBar(!showSideBar)}
|
||||
className='absolute top-[100%] translate-y-[-100%] right-0 bg-[var(--dashBoardBg)] p-2 rounded-tl-sm rounded-bl-sm cursor-pointer transition-colors'
|
||||
>
|
||||
<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(237,234,235,1)]'></div>
|
||||
<div className='absolute bottom-[-14px] right-0 w-[14px] h-[14px] rounded-full shadow-[5px_-5px_0px_0px_rgba(237,234,235,1)]'></div>
|
||||
{showSideBar ? (
|
||||
<BsLayoutSidebarInsetReverse className='fill-[var(--primary)] hover:text-[var(--primary)] transition-all text-2xl' />
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ const StartNow = () => {
|
|||
</p>
|
||||
|
||||
<button
|
||||
className="mt-1 text-sm font-medium text-white bg-gradient-to-br from-[var(--primary)] to-blue-600 hover:bg-blue-700 px-3 py-1 rounded shadow-xs transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-blue-400 cursor-pointer"
|
||||
className="mt-1 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 px-3 py-1 rounded shadow-xs transition-colors duration-150 focus:outline-none focus:ring-1 focus:ring-blue-400"
|
||||
>
|
||||
Start Now
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -83,26 +83,60 @@ const StartSection = () => {
|
|||
|
||||
return (
|
||||
<section className="px-3 py-2 w-full mt-2">
|
||||
<h2 className="text-sm font-semibold text-gray-800 px-1 pb-2">
|
||||
Upload Document
|
||||
</h2>
|
||||
<h2 className="text-sm font-semibold text-gray-800 px-1 pb-2">Upload Document</h2>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 h-[12vw] mx-1">
|
||||
|
||||
{/* Upload card */}
|
||||
<div className="w-full">
|
||||
<StartNow />
|
||||
|
||||
{/* <div className='col-span-1 grid grid-cols-1 justify-between gap-4 bg-white rounded-xl'>
|
||||
{cards.map((card, index) => (
|
||||
<div
|
||||
onClick={() => handleStartSectionClick(card.link)}
|
||||
key={index}
|
||||
className={`${card.bg} w-full cursor-pointer relative border border-gray-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all flex flex-col justify-between`}
|
||||
>
|
||||
|
||||
<div className="flex flex-col gap-3 ">
|
||||
<div className="w-9 h-9 flex items-center justify-center border border-gray-200 rounded-md bg-white">
|
||||
{card.icon}
|
||||
</div>
|
||||
|
||||
<h3 className="text-sm font-medium text-gray-500">{card.title}</h3>
|
||||
<p className="text-xs text-gray-700">{card.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mt-2">
|
||||
{card.buttonText ? (
|
||||
<button className="text-sm cursor-pointer font-medium text-white bg-gradient-to-r from-blue-600 to-blue-500 px-4 py-2 rounded-md shadow hover:opacity-90 transition">
|
||||
{card.buttonText}
|
||||
</button>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
|
||||
<FiArrowRight className="w-4 h-4 text-gray-500" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div> */}
|
||||
|
||||
</div>
|
||||
|
||||
{/* Recent Data Section */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-2 mt-5">
|
||||
<section className="w-full">
|
||||
{/* <section className='pt-2 pb-3'> */}
|
||||
{/* <h2 className="mt-6 text-sm font-semibold text-gray-800 mb-2">Recent Activities</h2> */}
|
||||
<div className='grid grid-cols-12 gap-2 mt-5'>
|
||||
<section className=' col-span-6'>
|
||||
<TransactionDataTable />
|
||||
</section>
|
||||
<section className="w-full">
|
||||
<section className=' col-span-6'>
|
||||
<TemplateTable />
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
{/* </section> */}
|
||||
|
||||
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -47,45 +47,45 @@ type Signer = {
|
|||
const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
|
||||
return (
|
||||
// <div className="bg-white/60 rounded-md shadow-sm border border-gray-100 ">
|
||||
<div className="p-6 ">
|
||||
<div className="flex items-center justify-evenly mb-2">
|
||||
<h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2 ">
|
||||
<FaUsers className="text-blue-600" />
|
||||
Signature Status
|
||||
</h3>
|
||||
<span className="text-sm text-gray-600">
|
||||
{signers.filter(s => s.completed).length} of {signers.length} signed
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
|
||||
<FaUsers className="text-blue-600" />
|
||||
Signature Status
|
||||
</h3>
|
||||
<span className="text-sm text-gray-600">
|
||||
{signers.filter(s => s.completed).length} of {signers.length} signed
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 max-h-[20vh] overflow-y-auto no-scrollbar">
|
||||
{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 className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-medium">
|
||||
{signer.name.length > 2 ? signer.name.split(" ").map(n => n[0].toUpperCase()).join("") : signer.email.split("").map(n => n[0].toUpperCase()).join("")}
|
||||
<div className="space-y-3 max-h-[50vh] overflow-y-auto no-scrollbar">
|
||||
{signers.map((signer) => (
|
||||
<div key={signer.id} className="flex items-center gap-4 p-3 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">
|
||||
{signer.name.length > 2 ? signer.name.split(" ").map(n => n[0].toUpperCase()).join("") : signer.email.split("").map(n => n[0].toUpperCase()).join("")}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-gray-800">{signer.name}</div>
|
||||
<div className="text-sm text-gray-600">{signer.email}</div>
|
||||
<div className="text-xs text-gray-500">Order: {signer.routingOrder}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{signer.completed ? (
|
||||
<div className="flex items-center gap-1 px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm">
|
||||
<FaCheck className="w-3 h-3" />
|
||||
Signed
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1 px-3 py-1 bg-orange-100 text-orange-700 rounded-full text-sm">
|
||||
<FaClock className="w-3 h-3" />
|
||||
Pending
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="font-medium text-gray-800">{signer.name}</div>
|
||||
<div className="text-xs text-gray-600">{signer.email}</div>
|
||||
<div className="text-xs text-gray-500">Order: {signer.routingOrder}</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{signer.completed ? (
|
||||
<div className="flex items-center gap-1 px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs">
|
||||
<FaCheck className="w-3 h-3" />
|
||||
Signed
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1 px-3 py-1 bg-orange-100 text-orange-700 rounded-full text-xs">
|
||||
<FaClock className="w-3 h-3" />
|
||||
Pending
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
// </div>
|
||||
);
|
||||
};
|
||||
|
|
@ -122,79 +122,78 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
|
|||
|
||||
return (
|
||||
// <div className="bg-white/60 rounded-md shadow-sm border border-gray-100">
|
||||
<div className="py-3">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-1 text-center ">
|
||||
Signing Flow</h3>
|
||||
<div className="overflow-x-auto overflow-y-auto h-[18vh] no-scrollbar flex justify-center items-center">
|
||||
<div className="flex justify-center items-center gap-2 min-w-max">
|
||||
{/* Mail icon */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="bg-blue-100 p-4 rounded-full">
|
||||
<FaEnvelope className="text-blue-600 text-2xl" />
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">Signing Flow</h3>
|
||||
<div className="overflow-x-auto overflow-y-auto h-[50vh] no-scrollbar flex justify-center items-center">
|
||||
<div className="flex justify-center items-center gap-4 min-w-max">
|
||||
{/* Mail icon */}
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="bg-blue-100 p-4 rounded-full">
|
||||
<FaEnvelope className="text-blue-600 text-2xl" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mt-2">Sent</p>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 mt-2">Sent</p>
|
||||
</div>
|
||||
|
||||
{/* Dotted line */}
|
||||
<div className="flex items-center mb-3">
|
||||
<div className="w-16 border-t-2 border-dotted border-gray-300"></div>
|
||||
</div>
|
||||
{/* Dotted line */}
|
||||
<div className="flex items-center mb-3">
|
||||
<div className="w-16 border-t-2 border-dotted border-gray-300"></div>
|
||||
</div>
|
||||
|
||||
{/* Signers by routing order */}
|
||||
<div className="flex items-center justify-center space-x-6">
|
||||
{sortedOrders.map((order, index) => (
|
||||
<React.Fragment key={order}>
|
||||
<div className="flex flex-col items-center space-y-4 mb-4">
|
||||
<div className="text-sm font-medium text-gray-600 mb-2">
|
||||
Step {order}
|
||||
</div>
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{grouped[order].map((signer) => {
|
||||
let bgColor = "";
|
||||
let icon = null;
|
||||
{/* Signers by routing order */}
|
||||
<div className="flex items-center justify-center space-x-6">
|
||||
{sortedOrders.map((order, index) => (
|
||||
<React.Fragment key={order}>
|
||||
<div className="flex flex-col items-center space-y-4 mb-4">
|
||||
<div className="text-sm font-medium text-gray-600 mb-2">
|
||||
Step {order}
|
||||
</div>
|
||||
<div className="flex flex-col items-center space-y-3">
|
||||
{grouped[order].map((signer) => {
|
||||
let bgColor = "";
|
||||
let icon = null;
|
||||
|
||||
if (signer.completed) {
|
||||
bgColor = "bg-[var(--primary)]";
|
||||
icon = <FaCheck className="text-green-600" />;
|
||||
} else if (order === currentProcessingOrder) {
|
||||
bgColor = "bg-yellow-500";
|
||||
icon = <FaClock className="text-yellow-800" />;
|
||||
} else {
|
||||
bgColor = "bg-gray-400";
|
||||
icon = <FaLock className="text-gray-500" />;
|
||||
}
|
||||
if (signer.completed) {
|
||||
bgColor = "bg-[var(--primary)]";
|
||||
icon = <FaCheck className="text-green-600" />;
|
||||
} else if (order === currentProcessingOrder) {
|
||||
bgColor = "bg-yellow-500";
|
||||
icon = <FaClock className="text-yellow-800" />;
|
||||
} else {
|
||||
bgColor = "bg-gray-400";
|
||||
icon = <FaLock className="text-gray-500" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={signer.id} className="relative">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-semibold ${bgColor}`}
|
||||
title={signer.name}
|
||||
>
|
||||
{getInitials(signer.name)}
|
||||
<span className="absolute bottom-[-4px] right-[-8px] p-1 rounded-full bg-white shadow">
|
||||
{icon}
|
||||
</span>
|
||||
return (
|
||||
<div key={signer.id} className="relative">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-semibold ${bgColor}`}
|
||||
title={signer.name}
|
||||
>
|
||||
{getInitials(signer.name)}
|
||||
<span className="absolute bottom-[-4px] right-[-8px] p-1 rounded-full bg-white shadow">
|
||||
{icon}
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-gray-600 text-center max-w-16 truncate">
|
||||
{signer.name.split(" ")[0] || signer.firstName.split(0,1)}
|
||||
</p>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-gray-600 text-center max-w-16 truncate">
|
||||
{signer.name.split(" ")[0] || signer.firstName.split(0, 1)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{index < sortedOrders.length - 1 && (
|
||||
<div className="flex items-center">
|
||||
<div className="w-16 border-t-2 border-dotted border-gray-300"></div>
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
{index < sortedOrders.length - 1 && (
|
||||
<div className="flex items-center">
|
||||
<div className="w-16 border-t-2 border-dotted border-gray-300"></div>
|
||||
</div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
// </div>
|
||||
);
|
||||
};
|
||||
|
|
@ -217,7 +216,7 @@ const DocumentSubmissionOptions = () => {
|
|||
// const selectedDocuments = useSelector((state: RootState) => state.selectedDocuments.selectedDocuments)
|
||||
const selectedDocuments = useSelector((state: RootState) => state.documents.documents)
|
||||
console.log('Line 218', selectedDocuments)
|
||||
const [transactionData, setTransactionData] = useState({})
|
||||
const [transactionData,setTransactionData] = useState({})
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -395,7 +394,7 @@ const DocumentSubmissionOptions = () => {
|
|||
<h3 className="text-2xl font-bold text-gray-800 mb-2">Document Send Successfully!</h3>
|
||||
{selectedDocuments?.map((docs) => (
|
||||
<p className="text-gray-600">Your document "{docs.name}" has been sent for signature.</p>
|
||||
))}
|
||||
) )}
|
||||
</div>
|
||||
<div className="bg-gray-50 rounded-lg p-4 space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
|
|
@ -416,7 +415,7 @@ const DocumentSubmissionOptions = () => {
|
|||
case 'redirect':
|
||||
return (
|
||||
<>
|
||||
|
||||
|
||||
<SigningOrderDiagram signers={selectedRecipients} />
|
||||
</>
|
||||
);
|
||||
|
|
@ -434,25 +433,26 @@ const DocumentSubmissionOptions = () => {
|
|||
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
|
||||
<div className="flex items-center space-x-4 mb-3 bg-white w-full py-4 px-5 shadow">
|
||||
<Link to={'/'} className="flex items-center space-x-2 text-gray-600 hover:text-[var(--primary)] transition-colors duration-200 group">
|
||||
<IoMdHome
|
||||
className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition'
|
||||
/>
|
||||
</Link>
|
||||
<div className="h-8 w-px bg-gray-300"></div>
|
||||
<h1 className="text-md text-gray-800">🎉 Awesome! The document’s been sent for signature. 🎉</h1>
|
||||
</div>
|
||||
<div className={`max-w-4xl mx-auto transition-all bg-white rounded-lg duration-700 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}>
|
||||
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 p-6">
|
||||
<div className={`max-w-6xl mx-auto transition-all duration-700 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}>
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center space-x-4 mb-5">
|
||||
<Link to={'/'} className="flex items-center space-x-2 text-gray-600 hover:text-[var(--primary)] transition-colors duration-200 group">
|
||||
<IoMdHome
|
||||
className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition'
|
||||
/>
|
||||
</Link>
|
||||
<div className="h-8 w-px bg-gray-300"></div>
|
||||
<h1 className="text-2xl font-bold text-gray-800">🎉 Awesome! The document’s been sent for signature. 🎉</h1>
|
||||
</div>
|
||||
|
||||
|
||||
{/* <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 max-w-5xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3 max-w-5xl mx-auto">
|
||||
{/* Left Panel - Configuration */}
|
||||
<div className="space-y-6 ">
|
||||
|
||||
|
||||
{/* Action Selection */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 min-h-[81vh] ">
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-4">
|
||||
|
|
@ -502,7 +502,7 @@ const DocumentSubmissionOptions = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Selection indicator */}
|
||||
{isSelected && (
|
||||
<div className="absolute top-4 right-4">
|
||||
<div className="w-6 h-6 bg-[var(--primary)] rounded-full flex items-center justify-center">
|
||||
|
|
@ -517,8 +517,10 @@ const DocumentSubmissionOptions = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Custom Image Section */}
|
||||
</div>
|
||||
|
||||
{/* Right Panel - Preview */}
|
||||
<div className="space-y-6">
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden sticky top-6">
|
||||
<div className="bg-gradient-to-r from-gray-50 to-blue-50 px-6 py-2 border-b border-gray-200">
|
||||
|
|
@ -533,25 +535,7 @@ const DocumentSubmissionOptions = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
<div className="text-center pt-2 max-h-[25vh]">
|
||||
<div className="w-20 h-20 bg-gradient-to-br from-teal-500 to-green-400 rounded-full flex items-center justify-center mt-3 mx-auto shadow-lg ">
|
||||
<FaCheck className="text-white text-4xl" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-gray-800 mb-2">Document Send Successfully!</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div className='border border-b border-gray-50'></div>
|
||||
<div className=' min-h-[30vh]'>
|
||||
<SigningOrderDiagram signers={selectedRecipients} />
|
||||
</div>
|
||||
<div className='border border-b border-gray-50'></div>
|
||||
<div className=' min-h-[30vh]'>
|
||||
<SignersList signers={selectedRecipients} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@ const ContactForm = ({ onSubmit, loading }: Props) => {
|
|||
type="button"
|
||||
onClick={handleSubmit}
|
||||
disabled={loading}
|
||||
className="bg-gradient-to-br from-[var(--primary)] to-blue-600 px-5 py-2 rounded-md text-white text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
|
||||
className="bg-gray-300 px-5 py-2 rounded-md text-slate-700 text-sm font-medium hover:bg-opacity-90 transition disabled:opacity-60 disabled:cursor-not-allowed cursor-pointer"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@ const CreateAndInvite = ({
|
|||
<button
|
||||
type="button"
|
||||
onClick={handleCreateSubmit}
|
||||
className="ms-1 flex items-center text-[14px] px-3 py-[1.1] bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white font-medium rounded-md border border-gray-300 hover:bg-opacity-90 transition cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
className="ms-1 flex items-center text-[14px] px-3 py-[1.1] bg-gray-300 text-slate-600 font-medium rounded-md border border-gray-300 hover:bg-opacity-90 transition cursor-pointer disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
disabled={createAndInviteLoader}
|
||||
>
|
||||
{createAndInviteLoader ? (
|
||||
|
|
@ -321,7 +321,7 @@ const CreateAndInvite = ({
|
|||
<button
|
||||
type="button"
|
||||
onClick={handleInviteSubmit}
|
||||
className="px-4 py-2 text-sm font-medium rounded-md cursor-pointer hover:bg-opacity-90 transition text-[14px] bg-gradient-to-br from-[var(--primary)] to-blue-600 text-white disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
className="px-4 py-2 text-sm font-medium rounded-md cursor-pointer hover:bg-opacity-90 transition text-[14px] bg-gray-300 text-slate-600 disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
disabled={createAndInviteLoader}
|
||||
>
|
||||
{createAndInviteLoader ? (
|
||||
|
|
|
|||
|
|
@ -431,7 +431,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<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="fixed inset-0 backdrop-blur-sm bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-md shadow-xl w-full max-w-[80vw] h-[80vh] flex relative">
|
||||
|
||||
{/* Sidebar Navigation */}
|
||||
|
|
@ -555,7 +555,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
CANCEL
|
||||
</button>
|
||||
<button
|
||||
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"
|
||||
className="cursor-pointer px-4 py-2 text-sm font-medium rounded-md bg-[var(--modalSubmitBG)] text-white hover:bg-[var(--modalSubmitBGHover)] transition-colors flex items-center gap-2 disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ const SignatureManager: React.FC = () => {
|
|||
<h1 className="text-[17px] font-medium text-gray-500 mb-2">Signatures</h1>
|
||||
<p className="text-gray-300 text-sm">Add or update your name and signature styles.</p>
|
||||
</div>
|
||||
<button className="bg-gradient-to-br from-[var(--primary)] to-blue-600 hover:bg-[var(--modalSubmitBGHover)] text-white px-3 gap-1 py-1.5 rounded-lg font-semibold text-sm text-[14px] flex items-center cursor-pointer transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" onClick={handleAddNew}>
|
||||
<button className="bg-[var(--modalSubmitBG)] hover:bg-[var(--modalSubmitBGHover)] text-white px-4 py-2 rounded-lg font-semibold text-sm text-[14px] flex items-center cursor-pointer transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5" onClick={handleAddNew}>
|
||||
<FiPlus className="" />
|
||||
ADD
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -543,7 +543,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<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="fixed inset-0 backdrop-blur-sm bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-md shadow-xl w-full max-w-[80vw] h-[80vh] flex relative">
|
||||
|
||||
{/* Sidebar Navigation */}
|
||||
|
|
|
|||
|
|
@ -90,139 +90,127 @@ const TemplateTable = () => {
|
|||
}
|
||||
return (
|
||||
<>
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
{/* Header */}
|
||||
{location.pathname !== '/templates' &&
|
||||
<div className="flex justify-between items-center px-6 py-4 border-b border-gray-100">
|
||||
<h2 className="text-sm font-semibold text-gray-800">Recent Template</h2>
|
||||
<span className=' text-[var(--primary)] text-xs hover:underline cursor-pointer font-semibold'>View all</span>
|
||||
</div>}
|
||||
<div className="overflow-y-auto max-h-[79vh] rounded-xl shadow-sm border border-gray-100 no-scrollbar">
|
||||
<div className="flex justify-between items-center px-6 py-4 border-b border-gray-100 bg-white">
|
||||
<h2 className="text-sm font-semibold text-gray-800 ">Recent Template</h2>
|
||||
</div>
|
||||
<table className="min-w-full text-sm bg-white">
|
||||
<thead className=" sticky top-0 z-10 bg-gray-100 text-gray-600 text-xs uppercase tracking-wider border-b border-gray-200">
|
||||
<tr>
|
||||
{/* <th className="px-4 py-3 w-10 text-left font-medium">
|
||||
<div className="w-4 h-4 border border-slate-300 rounded flex items-center justify-center">
|
||||
<FaCheck className="text-purple-600 text-xs" />
|
||||
</div>
|
||||
</th> */}
|
||||
<th className="px-6 py-4 font-semibold text-left">Name</th>
|
||||
{loaction.pathname === '/templates' && (<>
|
||||
<th className="px-6 py-4 font-semibold text-left">Created</th>
|
||||
<th className="px-6 py-4 font-semibold text-left">Last Updated</th>
|
||||
</>)}
|
||||
<th className="px-6 py-4 font-semibold text-left">Use</th>
|
||||
<th className="px-6 py-4 font-semibold text-left">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
{/* Scrollable Table Container */}
|
||||
<div className={`overflow-auto no-scrollbar ${location.pathname === '/templates' ? "min-h-[76vh] max-h-[76vh]" : "min-h-[70vh] max-h-[70vh]"}`}>
|
||||
<table className="w-full text-sm">
|
||||
{/* Sticky Header */}
|
||||
<thead className="bg-gray-50 sticky top-0 z-10">
|
||||
<tr className="text-gray-600 text-xs uppercase tracking-wider border-b border-gray-200">
|
||||
<th className="px-6 py-4 text-left font-semibold">Name</th>
|
||||
{location.pathname === '/templates' && (
|
||||
<>
|
||||
<th className="px-6 py-4 text-center font-semibold">Created</th>
|
||||
<th className="px-6 py-4 text-center font-semibold">Last Updated</th>
|
||||
</>
|
||||
)}
|
||||
<th className="px-6 py-4 text-center font-semibold">Use</th>
|
||||
<th className="px-6 py-4 text-center font-semibold">Action</th>
|
||||
{loading ? (
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colSpan="6" className="relative h-100">
|
||||
<LoaderUi />
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
{loading ? (
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colSpan="6" className="relative h-100">
|
||||
<LoaderUi />
|
||||
</tbody>
|
||||
) : templates.length > 0 ? (
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{templates.map((item, index) => (
|
||||
<tr key={index} className="hover:bg-gray-50 transition-colors">
|
||||
{/* <td className="px-4 py-4">
|
||||
<div className="w-4 h-4 border border-slate-300 rounded flex items-center justify-center">
|
||||
<FaCheck className="text-purple-600 text-xs" />
|
||||
</div>
|
||||
</td> */}
|
||||
<td className="px-4 py-4 text-gray-800 text-left">
|
||||
{item.name || 'Untitled'}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
) : templates.length > 0 ? (
|
||||
<>
|
||||
{/* Scrollable Body */}
|
||||
<tbody className="bg-white divide-y divide-gray-100">
|
||||
{templates.map((item, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className="hover:bg-gray-50 transition-colors duration-150"
|
||||
{loaction.pathname === '/templates' && (<>
|
||||
<td className="px-4 py-4 text-gray-800 text-left">
|
||||
{formatTimestamp(item.createdAt)}
|
||||
</td>
|
||||
<td className="px-4 py-4 text-gray-800 text-left">
|
||||
{formatTimestamp(item.lastModifiedAt)}
|
||||
</td>
|
||||
</>)}
|
||||
<td
|
||||
className="px-4 py-4 text-left"
|
||||
onClick={() => handleUseClick(item)}
|
||||
>
|
||||
<td className="px-6 py-4 text-left">
|
||||
<div className="text-gray-800 font-medium truncate max-w-xs">
|
||||
{item.name || 'Untitled'}
|
||||
</div>
|
||||
</td>
|
||||
<span className="bg-[var(--lightGreyCol)] cursor-pointer border-gray-300 text-gray-600 hover:bg-gray-100 px-3 py-1 rounded-lg font-semibold text-[12px]">
|
||||
Use
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{location.pathname === '/templates' && (
|
||||
<>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<span className="text-gray-600 whitespace-nowrap">
|
||||
{formatTimestamp(item.createdAt)}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-center">
|
||||
<span className="text-gray-600 whitespace-nowrap">
|
||||
{formatTimestamp(item.lastModifiedAt)}
|
||||
</span>
|
||||
</td>
|
||||
</>
|
||||
)}
|
||||
{/* Action Menu */}
|
||||
<td className="px-4 py-4 text-left">
|
||||
<div
|
||||
className="relative inline-block"
|
||||
tabIndex={0}
|
||||
onBlur={(e) => {
|
||||
if (!e.currentTarget.contains(e.relatedTarget)) {
|
||||
setShowMenu(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<button
|
||||
className="text-gray-400 hover:text-gray-600 p-1 focus:outline-none"
|
||||
onClick={() =>
|
||||
setShowMenu(showMenu === index ? null : index)
|
||||
}
|
||||
>
|
||||
<PiDotsThreeOutlineVerticalFill className="text-lg ms-4" />
|
||||
</button>
|
||||
|
||||
<td className="px-6 py-4 text-center">
|
||||
<button
|
||||
className="bg-[var(--lightGreyCol)] cursor-pointer border-gray-300 text-gray-600 hover:bg-gray-100 px-3 py-1 rounded-lg font-semibold text-xs transition-colors duration-150"
|
||||
onClick={() => handleUseClick(item)}
|
||||
>
|
||||
Use
|
||||
</button>
|
||||
</td>
|
||||
|
||||
<td className="px-6 py-4 text-center">
|
||||
{showMenu === index && (
|
||||
<div
|
||||
className="relative inline-block"
|
||||
tabIndex={0}
|
||||
onBlur={(e) => {
|
||||
if (!e.currentTarget.contains(e.relatedTarget)) {
|
||||
setShowMenu(null);
|
||||
}
|
||||
}}
|
||||
className="absolute -top-9 right-4 bg-white border border-gray-200 rounded-lg shadow-lg z-20 min-w-[100px]"
|
||||
>
|
||||
<button
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors duration-150 p-1 rounded-md hover:bg-gray-100"
|
||||
onClick={() =>
|
||||
setShowMenu(showMenu === index ? null : index)
|
||||
}
|
||||
onMouseDown={() => handleEditClick(item.id)}
|
||||
className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600"
|
||||
>
|
||||
<PiDotsThreeOutlineVerticalFill className="text-lg" />
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onMouseDown={() => {
|
||||
setShowMenu(null);
|
||||
console.log('Delete clicked', item);
|
||||
}}
|
||||
className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-red-600"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
|
||||
{showMenu === index && (
|
||||
<div className="absolute -top-9 right-4 bg-white border border-gray-200 rounded-lg shadow-lg z-20 min-w-[100px]">
|
||||
<button
|
||||
onMouseDown={() => handleEditClick(item.id)}
|
||||
className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onMouseDown={() => {
|
||||
setShowMenu(null);
|
||||
console.log('Delete clicked', item);
|
||||
}}
|
||||
className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-red-600"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</>
|
||||
) : (
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colSpan="6" className="text-center py-10 text-gray-500">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<img
|
||||
src={logoRecord}
|
||||
alt="Record Not Found"
|
||||
className="w-70 h-70 mb-4 opacity-70"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
)}
|
||||
</table>
|
||||
</div>
|
||||
))}
|
||||
</tbody>
|
||||
) : (
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colSpan="6" className="text-center py-10 text-gray-500">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<img
|
||||
src={logoRecord}
|
||||
alt="Record Not Found"
|
||||
className="w-70 h-70 mb-4 opacity-70"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
)}
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ const Templates = () => {
|
|||
|
||||
<div
|
||||
onClick={handleAddTemplate}
|
||||
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">
|
||||
className="flex items-center gap-2 bg-[var(--mainPrimaryBtn)] px-3 py-1.5 rounded-sm cursor-pointer hover:opacity-90">
|
||||
<IoMdAdd className="text-white" />
|
||||
<button
|
||||
className="text-white rounded text-sm hover:opacity-90">
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ import { useSelector } from 'react-redux';
|
|||
import { RootState } from '../../store/store';
|
||||
import { SignTypeEnum } from '../../utlity/types';
|
||||
import AuditModal from './AuditModal';
|
||||
import { FaFile } from 'react-icons/fa6';
|
||||
|
||||
// Sample recipient data — you can replace this with actual API data later
|
||||
const recipients = [
|
||||
|
|
@ -47,35 +46,34 @@ const TransactionView = () => {
|
|||
const [signingOrderModal, setSigningOrderModal] = useState({ open: false });
|
||||
const user = useSelector((state: RootState) => state.user)
|
||||
const location = useLocation();
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [documentsData, setDocumentsData] = useState([])
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// update whenever location changes
|
||||
setIsModalOpen(location.search.includes("auditStatus"));
|
||||
}, [location]);
|
||||
useEffect(() => {
|
||||
// update whenever location changes
|
||||
setIsModalOpen(location.search.includes("auditStatus"));
|
||||
}, [location]);
|
||||
|
||||
const handleOpenAuditModal = () => {
|
||||
const { pathname, search } = location;
|
||||
let newSearch = search
|
||||
? search.includes("auditStatus")
|
||||
? search
|
||||
: `${search}&auditStatus`
|
||||
: "?auditStatus";
|
||||
const handleOpenAuditModal = () => {
|
||||
const { pathname, search } = location;
|
||||
let newSearch = search
|
||||
? search.includes("auditStatus")
|
||||
? search
|
||||
: `${search}&auditStatus`
|
||||
: "?auditStatus";
|
||||
|
||||
window.history.pushState({}, "", pathname + newSearch);
|
||||
setIsModalOpen(true); // update state immediately
|
||||
};
|
||||
window.history.pushState({}, "", pathname + newSearch);
|
||||
setIsModalOpen(true); // update state immediately
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
let search = location.search
|
||||
.replace(/[?&]auditStatus\b/, "")
|
||||
.replace(/^&/, "?")
|
||||
.replace(/\?$/, "");
|
||||
const closeModal = () => {
|
||||
let search = location.search
|
||||
.replace(/[?&]auditStatus\b/, "")
|
||||
.replace(/^&/, "?")
|
||||
.replace(/\?$/, "");
|
||||
|
||||
window.history.pushState({}, "", location.pathname + search);
|
||||
setIsModalOpen(false); // update state immediately
|
||||
};
|
||||
window.history.pushState({}, "", location.pathname + search);
|
||||
setIsModalOpen(false); // update state immediately
|
||||
};
|
||||
|
||||
console.log(transactionDetails, "line 37");
|
||||
|
||||
|
|
@ -89,22 +87,8 @@ const TransactionView = () => {
|
|||
}
|
||||
}
|
||||
|
||||
const fetchDocuments = async () => {
|
||||
try {
|
||||
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) {
|
||||
let resDoc = res?.data
|
||||
setDocumentsData(resDoc)
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchData()
|
||||
fetchDocuments()
|
||||
}, [accountId, transactionId])
|
||||
|
||||
|
||||
|
|
@ -116,7 +100,7 @@ const TransactionView = () => {
|
|||
<>
|
||||
{transactionDetails &&
|
||||
<>
|
||||
<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='mt-2 flex justify-center items-stretch w-full h-full bg-white rounded-sm'>
|
||||
<div className="w-full px-6 py-4 rounded-tl-sm text-xs border-r-2 border-gray-200 overflow-y-auto">
|
||||
{/* Header */}
|
||||
<h1 className='text-lg font-semibold text-gray-800'>
|
||||
|
|
@ -148,7 +132,7 @@ const TransactionView = () => {
|
|||
{/* <Link className='cursor-pointer border text-green-700 border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' to={`/process-step-two/${accountId}/${transactionId}`}>
|
||||
Edit
|
||||
</Link> */}
|
||||
<button className='cursor-pointer border text-[var(--primary)] border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' onClick={handleOpenAuditModal}>
|
||||
<button className='cursor-pointer border text-green-700 border-gray-300 rounded-sm px-4 py-1 hover:bg-gray-100 font-bold' onClick={handleOpenAuditModal}>
|
||||
Audit
|
||||
</button>
|
||||
|
||||
|
|
@ -219,25 +203,22 @@ const TransactionView = () => {
|
|||
</div>}
|
||||
</div>
|
||||
|
||||
<div className='lg:w-[15vw] sm:w-[20vw] text-xs rounded-sm max-h-[88vh] overflow-y-auto no-scrollbar'>
|
||||
{documentsData.map((docsD, index) => (
|
||||
<div className='p-4 flex flex-col gap-2 cursor-pointer' key={docsD.id}>
|
||||
<p>{docsD.name}</p>
|
||||
<div className='border-3 rounded-sm border-slate-300 relative text-xs'>
|
||||
{docsD?.pages[0]?.src ?
|
||||
<img style={{ width: "200px", height: "160px" }} src={docsD?.pages[0]?.src} 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]'>
|
||||
<p className='text-[0.7rem] text-slate-500 flex justify-between items-center'>
|
||||
<span> 1 of {docsD?.pages?.length}</span>
|
||||
<span className='cursor-pointer'><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16} /></Link></span>
|
||||
</p>
|
||||
<div className='w-[210px] text-xs rounded-sm '>
|
||||
|
||||
<div className='p-4 flex flex-col gap-2'>
|
||||
<p>abc.pdf</p>
|
||||
<div className='border-3 rounded-sm border-slate-300 relative text-xs'>
|
||||
<img style={{ width: "200px", height: "160px" }} src="https://images.unsplash.com/photo-1746469535771-71a672e8719f?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
|
||||
<div className='bg-slate-100 p-2 absolute w-full bottom-[0px]'>
|
||||
<p className='text-[0.7rem] text-slate-500 flex justify-between items-center'>
|
||||
<span> 1 of 10</span>
|
||||
<span className='cursor-pointer'><Link to={`/process-step-two/${accountId}/${transactionId}`}><MdEditDocument size={16} /></Link></span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue