From fe31012952458dd55f92dd8459e6bcda75e223ae Mon Sep 17 00:00:00 2001
From: Anil_Kumar_Majji <106086523+Anil-kumar-Majji@users.noreply.github.com>
Date: Fri, 10 Jan 2025 15:18:28 +0530
Subject: [PATCH] MOSIP-37610: UI Enhancements Applicable for all Partners and
 Partner Admin screens

Signed-off-by: Anil_Kumar_Majji <106086523+Anil-kumar-Majji@users.noreply.github.com>
---
 .../admin/certificates/ViewCertificateDetails.js      |  4 ++--
 .../deviceProviderServices/ViewAdminSbiDetails.js     | 10 +++++-----
 .../src/pages/admin/partners/ViewPartnerDetails.js    | 11 ++++++++---
 .../partner/certificates/PartnerCertificatesList.js   |  7 +++++--
 .../pages/partner/deviceProviderServices/SbiList.js   |  4 ++--
 .../partner/ftmProviderServices/ViewFtmChipDetails.js |  2 +-
 6 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/pmp-revamp-ui/src/pages/admin/certificates/ViewCertificateDetails.js b/pmp-revamp-ui/src/pages/admin/certificates/ViewCertificateDetails.js
index e157e172..4630c985 100644
--- a/pmp-revamp-ui/src/pages/admin/certificates/ViewCertificateDetails.js
+++ b/pmp-revamp-ui/src/pages/admin/certificates/ViewCertificateDetails.js
@@ -166,8 +166,8 @@ function ViewCertificateDetails() {
                                             </p>
                                         </div>
                                         <div className={`flex-col ${isLoginLanguageRTL ? "mr-[5%]" : "ml-[5%]"} space-y-1`}>
-                                            <p id="trust_certificate_label_expiry_date_time" className={`text-sm font-semibold ${!viewCertDetails.status ? 'text-crimson-red' : 'text-dim-gray font-semibold'}`}>{t('viewCertificateDetails.validTo')}</p>
-                                            <p id="trust_certificate_context_expiry_date_time" className={`text-md ${!viewCertDetails.status ? 'text-black font-bold' : 'text-charcoal-gray font-semibold'}`}>
+                                            <p id="trust_certificate_label_expiry_date_time" className={`text-sm font-semibold text-dim-gray`}>{t('viewCertificateDetails.validTo')}</p>
+                                            <p id="trust_certificate_context_expiry_date_time" className={`text-md ${!viewCertDetails.status ? 'text-crimson-red font-bold' : 'text-charcoal-gray font-semibold'}`}>
                                                 {formatDate(viewCertDetails.validTillDate, 'dateTime', true)}
                                             </p>
                                         </div>
diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js
index 7c425209..c099f561 100644
--- a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js
+++ b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js
@@ -67,7 +67,7 @@ function ViewAdminSbiDetails() {
                                     </div>
                                     <div className={`font-semibold ${isLoginLanguageRTL ? "mr-[1.4rem]" : "ml-[0.75rem]"} text-sm text-dark-blue`}>
                                         {t("viewOidcClientDetails.createdOn") + ' ' +
-                                        formatDate(sbiDetails.createdDateTime, "date", true)}
+                                            formatDate(sbiDetails.createdDateTime, "date", true)}
                                     </div>
                                     <div className="mx-2 text-gray-300">|</div>
                                     <div className="font-semibold text-sm text-dark-blue">
@@ -115,15 +115,15 @@ function ViewAdminSbiDetails() {
                                         {t("viewSbiDetails.sbiCreatedDate")}
                                     </p>
                                     <p className="font-[600] text-vulcan text-md">
-                                    {formatDate(sbiDetails.sbiCreatedDateTime, "date", false)}
+                                        {formatDate(sbiDetails.sbiCreatedDateTime, "date", false)}
                                     </p>
                                 </div>
                                 <div className={`mb-5 max-[600px]:w-[100%] w-[48%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>
-                                    <p className={`font-[600] text-sm ${(sbiDetails.sbiExpiryStatus === 'expired') ? 'text-crimson-red' : 'text-suva-gray' }`}>
+                                    <p className={`font-[600] text-sm`}>
                                         {t("viewSbiDetails.sbiExpiryDate")}
                                     </p>
-                                    <p className={`${(sbiDetails.sbiExpiryStatus === 'expired') && 'text-black'} font-[600] text-vulcan text-md`}>
-                                    {formatDate(sbiDetails.sbiExpiryDateTime, "date", false)}
+                                    <p className={`${(sbiDetails.sbiExpiryStatus === 'expired') ? 'text-crimson-red' : 'text-vulcan'} font-[600] text-md`}>
+                                        {formatDate(sbiDetails.sbiExpiryDateTime, "date", false)}
                                     </p>
                                 </div>
                                 <div className={`mb-5 max-[600px]:w-[100%] w-[48%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>
diff --git a/pmp-revamp-ui/src/pages/admin/partners/ViewPartnerDetails.js b/pmp-revamp-ui/src/pages/admin/partners/ViewPartnerDetails.js
index 3cb3fac0..517d4f9a 100644
--- a/pmp-revamp-ui/src/pages/admin/partners/ViewPartnerDetails.js
+++ b/pmp-revamp-ui/src/pages/admin/partners/ViewPartnerDetails.js
@@ -2,8 +2,10 @@ import React, { useState, useEffect, useRef } from 'react';
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { getUserProfile } from '../../../services/UserProfileService';
-import { downloadFile, formatDate, getPartnerManagerUrl, getCertificate,
-     handleMouseClickForDropdown, handleServiceErrors, isLangRTL, getErrorMessage, getPartnerTypeDescription } from '../../../utils/AppUtils';
+import {
+    downloadFile, formatDate, getPartnerManagerUrl, getCertificate,
+    handleMouseClickForDropdown, handleServiceErrors, isLangRTL, getErrorMessage, getPartnerTypeDescription
+} from '../../../utils/AppUtils';
 import SuccessMessage from '../../common/SuccessMessage';
 import ErrorMessage from '../../common/ErrorMessage';
 import Title from '../../common/Title';
@@ -23,6 +25,7 @@ function ViewPartnerDetails() {
     const [downloadBtnId, setDownloadBtnId] = useState(false);
     const [unexpectedError, setUnexpectedError] = useState(false);
     const [partnerDetails, setPartnerDetails] = useState(true);
+    const [certificateExpiryStatus, setcertificateExpiryStatus] = useState('');
     const [errorCode, setErrorCode] = useState("");
     const [errorMsg, setErrorMsg] = useState("");
     const [successMsg, setSuccessMsg] = useState("");
@@ -73,6 +76,7 @@ function ViewPartnerDetails() {
         if (response) {
             if (response.isCaSignedCertificateExpired) {
                 setErrorMsg(t('partnerCertificatesList.certificateExpired'));
+                setcertificateExpiryStatus(response.isCaSignedCertificateExpired);
             } else {
                 setSuccessMsg(t('viewPartnerDetails.originalCertificateSuccessMsg'));
                 downloadFile(response.caSignedCertificateData, 'ca_signed_partner_certificate.cer', 'application/x-x509-ca-cert')
@@ -85,6 +89,7 @@ function ViewPartnerDetails() {
         if (response) {
             if (response.isMosipSignedCertificateExpired) {
                 setErrorMsg(t('partnerCertificatesList.certificateExpired'));
+                setcertificateExpiryStatus(response.isCaSignedCertificateExpired);
             } else {
                 setSuccessMsg(t('partnerCertificatesList.mosipSignedCertificateSuccessMsg'));
                 downloadFile(response.mosipSignedCertificateData, 'mosip_signed_certificate.cer', 'application/x-x509-ca-cert')
@@ -277,7 +282,7 @@ function ViewPartnerDetails() {
                                                 </div>
                                                 <div className={`flex-col ${isLoginLanguageRTL ? "mr-[5%]" : "ml-[5%]"} space-y-1`}>
                                                     <p className="font-semibold text-sm text-dim-gray">{t('viewPartnerDetails.expiryDate')}</p>
-                                                    <p className="font-semibold text-md text-charcoal-gray">{formatDate(partnerDetails.certificateExpiryDateTime, "dateTime", false)}</p>
+                                                    <p className={`font-semibold text-md ${certificateExpiryStatus ? ' text-crimson-red' : 'text-charcoal-gray'}`}>{formatDate(partnerDetails.certificateExpiryDateTime, "dateTime", false)}</p>
                                                 </div>
                                                 <div className={`flex-col ${isLoginLanguageRTL ? "mr-[10%]" : "ml-[10%]"} space-y-1`}>
                                                     <p className="font-semibold text-sm text-dim-gray">{t('partnerCertificatesList.timeOfUpload')}</p>
diff --git a/pmp-revamp-ui/src/pages/partner/certificates/PartnerCertificatesList.js b/pmp-revamp-ui/src/pages/partner/certificates/PartnerCertificatesList.js
index 8e2327c2..513fae7f 100644
--- a/pmp-revamp-ui/src/pages/partner/certificates/PartnerCertificatesList.js
+++ b/pmp-revamp-ui/src/pages/partner/certificates/PartnerCertificatesList.js
@@ -21,7 +21,8 @@ function PartnerCertificatesList() {
     const [downloadBtnId, setDownloadBtnId] = useState(-1);
     const [showPopup, setShowPopup] = useState(false);
     const [selectedPartnerData, setSelectedPartnerData] = useState(null);
-    const [certificatesData, setCertificatesData] = useState([]);
+    const [certificatesData, setCertificatesData] = useState([]);  
+    const [certificateExpiryStatus, setcertificateExpiryStatus] = useState('');
     const [errorCode, setErrorCode] = useState("");
     const [errorMsg, setErrorMsg] = useState("");
     const [successMsg, setSuccessMsg] = useState("");
@@ -64,6 +65,7 @@ function PartnerCertificatesList() {
         if (response) {
             if (response.isCaSignedCertificateExpired) {
                 setErrorMsg(t('partnerCertificatesList.certificateExpired'));
+                setcertificateExpiryStatus(response.isCaSignedCertificateExpired);
             } else {
                 setSuccessMsg(t('partnerCertificatesList.originalCertificateSuccessMsg'));
                 downloadFile(response.caSignedCertificateData, 'ca_signed_partner_certificate.cer', 'application/x-x509-ca-cert')
@@ -76,6 +78,7 @@ function PartnerCertificatesList() {
         if (response) {
             if (response.isMosipSignedCertificateExpired) {
                 setErrorMsg(t('partnerCertificatesList.certificateExpired'));
+                setcertificateExpiryStatus(response.isCaSignedCertificateExpired);
             } else {
                 setSuccessMsg(t('partnerCertificatesList.mosipSignedCertificateSuccessMsg'));
                 downloadFile(response.mosipSignedCertificateData, 'mosip_signed_certificate.cer', 'application/x-x509-ca-cert')
@@ -226,7 +229,7 @@ function PartnerCertificatesList() {
                                                 </div>
                                                 <div className={`flex-col ${isLoginLanguageRTL ? "mr-[5%]" : "ml-[5%]"}`}>
                                                     <p className="font-semibold text-xs text-dim-gray">{t('partnerCertificatesList.expiryDate')}</p>
-                                                    <p className="font-semibold text-sm text-charcoal-gray">{formatDate(partner.certificateExpiryDateTime, 'dateTime', false)}</p>
+                                                    <p className={`font-semibold text-sm ${certificateExpiryStatus ? ' text-crimson-red' : 'text-charcoal-gray'}`}>{formatDate(partner.certificateExpiryDateTime, 'dateTime', false)}</p>
                                                 </div>
                                                 <div className={`flex-col ${isLoginLanguageRTL ? "mr-[10%]" : "ml-[10%]"}`}>
                                                     <p className="font-semibold text-xs text-dim-gray">{t('partnerCertificatesList.timeOfUpload')}</p>
diff --git a/pmp-revamp-ui/src/pages/partner/deviceProviderServices/SbiList.js b/pmp-revamp-ui/src/pages/partner/deviceProviderServices/SbiList.js
index c21812ad..cbc13104 100644
--- a/pmp-revamp-ui/src/pages/partner/deviceProviderServices/SbiList.js
+++ b/pmp-revamp-ui/src/pages/partner/deviceProviderServices/SbiList.js
@@ -272,8 +272,8 @@ function SbiList() {
                                                                 <p className="text-sm text-vulcan">{formatDate(sbi.sbiCreatedDateTime, 'date', false)}</p>
                                                             </div>
                                                             <div className={`flex flex-col w-1/3 max-[530px]:w-full`}>
-                                                                <p className={`text-xs ${(sbi.status !== "deactivated" && sbi.sbiExpired) ? 'text-red-700 font-bold' : 'text-suva-gray'} `}>{t('sbiList.sbiExpiryDate')}</p>
-                                                                <p className={`text-sm text-vulcan ${(sbi.status !== "deactivated" && sbi.sbiExpired) ? 'font-bold' : ''} `}>{formatDate(sbi.sbiExpiryDateTime, 'date', false)}</p>
+                                                                <p className={'text-xs text-suva-gray'}>{t('sbiList.sbiExpiryDate')}</p>
+                                                                <p className={`text-sm text-vulcan ${!(sbi.status !== "deactivated" && sbi.sbiExpired) ? 'font-bold text-crimson-red' : ''} `}>{formatDate(sbi.sbiExpiryDateTime, 'date', false)}</p>
                                                             </div>
                                                         </div>
                                                     </div>
diff --git a/pmp-revamp-ui/src/pages/partner/ftmProviderServices/ViewFtmChipDetails.js b/pmp-revamp-ui/src/pages/partner/ftmProviderServices/ViewFtmChipDetails.js
index 91491abb..f3dd84b2 100644
--- a/pmp-revamp-ui/src/pages/partner/ftmProviderServices/ViewFtmChipDetails.js
+++ b/pmp-revamp-ui/src/pages/partner/ftmProviderServices/ViewFtmChipDetails.js
@@ -286,7 +286,7 @@ function ViewFtmChipDetails() {
                                         </div>
                                         <div className={`flex-col ${isLoginLanguageRTL ? "mr-[5%]" : "ml-[5%]"} space-y-1`}>
                                             <p id="ftm_chip_details_label_expiry_date_time" className={`font-semibold text-xs text-dim-gray font-semibold'}`}>{t('partnerCertificatesList.expiryDate')}</p>
-                                            <p id="ftm_chip_details_context_expiry_date_time" className={`font-semibold text-sm ${ftmDetails.isCertificateExpired ? 'text-red-700 font-bold' : 'text-charcoal-gray font-semibold'}`}>
+                                            <p id="ftm_chip_details_context_expiry_date_time" className={`font-semibold text-sm ${ftmDetails.isCertificateExpired ? 'text-crimson-red font-bold' : 'text-charcoal-gray font-semibold'}`}>
                                                 {formatDate(ftmDetails.certificateExpiryDateTime, 'dateTime', false)}
                                             </p>
                                         </div>