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

completion-screen-2 #5

Merged
jaipandey merged 1 commits from jai into master 2025-07-15 10:43:54 +00:00
Conversation 0 Commits 1 Files Changed 1 +20 -18
1 changed files with 20 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,7 +32,7 @@ type Signer = {
// Signers List Component // Signers List Component
const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => { const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
return ( return (
<div className="bg-white rounded-md shadow-sm border border-gray-200"> <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-between mb-4">
<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">
@ -46,7 +46,7 @@ const SignersList: React.FC<{ signers: Signer[] }> = ({ signers }) => {
<div className="space-y-3 max-h-[29vh] overflow-y-auto no-scrollbar"> <div className="space-y-3 max-h-[29vh] overflow-y-auto no-scrollbar">
{signers.map((signer) => ( {signers.map((signer) => (
<div key={signer.id} className="flex items-center gap-4 p-3 bg-gray-50 rounded-lg"> <div key={signer.id} className="flex items-center gap-4 p-3 bg-white/40 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.split(" ").map(n => n[0].toUpperCase()).join("")} {signer.name.split(" ").map(n => n[0].toUpperCase()).join("")}
</div> </div>
@ -107,10 +107,10 @@ const SigningOrderDiagram: React.FC<{ signers: Signer[] }> = ({ signers }) => {
) || -1; ) || -1;
return ( return (
<div className="bg-white rounded-md shadow-sm border border-gray-200"> <div className="bg-white/60 rounded-md shadow-sm border border-gray-100">
<div className="p-6"> <div className="p-6">
<h3 className="text-lg font-semibold text-gray-800 mb-4">Signing Flow</h3> <h3 className="text-lg font-semibold text-gray-800 mb-4">Signing Flow</h3>
<div className="overflow-x-auto overflow-y-auto max-h-96 no-scrollbar "> <div className="overflow-x-auto overflow-y-auto h-[69vh] no-scrollbar flex justify-center items-center">
<div className="flex justify-center items-center gap-4 min-w-max"> <div className="flex justify-center items-center gap-4 min-w-max">
{/* Mail icon */} {/* Mail icon */}
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
@ -280,23 +280,23 @@ const DocumentCompletionScreen = () => {
<div className="min-h-screen bg-[var(--mainViewBg)]"> <div className="min-h-screen bg-[var(--mainViewBg)]">
{/* Top Banner */} {/* Top Banner */}
<div className="bg-[var(--primary)] text-white shadow-lg"> <div className="w-full px-6 py-2 bg-white border-b rounded-sm border-gray-200">
<div className="max-w-[97vw] mx-auto px-2 py-2.5"> <div className="max-w-[97vw] mx-auto px-2 py-2.5">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Link to='/' className="w-5 h-5 rounded-full flex items-center justify-center"> <Link to='/' className="w-5 h-5 text-green-700 rounded-full flex items-center justify-center">
<IoMdHome className="text-xl" /> <IoMdHome className="h-10 w-10" />
</Link> </Link>
<div className="w-5 h-5 bg-white/20 rounded-full flex items-center justify-center"> {/* <div className="w-5 h-5 bg-white text-green-800 rounded-full flex items-center justify-center">
<FaCheck className="text-sm" /> <FaCheck className="text-sm" />
</div> </div> */}
<div> <div>
<h2 className="text-lg font-bold text-white/80">Awesome! Your document is sent for signature</h2> <h2 className="text-md font-semibold text-gray-900">Awesome! Your document is sent for signature</h2>
</div> </div>
</div> </div>
<Link to={`/accounts/${accountId}/transactions/${transactionId}`} className="flex items-center gap-1 cursor-pointer bg-white text-green-600 px-2.5 py-1 rounded-md font-semibold hover:bg-gray-100 transition-colors"> <Link to={`/accounts/${accountId}/transactions/${transactionId}`} className="flex items-center gap-2 cursor-pointer text-xs px-4 py-2 ml-3 rounded-sm bg-[var(--primary)]">
<FaPen className="text-[10px]" /> <FaPen className=" text-white text-md" />
<span className="text-[13px]">Edit</span> <span className="tracking-wide text-white">Edit</span>
</Link> </Link>
</div> </div>
</div> </div>
@ -307,12 +307,12 @@ const DocumentCompletionScreen = () => {
{/* Header */} {/* Header */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-2"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-2">
{/* Left Section - Document Details */} {/* Left Section - Document Details */}
<div className="lg:col-span-5 space-y-3"> <div className="lg:col-span-6 space-y-2">
{/* Document Preview Card */} {/* Document Preview Card */}
<div className="bg-white rounded-md shadow-sm border border-gray-200 overflow-hidden max-h-[88vh] no-scrollbar overflow-y-auto"> <div className="bg-white/60 rounded-md shadow-sm border border-gray-100 overflow-hidden max-h-[88vh] no-scrollbar overflow-y-auto">
<div className="p-3 "> <div className="p-3 ">
{selectedDocuments?.map((item, index) => ( {selectedDocuments?.map((item, index) => (
<div key={item.id} className="flex items-start justify-between mb-2 px-2 py-3 bg-gray-50"> <div key={item.id} className="flex items-start justify-between mb-2 px-2 py-3">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center"> <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
{/* <FaFileAlt className="text-blue-600 text-xl" /> */} {/* <FaFileAlt className="text-blue-600 text-xl" /> */}
@ -332,15 +332,17 @@ const DocumentCompletionScreen = () => {
))} ))}
</div> </div>
</div> </div>
<div><SignersList signers={selectedRecipients} /></div>
</div> </div>
{/* Right Section - Signer Components */} {/* Right Section - Signer Components */}
<div className="lg:col-span-7 space-y-1.5"> <div className="lg:col-span-6 space-y-1.5">
{/* Signing Order Diagram */} {/* Signing Order Diagram */}
<SigningOrderDiagram signers={selectedRecipients} /> <SigningOrderDiagram signers={selectedRecipients} />
{/* Signers List */} {/* Signers List */}
<SignersList signers={selectedRecipients} />
</div> </div>
</div> </div>
</div> </div>