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

Merge pull request 'modal bg completions screen contact table transaction-view home page grid etc' (#19) from jai into main 

Reviewed-on: http://git.hicglobalsolutions.in/BhawanSingh/SME-Web/pulls/19
This commit is contained in:
jaipandey 2025-08-18 14:31:01 +00:00
parent 467bc0266f d7dbf906b2
commit 13885abfda
17 changed files with 359 additions and 343 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/CommonNav.tsx
View File

@ -301,7 +301,7 @@ const CommonNav: React.FC<AccountNavProps> = () => {
aria-expanded={open} aria-expanded={open}
aria-haspopup="true" aria-haspopup="true"
> >
<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"> <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">
{user ? ( {user ? (
<span className="w-full h-full object-cover p-1.5 font-bold"> <span className="w-full h-full object-cover p-1.5 font-bold">
{(user?.name?.slice(0, 2)).toUpperCase()} {(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="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="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="flex items-center space-x-3">
<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"> <div className="w-12 h-12 rounded-full overflow-hidden bg-gradient-to-br from-[var(--primary)] to-blue-600 flex items-center justify-center text-white font-semibold shadow-md">
{user ? ( {user ? (
<span className="w-full h-full object-cover px-3 text-xl py-2.5 font-bold"> <span className="w-full h-full object-cover px-3 text-xl py-2.5 font-bold">
{(user?.name?.slice(0, 2)).toUpperCase()} {(user?.name?.slice(0, 2)).toUpperCase()}

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

@ -92,12 +92,14 @@ const TransactionDataTable = () => {
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"> <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
{/* Header */} {/* Header */}
{location.pathname !== '/transactions' &&
<div className="flex justify-between items-center px-6 py-4 border-b border-gray-100"> <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> <h2 className="text-sm font-semibold text-gray-800">Recent Transactions</h2>
</div> <span className=' text-[var(--primary)] text-xs hover:underline cursor-pointer font-semibold'>View all</span>
</div>}
{/* Scrollable Table Container */} {/* Scrollable Table Container */}
<div className="overflow-auto max-h-[67vh] no-scrollbar"> <div className={`overflow-auto no-scrollbar ${location.pathname === '/transactions' ? "min-h-[76vh] max-h-[76vh]" : "min-h-[70vh] max-h-[70vh]"}`}>
<table className="w-full text-sm"> <table className="w-full text-sm">
{/* Sticky Header */} {/* Sticky Header */}
<thead className="bg-gray-50 sticky top-0 z-10"> <thead className="bg-gray-50 sticky top-0 z-10">

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

@ -126,7 +126,7 @@ const Contacts = () => {
setShowModal((prev) => !prev); setShowModal((prev) => !prev);
setActionStatus("Add") setActionStatus("Add")
}} }}
className="flex items-center gap-2 bg-[var(--mainPrimaryBtn)] px-3 py-1.5 rounded-sm hover:opacity-90 "> 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 ">
<IoMdAdd className="text-white" /> <IoMdAdd className="text-white" />
<button <button
className="text-white rounded text-sm hover:opacity-90 cursor-pointer"> className="text-white rounded text-sm hover:opacity-90 cursor-pointer">
@ -134,17 +134,17 @@ const Contacts = () => {
</button> </button>
</div> </div>
</div> </div>
<div className="overflow-y-auto mx-2 max-h-[79vh] rounded-xl shadow-sm border border-gray-100 no-scrollbar"> <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-white"> <table className="min-w-full text-sm bg-gray-50">
<thead className="text-gray-500 uppercase text-xs tracking-wider sticky top-0 z-10"> <thead className="text-gray-600 text-xs uppercase tracking-wider border-b border-gray-200">
<tr> <tr>
<th className="px-6 py-3 font-medium text-left">First Name</th> <th className="px-6 py-4 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-4 font-medium text-left">Last Name</th>
<th className="px-6 py-3 font-medium text-left">Email</th> <th className="px-6 py-4 font-medium text-left">Email</th>
<th className="px-6 py-3 font-medium text-center">Actions</th> <th className="px-6 py-4 font-medium text-center">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-100"> <tbody className="divide-y divide-gray-100 bg-white">
{loading ? ( {loading ? (
<tr> <tr>
<td colSpan="4" className="relative h-100"> <td colSpan="4" className="relative h-100">

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

@ -170,7 +170,7 @@ const ContactFormModal = ({
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-white/5 backdrop-blur-sm bg-opacity-50"> <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 shadow-lg relative"> <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]"> <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>
@ -262,7 +262,7 @@ const ContactFormModal = ({
type="button" type="button"
onClick={handleSubmit} onClick={handleSubmit}
disabled={loading} 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" 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 ? ( {loading ? (
<> <>

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

@ -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> <div className="z-50 absolute w-screen h-screen flex items-center justify-center bg-[var(--hideModalBg)] opacity-60"></div>
{/* Loader */} {/* Loader */}
<div className="absolute z-50 w-screen h-screen flex items-center justify-center"> <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='bg-[var(--loaderBg)] flex flex-col justify-center items-center gap-2 px-16 py-8 rounded-md shadow-lg'> <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" /> <LuSignature className="text-4xl font-bold animate-text" />
<p> <p>

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

@ -78,8 +78,9 @@ const SideBar: React.FC<SideBarProps> = ({ showSideBar, setShowSideBar }) => {
onClick={() => setShowSideBar(!showSideBar)} 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' 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(237,234,235,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(237,234,235,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' />
) : ( ) : (

2
src/components/home/StartNow.tsx
View File

@ -64,7 +64,7 @@ const StartNow = () => {
</p> </p>
<button <button
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" 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"
> >
Start Now Start Now
</button> </button>

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

@ -83,60 +83,26 @@ const StartSection = () => {
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">Upload Document</h2> <h2 className="text-sm font-semibold text-gray-800 px-1 pb-2">
Upload Document
<div className="grid grid-cols-1 gap-4 h-[12vw] mx-1"> </h2>
{/* Upload card */}
<div className="w-full">
<StartNow /> <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> </div>
<h3 className="text-sm font-medium text-gray-500">{card.title}</h3> {/* Recent Data Section */}
<p className="text-xs text-gray-700">{card.description}</p> <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-2 mt-5">
</div> <section className="w-full">
<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>
{/* <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 /> <TransactionDataTable />
</section> </section>
<section className=' col-span-6'> <section className="w-full">
<TemplateTable /> <TemplateTable />
</section> </section>
</div> </div>
{/* </section> */}
</section> </section>
); );
}; };

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

@ -48,7 +48,7 @@ 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-6 "> <div className="p-6 ">
<div className="flex items-center justify-between mb-4"> <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,25 +58,25 @@ const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
</span> </span>
</div> </div>
<div className="space-y-3 max-h-[50vh] 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="flex items-center gap-4 p-3 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">
{signer.name.length > 2 ? signer.name.split(" ").map(n => n[0].toUpperCase()).join("") : signer.email.split("").map(n => n[0].toUpperCase()).join("")} {signer.name.length > 2 ? signer.name.split(" ").map(n => n[0].toUpperCase()).join("") : signer.email.split("").map(n => n[0].toUpperCase()).join("")}
</div> </div>
<div className="flex-1"> <div className="flex-1">
<div className="font-medium text-gray-800">{signer.name}</div> <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-600">{signer.email}</div>
<div className="text-xs text-gray-500">Order: {signer.routingOrder}</div> <div className="text-xs text-gray-500">Order: {signer.routingOrder}</div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{signer.completed ? ( {signer.completed ? (
<div className="flex items-center gap-1 px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm"> <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" /> <FaCheck className="w-3 h-3" />
Signed Signed
</div> </div>
) : ( ) : (
<div className="flex items-center gap-1 px-3 py-1 bg-orange-100 text-orange-700 rounded-full text-sm"> <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" /> <FaClock className="w-3 h-3" />
Pending Pending
</div> </div>
@ -122,10 +122,11 @@ const SigningOrderDiagram: 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-6"> <div className="py-3">
<h3 className="text-lg font-semibold text-gray-800 mb-4">Signing Flow</h3> <h3 className="text-lg font-semibold text-gray-800 mb-1 text-center ">
<div className="overflow-x-auto overflow-y-auto h-[50vh] no-scrollbar flex justify-center items-center"> Signing Flow</h3>
<div className="flex justify-center items-center gap-4 min-w-max"> <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 */} {/* Mail icon */}
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<div className="bg-blue-100 p-4 rounded-full"> <div className="bg-blue-100 p-4 rounded-full">
@ -433,26 +434,25 @@ const DocumentSubmissionOptions = () => {
return ( return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50 p-6"> <div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
<div className={`max-w-6xl mx-auto transition-all duration-700 ${isVisible ? 'translate-y-0 opacity-100' : 'translate-y-8 opacity-0'}`}> <div className="flex items-center space-x-4 mb-3 bg-white w-full py-4 px-5 shadow">
{/* 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"> <Link to={'/'} className="flex items-center space-x-2 text-gray-600 hover:text-[var(--primary)] transition-colors duration-200 group">
<IoMdHome <IoMdHome
className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition' className='text-2xl text-slate-500 cursor-pointer hover:text-[var(--primary)] transition'
/> />
</Link> </Link>
<div className="h-8 w-px bg-gray-300"></div> <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> <h1 className="text-md text-gray-800">🎉 Awesome! The document’s been sent for signature. 🎉</h1>
</div> </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'}`}>
{/* Header */}
<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 "> <div className="space-y-6 ">
{/* Action Selection */}
<div className="bg-white rounded-xl shadow-sm border border-gray-200 min-h-[81vh] "> <div className="bg-white rounded-xl shadow-sm border border-gray-200 min-h-[81vh] ">
<div className="p-6"> <div className="p-6">
<h3 className="text-lg font-semibold text-gray-800 mb-4"> <h3 className="text-lg font-semibold text-gray-800 mb-4">
@ -502,7 +502,7 @@ const DocumentSubmissionOptions = () => {
</div> </div>
</div> </div>
{/* Selection indicator */}
{isSelected && ( {isSelected && (
<div className="absolute top-4 right-4"> <div className="absolute top-4 right-4">
<div className="w-6 h-6 bg-[var(--primary)] rounded-full flex items-center justify-center"> <div className="w-6 h-6 bg-[var(--primary)] rounded-full flex items-center justify-center">
@ -517,10 +517,8 @@ const DocumentSubmissionOptions = () => {
</div> </div>
</div> </div>
{/* Custom Image Section */}
</div>
{/* Right Panel - Preview */} </div>
<div className="space-y-6"> <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-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"> <div className="bg-gradient-to-r from-gray-50 to-blue-50 px-6 py-2 border-b border-gray-200">
@ -535,7 +533,25 @@ const DocumentSubmissionOptions = () => {
</div> </div>
</div> </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>
<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>
</div> </div>
); );

2
src/components/setting/ContactForm.tsx
View File

@ -213,7 +213,7 @@ const ContactForm = ({ onSubmit, loading }: Props) => {
type="button" type="button"
onClick={handleSubmit} onClick={handleSubmit}
disabled={loading} disabled={loading}
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" 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"
> >
{loading ? ( {loading ? (
<> <>

4
src/components/setting/CreateAndInvite.tsx
View File

@ -177,7 +177,7 @@ const CreateAndInvite = ({
<button <button
type="button" type="button"
onClick={handleCreateSubmit} onClick={handleCreateSubmit}
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" 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"
disabled={createAndInviteLoader} disabled={createAndInviteLoader}
> >
{createAndInviteLoader ? ( {createAndInviteLoader ? (
@ -321,7 +321,7 @@ const CreateAndInvite = ({
<button <button
type="button" type="button"
onClick={handleInviteSubmit} onClick={handleInviteSubmit}
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" 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"
disabled={createAndInviteLoader} disabled={createAndInviteLoader}
> >
{createAndInviteLoader ? ( {createAndInviteLoader ? (

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

@ -431,7 +431,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
}, []); }, []);
return ( return (
<div className="fixed inset-0 backdrop-blur-sm bg-opacity-50 flex items-center justify-center z-50 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 max-w-[80vw] h-[80vh] flex relative"> <div className="bg-white rounded-md shadow-xl w-full max-w-[80vw] h-[80vh] flex relative">
{/* Sidebar Navigation */} {/* Sidebar Navigation */}
@ -555,7 +555,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
CANCEL CANCEL
</button> </button>
<button <button
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" 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}
> >

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

@ -119,7 +119,7 @@ const SignatureManager: React.FC = () => {
<h1 className="text-[17px] font-medium text-gray-500 mb-2">Signatures</h1> <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> <p className="text-gray-300 text-sm">Add or update your name and signature styles.</p>
</div> </div>
<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}> <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}>
<FiPlus className="" /> <FiPlus className="" />
ADD ADD
</button> </button>

2
src/components/signature/SignCon.tsx
View File

@ -543,7 +543,7 @@ const AddSignatureModal: React.FC<AddSignatureModalProps> = ({
}, []); }, []);
return ( return (
<div className="fixed inset-0 backdrop-blur-sm bg-opacity-50 flex items-center justify-center z-50 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 max-w-[80vw] h-[80vh] flex relative"> <div className="bg-white rounded-md shadow-xl w-full max-w-[80vw] h-[80vh] flex relative">
{/* Sidebar Navigation */} {/* Sidebar Navigation */}

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

@ -90,28 +90,31 @@ const TemplateTable = () => {
} }
return ( return (
<> <>
<div className="overflow-y-auto max-h-[79vh] rounded-xl shadow-sm border border-gray-100 no-scrollbar"> <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<div className="flex justify-between items-center px-6 py-4 border-b border-gray-100 bg-white"> {/* 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> <h2 className="text-sm font-semibold text-gray-800">Recent Template</h2>
</div> <span className=' text-[var(--primary)] text-xs hover:underline cursor-pointer font-semibold'>View all</span>
<table className="min-w-full text-sm bg-white"> </div>}
<thead className=" sticky top-0 z-10 bg-gray-100 text-gray-600 text-xs uppercase tracking-wider border-b border-gray-200">
<tr> {/* Scrollable Table Container */}
{/* <th className="px-4 py-3 w-10 text-left font-medium"> <div className={`overflow-auto no-scrollbar ${location.pathname === '/templates' ? "min-h-[76vh] max-h-[76vh]" : "min-h-[70vh] max-h-[70vh]"}`}>
<div className="w-4 h-4 border border-slate-300 rounded flex items-center justify-center"> <table className="w-full text-sm">
<FaCheck className="text-purple-600 text-xs" /> {/* Sticky Header */}
</div> <thead className="bg-gray-50 sticky top-0 z-10">
</th> */} <tr className="text-gray-600 text-xs uppercase tracking-wider border-b border-gray-200">
<th className="px-6 py-4 font-semibold text-left">Name</th> <th className="px-6 py-4 text-left font-semibold">Name</th>
{loaction.pathname === '/templates' && (<> {location.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 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 font-semibold text-left">Use</th> </>
<th className="px-6 py-4 font-semibold text-left">Action</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>
</tr> </tr>
</thead> </thead>
{loading ? ( {loading ? (
<tbody> <tbody>
<tr> <tr>
@ -121,36 +124,45 @@ const TemplateTable = () => {
</tr> </tr>
</tbody> </tbody>
) : templates.length > 0 ? ( ) : templates.length > 0 ? (
<tbody className="divide-y divide-gray-100"> <>
{/* Scrollable Body */}
<tbody className="bg-white divide-y divide-gray-100">
{templates.map((item, index) => ( {templates.map((item, index) => (
<tr key={index} className="hover:bg-gray-50 transition-colors"> <tr
{/* <td className="px-4 py-4"> key={index}
<div className="w-4 h-4 border border-slate-300 rounded flex items-center justify-center"> className="hover:bg-gray-50 transition-colors duration-150"
<FaCheck className="text-purple-600 text-xs" />
</div>
</td> */}
<td className="px-4 py-4 text-gray-800 text-left">
{item.name || 'Untitled'}
</td>
{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)}
> >
<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]"> <td className="px-6 py-4 text-left">
Use <div className="text-gray-800 font-medium truncate max-w-xs">
</span> {item.name || 'Untitled'}
</div>
</td> </td>
{/* Action Menu */} {location.pathname === '/templates' && (
<td className="px-4 py-4 text-left"> <>
<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>
</>
)}
<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">
<div <div
className="relative inline-block" className="relative inline-block"
tabIndex={0} tabIndex={0}
@ -161,18 +173,16 @@ const TemplateTable = () => {
}} }}
> >
<button <button
className="text-gray-400 hover:text-gray-600 p-1 focus:outline-none" className="text-gray-400 hover:text-gray-600 transition-colors duration-150 p-1 rounded-md hover:bg-gray-100"
onClick={() => onClick={() =>
setShowMenu(showMenu === index ? null : index) setShowMenu(showMenu === index ? null : index)
} }
> >
<PiDotsThreeOutlineVerticalFill className="text-lg ms-4" /> <PiDotsThreeOutlineVerticalFill className="text-lg" />
</button> </button>
{showMenu === index && ( {showMenu === index && (
<div <div className="absolute -top-9 right-4 bg-white border border-gray-200 rounded-lg shadow-lg z-20 min-w-[100px]">
className="absolute -top-9 right-4 bg-white border border-gray-200 rounded-lg shadow-lg z-20 min-w-[100px]"
>
<button <button
onMouseDown={() => handleEditClick(item.id)} onMouseDown={() => handleEditClick(item.id)}
className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600" className="block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 text-blue-600"
@ -195,6 +205,7 @@ const TemplateTable = () => {
</tr> </tr>
))} ))}
</tbody> </tbody>
</>
) : ( ) : (
<tbody> <tbody>
<tr> <tr>
@ -212,6 +223,7 @@ const TemplateTable = () => {
)} )}
</table> </table>
</div> </div>
</div>
</> </>
) )
} }

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

@ -67,7 +67,7 @@ const Templates = () => {
<div <div
onClick={handleAddTemplate} onClick={handleAddTemplate}
className="flex items-center gap-2 bg-[var(--mainPrimaryBtn)] px-3 py-1.5 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" />
<button <button
className="text-white rounded text-sm hover:opacity-90"> className="text-white rounded text-sm hover:opacity-90">

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

@ -11,6 +11,7 @@ import { useSelector } from 'react-redux';
import { RootState } from '../../store/store'; import { RootState } from '../../store/store';
import { SignTypeEnum } from '../../utlity/types'; import { SignTypeEnum } from '../../utlity/types';
import AuditModal from './AuditModal'; import AuditModal from './AuditModal';
import { FaFile } from 'react-icons/fa6';
// Sample recipient data — you can replace this with actual API data later // Sample recipient data — you can replace this with actual API data later
const recipients = [ const recipients = [
@ -47,6 +48,7 @@ const TransactionView = () => {
const user = useSelector((state: RootState) => state.user) const user = useSelector((state: RootState) => state.user)
const location = useLocation(); const location = useLocation();
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [documentsData, setDocumentsData] = useState([])
useEffect(() => { useEffect(() => {
// update whenever location changes // update whenever location changes
@ -87,8 +89,22 @@ 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(() => { useEffect(() => {
fetchData() fetchData()
fetchDocuments()
}, [accountId, transactionId]) }, [accountId, transactionId])
@ -100,7 +116,7 @@ const TransactionView = () => {
<> <>
{transactionDetails && {transactionDetails &&
<> <>
<div className='mt-2 flex justify-center items-stretch w-full h-full bg-white rounded-sm'> <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="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'>
@ -132,7 +148,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}`}> {/* <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 Edit
</Link> */} </Link> */}
<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}> <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}>
Audit Audit
</button> </button>
@ -203,22 +219,25 @@ const TransactionView = () => {
</div>} </div>}
</div> </div>
<div className='w-[210px] text-xs rounded-sm '> <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'> <div className='p-4 flex flex-col gap-2 cursor-pointer' key={docsD.id}>
<p>abc.pdf</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'>
<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="" /> {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]'> <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'> <p className='text-[0.7rem] text-slate-500 flex justify-between items-center'>
<span> 1 of 10</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>
</div> </div>
</div> </div>
))}
</div> </div>