From c94ebd72a225470f522db759e5fb735af73fd1af Mon Sep 17 00:00:00 2001
From: =bhagwanSingh <=bhagwan.r@hicglobalsolutions.com>
Date: Wed, 8 Oct 2025 15:32:50 +0530
Subject: [PATCH] 08-10 - Latest

---
 .env                                          |   4 +-
 src/components/signature/ClientSignCon.tsx    | 107 +++++++++---------
 .../transactions/TransactionView.tsx          |   4 +-
 3 files changed, 58 insertions(+), 57 deletions(-)

diff --git a/.env b/.env
index 03d87bb..36e2149 100644
--- a/.env
+++ b/.env
@@ -6,5 +6,5 @@
 # VITE_BASE_URI="https://smashing-albacore-engaging.ngrok-free.app"
 # VITE_BASE_URI="https://basically-polished-yeti.ngrok-free.app"
 # VITE_BASE_URI="https://sacha-countryfied-evolutionistically.ngrok-free.dev"
-VITE_BASE_URI="http://52.10.89.255"
-VITE_SSE_URI="http://52.10.89.255"
\ No newline at end of file
+VITE_BASE_URI="https://web.signmadeasy.app"
+VITE_SSE_URI="https://web.signmadeasy.app"
\ No newline at end of file
diff --git a/src/components/signature/ClientSignCon.tsx b/src/components/signature/ClientSignCon.tsx
index 4b0be13..6f5b823 100644
--- a/src/components/signature/ClientSignCon.tsx
+++ b/src/components/signature/ClientSignCon.tsx
@@ -703,77 +703,78 @@ const ClientSignCon: React.FC<ClientSignConProps> = ({
 
             case 'SAVED':
                 return (
-                    <div className="h-full flex flex-col ">
-                        <div className="mb-6">
-                            <h2 className="text-xl font-semibold text-gray-900 mb-2">Saved Signature's</h2>
-                            {/* <p className="text-sm text-gray-600">Select from pre-designed signature styles</p> */}
+                    <div className="h-full flex flex-col">
+                        {/* Header */}
+                        <div className="mb-6 px-4 sm:px-6">
+                            <h2 className="text-2xl font-semibold text-gray-900 mb-2">Saved Signatures</h2>
+                            <p className="text-sm text-gray-600">Select from your pre-saved signatures</p>
                         </div>
 
-                        <div className="flex-1 overflow-y-auto">
+                        {/* Signatures List */}
+                        <div className="flex-1 overflow-y-auto px-2 sm:px-6">
                             <div className="space-y-4">
                                 {preSaveSignatures.map((signature) => (
-                                    <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 */}
-                                        <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="text-sm text-gray-600 font-medium mb-1">
-                                                    Signed by:
-                                                </div>
+                                    <div
+                                        key={signature?.id}
+                                        className="flex flex-col md:flex-row md:space-x-4 bg-white rounded-xl border border-gray-200 p-4 hover:shadow-lg transition-shadow duration-200"
+                                    >
+                                        {/* Full Signature */}
+                                        <div className="flex-1 flex flex-col space-y-2 border-l-4 border-blue-500 rounded-l-xl pl-4 md:pl-6 py-2">
+                                            <span className="text-sm font-medium text-gray-600">Signed by:</span>
 
-                                                {/* Signature Image or Fallback Text */}
-                                                <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>
-
-                                                {/* Name */}
-                                                <div className="text-xs text-gray-500 truncate">
-                                                    {signature?.signatureHash ?? ' '}
-                                                </div>
+                                            <div className="bg-gray-50 rounded-lg p-2 flex items-center justify-center min-h-[50px]">
+                                                {signature?.signatureType !== 'SELECT' && signature?.signatureBlob ? (
+                                                    <img
+                                                        src={`data:${signature?.signatureMimeType};base64,${signature?.signatureBlob}`}
+                                                        className="max-h-[60px] w-full object-contain"
+                                                        alt={`${signature?.firstName ?? ''} ${signature?.lastName ?? ''} signature`}
+                                                    />
+                                                ) : (
+                                                    renderSignatureText(
+                                                        signature?.signatureType,
+                                                        signature?.font,
+                                                        signature?.firstName,
+                                                        signature?.lastName,
+                                                        'name'
+                                                    )
+                                                )}
                                             </div>
+
+                                            <span className="text-xs text-gray-500 truncate">{signature?.signatureHash ?? ' '}</span>
                                         </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">
-                                                <div className="text-sm text-gray-600 font-medium mb-1">
-                                                    Initials
-                                                </div>
+                                        {/* Initials */}
+                                        <div className="flex-1 flex flex-col space-y-2 border-l-4 border-green-500 rounded-l-xl pl-4 md:pl-6 py-2 mt-4 md:mt-0">
+                                            <span className="text-sm font-medium text-gray-600">Initials</span>
 
-                                                {/* Initials Image */}
-                                                <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>
-
-                                                {/* Optional initials hash or font */}
-                                                <div className="text-xs text-gray-500 truncate">
-                                                    {signature?.initialsHash || " "}
-                                                </div>
+                                            <div className="bg-gray-50 rounded-lg p-2 flex items-center justify-center min-h-[50px]">
+                                                {signature?.signatureType !== 'SELECT' && signature?.initialsBlob ? (
+                                                    <img
+                                                        src={`data:${signature?.initialsMimeType};base64,${signature?.initialsBlob}`}
+                                                        className="max-h-[60px] w-full object-contain"
+                                                        alt={`${signature?.firstName ?? ''} ${signature?.lastName ?? ''} initials`}
+                                                    />
+                                                ) : (
+                                                    renderSignatureText(
+                                                        signature?.signatureType,
+                                                        signature?.font,
+                                                        signature?.firstName,
+                                                        signature?.lastName,
+                                                        'initials'
+                                                    )
+                                                )}
                                             </div>
+
+                                            <span className="text-xs text-gray-500 truncate">{signature?.initialsHash ?? ' '}</span>
                                         </div>
                                     </div>
                                 ))}
-
                             </div>
                         </div>
                     </div>
                 );
 
+
             default:
                 return null;
         }
diff --git a/src/components/transactions/TransactionView.tsx b/src/components/transactions/TransactionView.tsx
index 404af8e..895e324 100644
--- a/src/components/transactions/TransactionView.tsx
+++ b/src/components/transactions/TransactionView.tsx
@@ -205,8 +205,8 @@ const TransactionView = () => {
                                                         {"message" in recipient && <p className="text-xs text-gray-500 italic">
                                                             {recipient.message}
                                                         </p>}
-                                                        {"declineReason" in recipient && <p className="text-xs text-gray-500 italic">
-                                                            {recipient.declineReason}
+                                                        {"declinedReason" in recipient && <p className="text-xs text-gray-500 italic">
+                                                            {recipient.declinedReason}
                                                         </p>}
                                                     </div>
                                                 </div>