MOSIP:32721 : UI update. (#413)

* MOSIP:32721 : UI update. Signed-off-by: sudeep <[email protected]> * MOSIP:32721 : UI update. Signed-off-by: sudeep <[email protected]> * MOSIP:32721 : UI update. Signed-off-by: sudeep <[email protected]> --------- Signed-off-by: sudeep <[email protected]>
mosip · Jun 5, 2024 · dfeb288 · dfeb288
1 parent 45c58d1
commit dfeb288
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 19 deletions.
diff --git a/pmp-reactjs-ui/public/i18n/ara.json b/pmp-reactjs-ui/public/i18n/ara.json
@@ -125,7 +125,8 @@
         "comments": "تعليقات",
         "adminComments": "تعليقات المشرف",
         "partnerComments" : "تعليقات الشريك",
-        "back": "خلف"
+        "back": "خلف",
+        "createdOn": "تم إنشاؤها على"
     },
     "requestPolicy": {
         "requestPolicy": "طلب سياسة",

diff --git a/pmp-reactjs-ui/public/i18n/eng.json b/pmp-reactjs-ui/public/i18n/eng.json
@@ -125,7 +125,8 @@
         "comments": "Comments",
         "adminComments": "Admin Comments",
         "partnerComments" : "Partner's Comments",
-        "back": "Back"
+        "back": "Back",
+        "createdOn": "Created On"
     },
     "requestPolicy": {
         "requestPolicy": "Request a Policy",

diff --git a/pmp-reactjs-ui/public/i18n/fra.json b/pmp-reactjs-ui/public/i18n/fra.json
@@ -126,7 +126,8 @@
         "comments": "commentaires",
         "adminComments": "Commentaires de l'administrateur",
         "partnerComments" : "Commentaires du partenaire",
-        "back": "Dos"
+        "back": "Dos",
+        "createdOn": "Créé sur"
     },
     "requestPolicy": {
         "requestPolicy": "Demander une politique",

diff --git a/pmp-reactjs-ui/src/pages/policies/ViewPolicyDetails.js b/pmp-reactjs-ui/src/pages/policies/ViewPolicyDetails.js
@@ -13,12 +13,19 @@ function ViewPolicyDetails() {
     const [policyDetails, setPolicyDetails] = useState([]);
 
     useEffect(() => {
-            const partnerData = localStorage.getItem('selectedPolicyData');
-            if (partnerData) {
+        const partnerData = localStorage.getItem('selectedPolicyData');
+        if (partnerData) {
+            try {
                 const selectedPartner = JSON.parse(partnerData);
                 setPolicyDetails(selectedPartner);
+            } catch (error) {
+                navigate('/partnermanagement/policies');
+                console.error('Error in viewPolicyDetails page :', error);
             }
-    }, []);
+        } else {
+            navigate('/partnermanagement/policies');
+        }
+    }, [navigate]);
 
     const moveToHome = () => {
         navigate("/partnermanagement");
@@ -83,8 +90,12 @@ function ViewPolicyDetails() {
                                 {policyDetails.status}
                             </div>
                             <div className="font-medium ml-3 text-sm text-blue-900">
-                                {"Created on " +
-                                    formatDate(policyDetails.createDate, "dateTime")}
+                                {t("viewPolicyDetails.createdOn") + ' ' +
+                                    formatDate(policyDetails.createDate, "date")}
+                            </div>
+                            <div className="mx-3 text-gray-300">|</div>
+                            <div className="font-medium text-sm text-blue-900">
+                                {formatDate(policyDetails.createDate, "time")}
                             </div>
                         </div>
                     </div>
@@ -150,7 +161,8 @@ function ViewPolicyDetails() {
                             </p>
                             <div>
                                 <div className="flex font-medium w-full  ">
-                                    <span className=" w-8 h-8 rounded-full flex justify-center items-center mr-3 text-sm text-white lg:w-10 lg:h-10 ">
+                                    <span className=" w-8 h-8 rounded-full flex justify-center items-center mr-3 text-sm text-white lg:w-10 lg:h-10">
+                                        <div className="relative flex-1 after:content-['']  after:w-0.5 after:h-[4rem] after:bg-gray-200 after:inline-block after:absolute after:left-[1.2rem] after:mt-7"></div>
                                         <img src={adminImage} alt="Example" className="" />
                                     </span>
                                     <div className="flex bg-floral-white w-full flex-col p-4 relative rounded-md">
@@ -168,8 +180,14 @@ function ViewPolicyDetails() {
                                             </div>
                                             <div>
                                                 {policyDetails.updDtimes && (
-                                                    <div className="font-medium ml-3 text-sm text-blue-900">
-                                                        {"Created on " + formatDate(policyDetails.updDtimes, "dateTime")}
+                                                    <div className="flex">
+                                                        <div className="font-medium ml-3 text-sm text-blue-900">
+                                                            {formatDate(policyDetails.updDtimes, "date")}
+                                                        </div>
+                                                        <div className="mx-3 text-gray-300">|</div>
+                                                        <div className="font-medium text-sm text-blue-900">
+                                                            {formatDate(policyDetails.updDtimes, "time")}
+                                                        </div>
                                                     </div>
                                                 )}
                                             </div>
@@ -192,8 +210,12 @@ function ViewPolicyDetails() {
                                             <hr className="h-px w-full bg-gray-200 border-0 my-4" />
                                             <div className="flex items-center justify-start">
                                                 <div className="font-medium text-sm text-blue-900">
-                                                    {"Created on " +
-                                                        formatDate(policyDetails.createDate, "dateTime")}
+                                                    {t("viewPolicyDetails.createdOn") + ' ' +
+                                                        formatDate(policyDetails.createDate, "date")}
+                                                </div>
+                                                <div className="mx-3 text-gray-300">|</div>
+                                                <div className="font-medium text-sm text-blue-900">
+                                                    {formatDate(policyDetails.createDate, "time")}
                                                 </div>
                                             </div>
                                         </div>

diff --git a/pmp-reactjs-ui/src/utils/AppUtils.js b/pmp-reactjs-ui/src/utils/AppUtils.js
@@ -1,12 +1,16 @@
 export const formatDate = (dateString, format) => {
     if (!dateString) return '-';
     const date = new Date(dateString);
-    if (format === 'dateTime') {
-        return date.toLocaleString();
-    } else if (format === 'date') {
-        return date.toLocaleDateString();
-    } else {
-        return '-';
+
+    switch (format) {
+        case 'dateTime':
+            return date.toLocaleString();
+        case 'date':
+            return date.toLocaleDateString();
+        case 'time':
+            return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
+        default:
+            return '-';
     }
 };