From 3771d905208a7f9ecb2ab68dc4cbc08e2b852012 Mon Sep 17 00:00:00 2001
From: Swetha K <swetha.k@technoforte.co.in>
Date: Thu, 9 Jan 2025 18:32:18 +0530
Subject: [PATCH] MOSIP-38029: Added back to SBI in linked devices list

Signed-off-by: Swetha K <swetha.k@technoforte.co.in>
---
 pmp-revamp-ui/public/i18n/ara.json              |  3 ++-
 pmp-revamp-ui/public/i18n/eng.json              |  3 ++-
 pmp-revamp-ui/public/i18n/fra.json              |  3 ++-
 .../deviceProviderServices/AdminDevicesList.js  | 12 +++++-------
 .../deviceProviderServices/AllDevicesList.js    |  1 +
 .../deviceProviderServices/LinkedDevicesList.js |  3 ++-
 pmp-revamp-ui/src/pages/common/FilterButtons.js | 17 +++++++++++++----
 7 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/pmp-revamp-ui/public/i18n/ara.json b/pmp-revamp-ui/public/i18n/ara.json
index 07d3375cf..49ac5a509 100644
--- a/pmp-revamp-ui/public/i18n/ara.json
+++ b/pmp-revamp-ui/public/i18n/ara.json
@@ -455,7 +455,8 @@
         "unexpectedError": "لقد واجهنا خطأ غير متوقع. يرجى المحاولة مرة أخرى.",
         "searchDeviceId": "البحث عن معرف الجهاز",
         "selectDeviceId": "حدد معرف الجهاز",
-        "linkedDevicesList": "قائمة الأجهزة المرتبطة"
+        "linkedDevicesList": "قائمة الأجهزة المرتبطة",
+        "backToSbi": "العودة إلى قائمة SBI"
     },
     "deactivateDevicePopup": {
         "headerMsg": "هل تريد إلغاء تنشيط الجهاز",
diff --git a/pmp-revamp-ui/public/i18n/eng.json b/pmp-revamp-ui/public/i18n/eng.json
index 0f9254d70..fc33ccd68 100644
--- a/pmp-revamp-ui/public/i18n/eng.json
+++ b/pmp-revamp-ui/public/i18n/eng.json
@@ -450,7 +450,8 @@
         "unexpectedError": "We have encountered with an unexpected error. Please try again.",
         "searchDeviceId": "Search Device ID",
         "selectDeviceId": "Select Device ID",
-        "linkedDevicesList": "List of Linked Devices"
+        "linkedDevicesList": "List of Linked Devices",
+        "backToSbi": "Back to List of SBI"
     },
     "deactivateDevicePopup": {
         "headerMsg": "Do you want to deactivate Device ",
diff --git a/pmp-revamp-ui/public/i18n/fra.json b/pmp-revamp-ui/public/i18n/fra.json
index c7b510349..334f5395a 100644
--- a/pmp-revamp-ui/public/i18n/fra.json
+++ b/pmp-revamp-ui/public/i18n/fra.json
@@ -455,7 +455,8 @@
         "unexpectedError": "Nous avons rencontré une erreur inattendue. Veuillez réessayer.",
         "searchDeviceId": "Rechercher l'ID de l'appareil",
         "selectDeviceId": "Sélectionner l'ID de l'appareil",
-        "linkedDevicesList": "Liste des appareils liés"
+        "linkedDevicesList": "Liste des appareils liés",
+        "backToSbi": "Retour à la liste des SBI"
     },
     "deactivateDevicePopup": {
         "headerMsg": "Voulez-vous désactiver l'appareil ",
diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js
index 382aa4633..b81a28a58 100644
--- a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js
+++ b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AdminDevicesList.js
@@ -21,7 +21,7 @@ import viewIcon from "../../../svg/view_icon.svg";
 import DeactivatePopup from '../../common/DeactivatePopup.js';
 import Pagination from '../../common/Pagination.js';
 
-function AdminDevicesList({ title, isLinkedDevicesList }) {
+function AdminDevicesList({ title, subTitle, isLinkedDevicesList }) {
     const location = useLocation();
     const navigate = useNavigate('');
     const { t } = useTranslation();
@@ -291,11 +291,6 @@ function AdminDevicesList({ title, isLinkedDevicesList }) {
                                 title={title}
                                 backLink='/partnermanagement' 
                             />
-                            {isLinkedDevicesList && (
-                                <button onClick={backToSbi} className="h-10 w-fit text-sm p-3 py-2 text-white bg-tory-blue border border-blue-800 font-semibold rounded-md text-center">
-                                    Back to SBI List
-                                </button>
-                            )}
                         </div>
                         <DeviceProviderServicesTab
                             activeSbi={isLinkedDevicesList ? true: false}
@@ -311,11 +306,14 @@ function AdminDevicesList({ title, isLinkedDevicesList }) {
                             <div className={`bg-[#FCFCFC] w-full mt-1 rounded-t-xl shadow-lg pt-3 ${!tableDataLoaded && "py-6"}`}>
                                 <FilterButtons
                                     titleId='list_of_device_details'
-                                    listTitle={title}
+                                    listTitle={subTitle}
                                     dataListLength={totalRecords}
                                     filter={expandFilter}
                                     onResetFilter={onResetFilter}
                                     setFilter={setExpandFilter}
+                                    addBackArrow={isLinkedDevicesList ? true : false}
+                                    goBack={isLinkedDevicesList && backToSbi}
+                                    backArrowTitle={isLinkedDevicesList && 'devicesList.backToSbi'}
                                 />
                                 <hr className="h-0.5 mt-3 bg-gray-200 border-0" />
                                 {expandFilter && (
diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AllDevicesList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AllDevicesList.js
index 5802429d4..9144a9938 100644
--- a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AllDevicesList.js
+++ b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/AllDevicesList.js
@@ -5,6 +5,7 @@ function AllDevicesList () {
     return (
         <AdminDevicesList
             title='devicesList.listOfDevices'
+            subTitle='devicesList.listOfDevices'
             isLinkedDevicesList={false} 
         />
     );
diff --git a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/LinkedDevicesList.js b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/LinkedDevicesList.js
index 2c241f7ba..d30336bf3 100644
--- a/pmp-revamp-ui/src/pages/admin/deviceProviderServices/LinkedDevicesList.js
+++ b/pmp-revamp-ui/src/pages/admin/deviceProviderServices/LinkedDevicesList.js
@@ -4,7 +4,8 @@ function LinkedDevicesList () {
 
     return (
         <AdminDevicesList
-            title='devicesList.linkedDevicesList'
+            title='sbiList.listOfSbis'
+            subTitle='devicesList.linkedDevicesList'
             isLinkedDevicesList={true}
         />
     );
diff --git a/pmp-revamp-ui/src/pages/common/FilterButtons.js b/pmp-revamp-ui/src/pages/common/FilterButtons.js
index 052780787..303b86ae7 100644
--- a/pmp-revamp-ui/src/pages/common/FilterButtons.js
+++ b/pmp-revamp-ui/src/pages/common/FilterButtons.js
@@ -1,15 +1,24 @@
 import { useTranslation } from 'react-i18next';
 import { getUserProfile } from '../../services/UserProfileService';
 import { isLangRTL, onPressEnterKey } from '../../utils/AppUtils';
+import backArrow from '../../svg/back_arrow.svg';
 
-function FilterButtons({ titleId, listTitle, dataListLength, filter, onResetFilter, setFilter }) {
+function FilterButtons({ titleId, listTitle, dataListLength, filter, onResetFilter, setFilter, goBack, backArrowTitle, addBackArrow }) {
 
     const { t } = useTranslation();
     const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);
     return (
-        <div className="flex w-full p-2">
-            <div id={titleId} className="flex w-full pl-[2%] pt-1 items-center justify-start font-semibold text-dark-blue text-base" >
-                {t(listTitle) + ' (' + dataListLength + ")"}
+        <div className="flex items-center w-full p-2">
+            <div id={titleId} className="flex-col w-full pl-[2%] pt-1 items-center justify-start font-semibold text-dark-blue text-base" >
+                {addBackArrow && (
+                    <div className='flex flex-row'>
+                        <button id='subtitle_back_icon' onClick={goBack} className={`mt-1 cursor-pointer ${isLoginLanguageRTL ? "rotate-180" : null}`} >
+                            <img src={backArrow} alt="" />
+                        </button>
+                        <p className={`${isLoginLanguageRTL ? 'pr-2' : 'pl-2'}`}>{t(backArrowTitle)}</p>
+                    </div>
+                )}
+                <p>{t(listTitle) + ' (' + dataListLength + ")"}</p>
             </div>
             <div className="w-full flex justify-end relative items-center">
                 {filter &&