From 2ef46fc478e3d2a5a631ac43418700385fd16dab Mon Sep 17 00:00:00 2001
From: Anil_Kumar_Majji <106086523+Anil-kumar-Majji@users.noreply.github.com>
Date: Thu, 5 Dec 2024 10:46:40 +0530
Subject: [PATCH] MOSIP-37737: UI Development of View Device Details (#991)

Signed-off-by: Anil_Kumar_Majji <106086523+Anil-kumar-Majji@users.noreply.github.com>
---
 pmp-reactjs-ui/public/i18n/ara.json           |   2 +-
 pmp-reactjs-ui/public/i18n/eng.json           |   2 +-
 pmp-reactjs-ui/public/i18n/fra.json           |   2 +-
 pmp-reactjs-ui/src/AppRoutes.js               |   5 +
 .../AdminDevicesList.js                       |   5 +
 .../ViewAdminDeviceDetails.js                 | 131 ++++++++++++++++++
 .../ViewAdminSbiDetails.js                    |   4 +-
 .../ViewDeviceDetails.js                      |   2 +-
 8 files changed, 146 insertions(+), 7 deletions(-)
 create mode 100644 pmp-reactjs-ui/src/pages/admin/deviceProviderServices/ViewAdminDeviceDetails.js

diff --git a/pmp-reactjs-ui/public/i18n/ara.json b/pmp-reactjs-ui/public/i18n/ara.json
index 5a02c24eb..8b8d82e1e 100644
--- a/pmp-reactjs-ui/public/i18n/ara.json
+++ b/pmp-reactjs-ui/public/i18n/ara.json
@@ -848,7 +848,7 @@
     },
     "viewSbiDetails": {
         "viewSbiDetails": "عرض تفاصيل الهيئة الفرعية للتنفيذ",
-        "listOfSbisAndDevices": "قائمة الهيئة الفرعية للتنفيذ",
+        "listOfSbi": "قائمة الهيئة الفرعية للتنفيذ",
         "sbiVersion":"نسخة الهيئة الفرعية للتنفيذ",
         "sbiCreatedDateTime": "تاريخ ووقت إنشاء الهيئة الفرعية للتنفيذ",
         "sbiExpiryDateTime": "تاريخ ووقت انتهاء صلاحية الهيئة الفرعية للتنفيذ"
diff --git a/pmp-reactjs-ui/public/i18n/eng.json b/pmp-reactjs-ui/public/i18n/eng.json
index 22568bfd8..cc0b7b737 100644
--- a/pmp-reactjs-ui/public/i18n/eng.json
+++ b/pmp-reactjs-ui/public/i18n/eng.json
@@ -844,7 +844,7 @@
     },
     "viewSbiDetails": {
         "viewSbiDetails": "View SBI Details",
-        "listOfSbisAndDevices": "List Of SBI",
+        "listOfSbi": "List Of SBI",
         "sbiVersion":"SBI Version",
         "sbiCreatedDateTime": "SBI Created Date & Time",
         "sbiExpiryDateTime": "SBI Expiry Date & Time"
diff --git a/pmp-reactjs-ui/public/i18n/fra.json b/pmp-reactjs-ui/public/i18n/fra.json
index c59e61288..68c6f2a46 100644
--- a/pmp-reactjs-ui/public/i18n/fra.json
+++ b/pmp-reactjs-ui/public/i18n/fra.json
@@ -848,7 +848,7 @@
     },
     "viewSbiDetails": {
         "viewSbiDetails": "Voir les détails du Sbi",
-        "listOfSbisAndDevices": "Liste des SBI",
+        "listOfSbi": "Liste des SBI",
         "sbiVersion":"Version SBI",
         "sbiCreatedDateTime": "Date et heure de création du SBI",
         "sbiExpiryDateTime": "Date et heure d’expiration du SBI"
diff --git a/pmp-reactjs-ui/src/AppRoutes.js b/pmp-reactjs-ui/src/AppRoutes.js
index cdbe83c57..ad4844eb5 100644
--- a/pmp-reactjs-ui/src/AppRoutes.js
+++ b/pmp-reactjs-ui/src/AppRoutes.js
@@ -46,6 +46,7 @@ import ViewAdminFtmChipDetails from './pages/admin/ftmProviderServices/ViewAdmin
 import AdminSbiList from './pages/admin/deviceProviderServices/AdminSbiList.js';
 import AdminDevicesList from './pages/admin/deviceProviderServices/AdminDevicesList.js';
 import ViewAdminSbiDetails from './pages/admin/deviceProviderServices/ViewAdminSbiDetails.js';
+import ViewAdminDeviceDetails from './pages/admin/deviceProviderServices/ViewAdminDeviceDetails.js';
 
 function AppRoutes() {
 
@@ -250,6 +251,10 @@ function AppRoutes() {
           path: 'admin/device-provider-services/view-sbi-details',
           element: <GuardedRoute><MainLayout><ViewAdminSbiDetails /></MainLayout></GuardedRoute>
         },
+        {
+          path: 'admin/device-provider-services/view-device-details',
+          element: <GuardedRoute><MainLayout><ViewAdminDeviceDetails /></MainLayout></GuardedRoute>
+        },
         {
           path: 'runtimeError',
           element: <RuntimeError />,
diff --git a/pmp-reactjs-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js b/pmp-reactjs-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js
index 2a08a17a4..a355375e4 100644
--- a/pmp-reactjs-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js
+++ b/pmp-reactjs-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js
@@ -30,6 +30,11 @@ function AdminDevicesList () {
         { id: "action", headerNameKey: 'devicesList.action' }
     ];
 
+    const viewDeviceDetails = (selectedDevice) => {
+        localStorage.setItem('selectedDeviceAttributes',JSON.stringify(selectedDevice));
+        navigate("/partnermanagement/admin/device-provider-services/view-device-details");
+    };
+
     const cancelErrorMsg = () => {
         setErrorMsg("");
     };
diff --git a/pmp-reactjs-ui/src/pages/admin/deviceProviderServices/ViewAdminDeviceDetails.js b/pmp-reactjs-ui/src/pages/admin/deviceProviderServices/ViewAdminDeviceDetails.js
new file mode 100644
index 000000000..0dc0a4212
--- /dev/null
+++ b/pmp-reactjs-ui/src/pages/admin/deviceProviderServices/ViewAdminDeviceDetails.js
@@ -0,0 +1,131 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { bgOfStatus, formatDate, getStatusCode, isLangRTL, onPressEnterKey } from '../../../utils/AppUtils';
+import { getUserProfile } from '../../../services/UserProfileService';
+import { useNavigate } from 'react-router-dom';
+import Title from '../../common/Title';
+import somethingWentWrongIcon from '../../../svg/something_went_wrong_icon.svg';
+
+function ViewAdminDeviceDetails() {
+    const { t } = useTranslation();
+    const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
+    const navigate = useNavigate();
+    const [unexpectedError, setUnexpectedError] = useState(false);
+    const [deviceDetails, setDeviceDetails] = useState({});
+
+    useEffect(() => {
+        const selectedDeviceAttributes = localStorage.getItem('selectedDeviceAttributes');
+        if(!selectedDeviceAttributes) {
+            setUnexpectedError(true);
+            return;
+        }
+        const selectedDevice = JSON.parse(selectedDeviceAttributes);
+        setDeviceDetails(selectedDevice);
+    }, []);
+
+    const moveToDevicesList = () => {
+        navigate('/partnermanagement/admin/device-provider-services/devices-list');
+    };
+
+    return (
+        <div className={`mt-2 w-[100%] ${isLoginLanguageRTL ? "mr-28 ml-5" : "ml-28 mr-5"} font-inter relative`}>
+            <div className={`flex-col mt-4 bg-anti-flash-white h-full font-inter break-words max-[450px]:text-sm mb-[2%]`}>
+                <div className="flex justify-between mb-3">
+                    <Title title={'viewDeviceDetails.viewDeviceDetails'} subTitle='devicesList.listOfDevices' subTitle2='sbiList.listOfSbi' backLink='/partnermanagement/admin/device-provider-services/devices-list' backLink2='/partnermanagement/admin/device-provider-services/sbi-list'/>
+                </div>
+
+                {unexpectedError && (
+                    <div className={`bg-[#FCFCFC] w-full mt-3 rounded-lg shadow-lg items-center`}>
+                        <div className="flex items-center justify-center p-24">
+                            <div className="flex flex-col justify-center items-center">
+                                <img className="max-w-60 min-w-52 my-2" src={somethingWentWrongIcon} alt="" />
+                                <p className="text-sm font-semibold text-[#6F6E6E] py-4">{t('devicesList.unexpectedError')}</p>
+                                <button onClick={moveToDevicesList} type="button"
+                                    className={`w-32 h-10 flex items-center justify-center font-semibold rounded-md text-sm mx-8 py-3 bg-tory-blue text-white`}>
+                                    {t('commons.goBack')}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                )}
+                {!unexpectedError && (
+                    <div className="bg-snow-white h-fit mt-1 rounded-md shadow-lg font-inter">
+                        <div className="flex justify-between px-7 pt-3 border-b max-[450px]:flex-col">
+                            <div className="flex-col">
+                                <p className="font-semibold text-lg text-dark-blue mb-2">
+                                    {deviceDetails.make} - {deviceDetails.model}
+                                </p>
+                                <div className="flex items-center justify-start mb-2 max-[400px]:flex-col max-[400px]:items-start">
+                                    <div className={`${bgOfStatus(deviceDetails.status)} flex w-fit py-1 px-5 text-sm rounded-md my-2 font-semibold`}>
+                                        {getStatusCode(deviceDetails.status, t)}
+                                    </div>
+                                    <div className={`font-semibold ${isLoginLanguageRTL ? "mr-3" : "ml-3"} text-sm text-dark-blue`}>
+                                        {t("viewOidcClientDetails.createdOn") + ' ' +
+                                            formatDate(deviceDetails.createdDateTime, "date", true)}
+                                    </div>
+                                    <div className="mx-2 text-gray-300">|</div>
+                                    <div className="font-semibold text-sm text-dark-blue">
+                                        {formatDate(deviceDetails.createdDateTime, "time", true)}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className={`${isLoginLanguageRTL ? "pr-8 ml-8" : "pl-8 mr-8"} pt-3 mb-2`}>
+                            <div className="flex flex-wrap py-1 max-[450px]:flex-col">
+                                <div className={`mb-5 max-[600px]:w-[100%] w-[48%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>
+                                    <p className="text-suva-gray text-sm">
+                                        {t("devicesList.deviceType")}
+                                    </p>
+                                    <p className="text-vulcan text-md">
+                                        {/* {deviceDetails.deviceType} */}
+                                    </p>
+                                </div>
+                                <div className={`mb-5 max-[600px]:w-[100%] w-[50%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>
+                                    <p className="text-suva-gray text-sm">
+                                        {t("devicesList.deviceSubType")}
+                                    </p>
+                                    <p className="text-vulcan text-md">
+                                        {/* {deviceDetails.deviceSubType} */}
+                                    </p>
+                                </div>
+                                <div className={`mb-5 max-[600px]:w-[100%] w-[48%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>
+                                <p className="text-suva-gray text-sm">
+                                        {t("devicesList.make")}
+                                    </p>
+                                    <p className="text-vulcan text-md">
+                                        {/* {deviceDetails.make} */}
+                                    </p>
+                                </div>
+                                <div className={`mb-5 max-[600px]:w-[100%] w-[48%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>
+                                    <p className="text-suva-gray text-sm">
+                                        {t("devicesList.model")}
+                                    </p>
+                                    <p className="text-vulcan text-md">
+                                        {/* {deviceDetails.model} */}
+                                    </p>
+                                </div>
+                                <div className={`mb-5 max-[600px]:w-[100%] w-[50%] ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>
+                                    <p className="text-suva-gray text-sm">
+                                        {t("devicesList.createdDate")}
+                                    </p>
+                                    <p className="text-vulcan text-md">
+                                        {formatDate(deviceDetails.createdDate, "dateTime", false)}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                        <hr className="h-px w-full bg-gray-200 border-0" />
+                        <div className={`flex justify-end py-8 ${isLoginLanguageRTL ? "ml-8" : "mr-8"}`}>
+                            <button id="view_admin_device_details_back_btn" onClick={moveToDevicesList}
+                                className="h-10 w-28 text-sm p-3 py-2 text-tory-blue bg-white border border-blue-800 font-semibold rounded-md text-center" onKeyPress={(e) => onPressEnterKey(e, moveToDevicesList)}>
+                                {t("commons.back")}
+                            </button>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default ViewAdminDeviceDetails;
\ No newline at end of file
diff --git a/pmp-reactjs-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js b/pmp-reactjs-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js
index e91a7f153..d7b2fdeb6 100644
--- a/pmp-reactjs-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js
+++ b/pmp-reactjs-ui/src/pages/admin/deviceProviderServices/ViewAdminSbiDetails.js
@@ -20,8 +20,6 @@ function ViewAdminSbiDetails() {
             return;
         }
         const selectedSbi = JSON.parse(selectedSbiAttributes);
-        console.log(selectedSbi);
-        
         setSbiDetails(selectedSbi);
     }, []);
 
@@ -33,7 +31,7 @@ function ViewAdminSbiDetails() {
         <div className={`mt-2 w-[100%] ${isLoginLanguageRTL ? "mr-28 ml-5" : "ml-28 mr-5"} font-inter relative`}>
             <div className={`flex-col mt-4 bg-anti-flash-white h-full font-inter break-words max-[450px]:text-sm mb-[2%]`}>
                 <div className="flex justify-between mb-3">
-                    <Title title={'viewSbiDetails.viewSbiDetails'} subTitle='viewSbiDetails.listOfSbisAndDevices' backLink='/partnermanagement/admin/device-provider-services/sbi-list' />
+                    <Title title={'viewSbiDetails.viewSbiDetails'} subTitle='viewSbiDetails.listOfSbi' backLink='/partnermanagement/admin/device-provider-services/sbi-list' />
                 </div>
 
                 {unexpectedError && (
diff --git a/pmp-reactjs-ui/src/pages/partner/deviceProviderServices/ViewDeviceDetails.js b/pmp-reactjs-ui/src/pages/partner/deviceProviderServices/ViewDeviceDetails.js
index dc0e86184..df72bfb6c 100644
--- a/pmp-reactjs-ui/src/pages/partner/deviceProviderServices/ViewDeviceDetails.js
+++ b/pmp-reactjs-ui/src/pages/partner/deviceProviderServices/ViewDeviceDetails.js
@@ -44,7 +44,7 @@ function ViewDeviceDetails() {
 
                 <>
                     <div className="flex justify-between mb-3">
-                        <Title title='viewDeviceDetails.viewDeviceDetails' subTitle='sbiList.listOfSbi' subTitle2='devicesList.listOfDevices' backLink='/partnermanagement/device-provider-services/sbi-list' backLink2='/partnermanagement/device-provider-services/devices-list' ></Title>
+                        <Title title='viewDeviceDetails.viewDeviceDetails' subTitle='sbiList.listOfSbi' subTitle2='devicesList.listOfDevices' backLink='/partnermanagement/device-provider-services/sbi-list' backLink2='/partnermanagement/device-provider-services/devices-list' />
                     </div>
                     {unexpectedError && (
                         <div className={`bg-[#FCFCFC] w-full mt-3 rounded-lg shadow-lg items-center`}>