Merge from develop

Reviewed-on: #1

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 dist/
 .idea/
 package-lock.json
+*.zip

CHANGELOG.md

@@ -0,0 +1,181 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+*For each release, use the following subsections:*
+
+- *Added (for new features)*
+- *Changed (for changes in existing functionality)*
+- *Deprecated (for soon-to-be removed features)*
+- *Removed (for now removed features)*
+- *Fixed (for any bug fixes)*
+- *Security (in case of vulnerabilities)*
+
+## v1.0.3 - 30.10.2024
+### Changed
+Open Access Indicator changed to show open access for the last full year. (e.g. 2023)
+
+## v1.0.2 - 18.09.2024
+### Changed
+Texts in home and about.
+
+### Added
+Add info for publicly-funded filter.
+Add engagement tag for engagement-training page.
+
+## v1.0.1 - 25.07.2024
+### Fixed
+Problem with ORCID KPIs regarding a researcher.
+Reordered action buttons in a search page.
+Fix import/export indicators tab title wasn't imported.
+Fix the redirection URL after verification of a manager.
+
+### Changed
+Extract a stakeholder in every field of a json in a chart.
+Improvements regarding import/export indicators and editing an indicator.
+
+## v1.0.0 - 26.06.2024 - Official Release
+### Added
+Add banner for announcements. Disabled by default.
+Add guide text in researcher search bar for more accurate results.
+
+### Removed
+Remove final release text from footer.
+
+### Changed
+Improvements in User Interface of browse RPOs/RFOs pages.
+
+## v0.1.5 - 19.6.2024
+### Added
+Add open access indicator in browse pages.
+Add OAI PMH in user actions page.
+
+### Changed
+Change api call to get manage stakeholders from the API.
+
+## v0.1.4 - 03.6.2024
+### Added
+Add message for results that are not related to Ireland in detailed page of the result.
+Add Tab title in indicator form (admin).
+
+### Changed
+Position of buttons for multi indicator in cards and add allows for overflow.
+_Open Access_ to _Open Access with Licence_ and set precision of the percentage to one decimal.
+
+## v0.1.3 - 20.5.2024
+### Added
+Share OA Indicator in Monitor pages.
+Dashboard Managers Documentation in User Actions.
+
+### Fixed
+Improve performance in search pages.
+
+## v0.1.2 - 25.4.2024
+### Fixed
+* Bug with invitation in RPOs.
+
+### Removed
+* Remove number of products in researcher dashboard page.
+
+## v0.1.1 - 18.4.2024
+### Fixed
+* Bug with router links to search pages in all entities.
+
+### Changed
+* Filters replace result with publication, dataset, software, other.
+* Range Filter override initial values of a chart.
+
+### Removed
+* Remove search bar from menu in landings.
+
+## v0.1.0 - 17.4.2024
+### Added
+* Introduce copy/reference instance type in stakeholders profiles.
+* Add class help texts for Engagement and training
+* Add Managers in admin
+* Multi indicator paths in admin and monitor page.
+
+### Changed
+* Rename existed managers to Primary Dashboard Managers
+* Convert all profiles to **reference**
+* Reordering in default will be inherited to children. (copy)
+* Export/import Indicators add stakeholder index variables and type in order to import into another profile.
+* Remove edit/remove actions in indicators page when a profile is **reference**
+
+## v0.0.7 - 23.3.2024
+### Added
+* Add licence facet in results.
+* Cache # of publications response
+* Pop-up to every monitor with guide for the basic interactivity functions of the charts.
+
+### Fixed
+* Responsive menu items for medium screens
+* Fix bug with condition if user is manager in publications method.
+
+## v0.0.6 - 22.2.2024
+### Added
+* Sort by # of publications in browse pages of RFOs/RPOs.
+* Override profiles in indicator level.
+
+### Changed
+* Change research queries.
+
+### Removed
+* My orcid links from beta.
+
+### Fixed
+* Bug with encoding alias.
+* Link to matomo stats.
+
+## v0.0.5 - 14.2.2024
+### Added
+* Country filter in all entities.
+
+### Fixed
+* Bug with encoding of index variables in url of indicators.
+* Bug in section tabs.
+* Bug with search to landing navigation in national monitor.
+
+## v0.0.4 - 07.2.2024
+### Added
+* Home page.
+* Orcid page to discover your results.
+* Show filters in subtitle of a chart.
+* Show selected filters in indicators.
+* Sections: Add description.
+
+### Changed
+* Section changed to tabs.
+* Filter OA color changed to Publisher Access.
+
+### Fixed
+* Fos filter in charts.
+
+## v0.0.3 - 29.1.2024
+### Added
+* Add info floating button to all pages and link to terminology page.
+
+### Changed
+* Change OA Routes to Access Routes.
+* Make contact-us full screen modal.
+* Move floating message button to root components.
+
+
+## v0.0.2 - 18.1.2024
+### Added
+* Loading in dashboard - cache for FOS call.
+
+### Removed
+* Remove imported from file in sections titles.
+* Remove loading in dashboard when a subcategory is changed.
+
+### Fixed
+* Export indicators with file name.
+* Invitation of manager doesn't work as expected.
+* Sandbox guard for researcher.
+
+## v0.0.1 - 10.1.2024
+* Initial Release.

LICENSE.txt

@@ -0,0 +1,190 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   Copyright 2024 National Open Access Monitor, Ireland
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,27 +1,34 @@
-# IrishMonitor
+# Irish Monitor
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.2.0.
 
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+Run `npm start` for a dev server. Navigate to `http://localhost:5500/`. The application will automatically reload if you change any of the source files.
 
-## Code scaffolding
+## Sandbox environment (BETA) build
+1. Run `npm run build:ssr-beta` to build the project.
+2. Copy the folder to another location and navigate to it.
+3. Run `npm run after-build-clean` to remove git unnecessary files in the new folder.
+4. Upload to the server.
+5. Run `npm install` in the uploaded folder and copy the content to the server location.
+6. Restart the service.
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+## Production environment build
+1. Run `npm run build:ssr-prod` to build the project.
+2. Copy the folder to another location and navigate to it.
+3. Run `npm run after-build-clean` to remove git unnecessary files in the new folder.
+4. Upload to the server.
+5. Run `npm install` in the uploaded folder and copy the content to the server location.
+6. Restart the service.
 
-## Build
+## Notes
+1. Login Session is only working under the same domain with the login-service of the [properties](src/environments/environment.ts).
+2. Search service, ORCID-Integrated service, Linking service belongs to OpenAIRE.
+3. Managers are stored at OpenAIRE AAI Registry.
+4. Irish Monitor Service is the main service of Irish Monitor.
 
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+## License
 
-## Running unit tests
+This project is licensed under the Apache License, Version 2.0. See the [LICENSE](LICENSE.txt) file for details.
 
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

angular.json

@@ -305,5 +305,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "irish-monitor",
-  "version": "0.0.0",
+  "version": "1.0.3",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --port 5500 --disable-host-check --host 0.0.0.0",
@@ -15,7 +15,8 @@
     "build:ssr-beta": "npm run build-beta && ng run irish-monitor:server:beta",
     "build:ssr-prod": "npm run build-prod && ng run irish-monitor:server:production",
     "prerender": "ng run irish-monitor:prerender",
-    "after-build-clean": "rm -rf dist/irish-monitor/browser/assets/common-assets/.git src/app/openaireLibrary/.git node_modules .angular src/assets/common-assets/.git .git"
+    "release": "chmod +x release.sh && ./release.sh",
+    "after-build-clean": "rm -rf release.sh .vscode dist/irish-monitor/browser/assets/common-assets/.git* src/app/openaireLibrary/.git* node_modules .angular src/assets/common-assets/.git* .git*"
   },
   "private": true,
   "dependencies": {
@@ -31,6 +32,7 @@
     "@angular/platform-server": "^16.2.0",
     "@angular/router": "^16.2.0",
     "@nguniversal/express-engine": "^16.2.0",
+    "axios": "^1.4.0",
     "clipboard": "^1.5.16",
     "express": "^4.15.2",
     "jquery": "^3.4.1",
@@ -50,6 +52,7 @@
     "@types/compression": "^1.7.0",
     "@types/express": "^4.17.0",
     "@types/node": "^16.11.7",
-    "typescript": "~5.1.3"
+    "typescript": "~5.1.3",
+    "@types/ckeditor": "^4.9.10"
   }
 }

release.sh

@@ -0,0 +1,39 @@
+rm -f *.zip
+
+# Portal
+git clone https://code-repo.d4science.org/MaDgIK/irish-monitor.git
+cd irish-monitor
+git checkout master
+git submodule update --init --recursive
+cd src/app/openaireLibrary
+git checkout master
+cd ../../assets/common-assets
+git checkout master
+cd ../openaire-theme
+git checkout master
+cd ../../../
+npm run after-build-clean
+version=$(npm pkg get version | xargs)
+cd ../
+zip -r irish-monitor-$version.zip irish-monitor
+rm -rf irish-monitor
+
+# Service
+git clone https://code-repo.d4science.org/MaDgIK/irish-monitor-service.git
+cd irish-monitor-service
+git checkout production
+rm -rf .git*
+version=$(mvn help:evaluate -Dexpression=project.version -q -DforceStdout)
+# Remove the '-SNAPSHOT' suffix
+version=${version%-SNAPSHOT}
+# Split the version string into major, minor, and patch components
+IFS='.' read -r major minor patch <<EOF
+$version
+EOF
+# Subtract one from the patch version
+patch=$((patch - 1))
+# Reconstruct the version string
+version="$major.$minor.$patch"
+cd ../
+zip -r irish-monitor-service-$version.zip irish-monitor-service
+rm -rf irish-monitor-service

server.ts

@@ -13,12 +13,18 @@ var jsonParser = bodyParser.json()
 import * as fs from 'fs';
 import {readFileSync} from "fs";
 import {properties} from "./src/environments/environment";
+import axios, {AxiosHeaders} from "axios";
+import {CacheIndicators} from "./src/app/openaireLibrary/monitor-admin/utils/cache-indicators/cache-indicators";
+import {UserManagementService} from "./src/app/openaireLibrary/services/user-management.service";
+import {Session, User} from "./src/app/openaireLibrary/login/utils/helper.class";
+import {Stakeholder} from "./src/app/openaireLibrary/monitor/entities/stakeholder";
 // The Express app is exported so that it can be used by serverless Functions.
 export function app(): express.Express {
   const server = express();
   server.use(compression());
   const distFolder = join(process.cwd(), 'dist/irish-monitor/browser');
   const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
+  let cacheIndicators: CacheIndicators = new CacheIndicators();
 
   // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine)
   server.engine('html', ngExpressEngine({
@@ -32,7 +38,16 @@ export function app(): express.Express {
   // Example Express Rest API endpoints
   // server.get('/api/**', (req, res) => { });
   // Serve static files from /browser
-
+  server.get('/webstats/:year/:month', (req, res) => {
+    let today = new Date();
+    let filename = "oamonitor-"+ req.params['year']+ "-" + req.params['month'] ;
+    res.setHeader('content-disposition','attachment; filename='+'webstats-'+ req.params['year']+ '_' + req.params['month']+'.json');
+    let file = " ";
+    try {
+      file = readFileSync(properties.matomoLogFilesPath + filename +".json", 'utf-8');
+    }catch (e){}
+    res.status(200).send( file);
+  });
   server.get('/public-logs/:year/:month', (req, res) => {
     let today = new Date();
     let filename = getFileName(req.params['year'], req.params['month'])
@@ -58,6 +73,65 @@ export function app(): express.Express {
       message: 'action received!'
     });
   });
+
+  server.post('/cache/:alias', jsonParser, async (req, res) => {
+    await checkPermissions(req, res, (stakeholder, user) => {
+      if (cacheIndicators.completed(stakeholder._id)) {
+        res.send({
+          id: stakeholder._id,
+          report: cacheIndicators.createReport(stakeholder._id, cacheIndicators.stakeholderToCacheItems(stakeholder), stakeholder.name, user.email)
+        });
+      } else {
+        res.status(409).send('There is another active caching process for this stakeholder');
+      }
+    });
+  });
+
+  server.get('/cache/:alias', async (req, res) => {
+    await checkPermissions(req, res, stakeholder => {
+      if (cacheIndicators.exists(stakeholder._id)) {
+        res.send({
+          id: stakeholder._id,
+          report: cacheIndicators.getReport(stakeholder._id)
+        });
+      } else {
+        res.status(404).send('There is not an active caching process for this stakeholder');
+      }
+    });
+  });
+
+  async function checkPermissions(req, res, access: (stakeholder, user) => void) {
+    let headers: AxiosHeaders = new AxiosHeaders();
+    headers.set('Cookie', req.headers.cookie);
+    let userinfoRes = (await axios.get<any>(UserManagementService.userInfoUrl(), {
+      withCredentials: true,
+      headers: headers
+    }).catch(error => {
+      return error.response;
+    }));
+    if (userinfoRes.status === 200) {
+      let user = new User(userinfoRes.data);
+      let stakeholderRes = (await axios.get<Stakeholder>(properties.monitorServiceAPIURL + 'stakeholder/' + encodeURIComponent(req.params.alias), {
+        withCredentials: true,
+        headers: headers
+      }).catch(error => {
+        return error.response;
+      }));
+      if (stakeholderRes.status === 200) {
+        let stakeholder = stakeholderRes.data;
+        if (Session.isPortalAdministrator(user) || Session.isCurator(stakeholder.type, user)) {
+          access(stakeholder, user);
+        } else {
+          res.status(403).send('You are forbidden to access this resource');
+        }
+      } else {
+        res.status(stakeholderRes.status).send(stakeholderRes.statusText);
+      }
+    } else {
+      res.status(userinfoRes.status).send(userinfoRes.data.message);
+    }
+  }
+
   server.get('*.*', express.static(distFolder, {
     maxAge: '1y'
   }));
@@ -99,7 +173,7 @@ function getFileName(year, month){
   return 'actions' + (year && month ? "_" + year + "_" + month : "")+".log";
 }
 function formatPrettyLog(log){
-  return "On " + (log.date ? formatDateAndTime(log.date) : "") + " "  /*+ logs[i].action + " "*/ + log.message + "<br>";
+  return "On " + (log.date ? formatDateAndTime(log.date) : "") + " "  /*+ logs[i].action + " "*/ + log.message;
 }
 function formatDateAndTime(dateStr){
   let date = new Date(dateStr);

src/app/admin-tools/admin-tools-routing.module.ts

@@ -0,0 +1,41 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: 'entities',
+        loadChildren: () => import('../openaireLibrary/dashboard/entity/entities.module').then(m => m.EntitiesModule),
+        pathMatch: 'full'
+      },
+      {
+        path: 'classContents',
+        loadChildren: () => import('../openaireLibrary/dashboard/divhelpcontent/class-help-contents.module').then(m => m.ClassHelpContentsModule),
+        pathMatch: 'full'
+      },
+      {
+        path: 'classContents/edit',
+        loadChildren: () => import('../openaireLibrary/dashboard/divhelpcontent/class-help-content-form.module').then(m => m.ClassHelpContentFormModule),
+        pathMatch: 'full'
+      },
+      {
+        path: 'helptexts',
+        loadChildren: () => import('../openaireLibrary/dashboard/helpTexts/page-help-contents.module').then(m => m.PageHelpContentsModule),
+        pathMatch: 'full'
+      },
+      {
+        path: 'helptexts/edit',
+        loadChildren: () => import('../openaireLibrary/dashboard/helpTexts/page-help-content-form.module').then(m => m.PageHelpContentFormModule),
+        pathMatch: 'full'
+      },
+      {
+        path: 'pages',
+        loadChildren: () => import('../openaireLibrary/dashboard/page/pages.module').then(m => m.PagesModule),
+        pathMatch: 'full'
+      }
+    ])
+  ]
+})
+export class AdminToolsRoutingModule {
+}

src/app/admin-tools/portal-admin-tools-routing.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from "@angular/core";
+import {RouterModule} from "@angular/router";
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    {path: '', loadChildren: () => import('./admin-tools-routing.module').then(m => m.AdminToolsRoutingModule)},
+    {path: 'portals', loadChildren: () => import('../openaireLibrary/dashboard/portal/portals.module').then(m => m.PortalsModule)},
+    {path: 'classes', loadChildren: () => import('../openaireLibrary/dashboard/divId/divIds.module').then(m => m.DivIdsModule)}
+  ])]
+})
+export class PortalAdminToolsRoutingModule {
+
+}

src/app/admin/admin.component.ts

@@ -5,6 +5,11 @@ import {SidebarBaseComponent} from "../openaireLibrary/dashboard/sharedComponent
 import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
 import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
 import {MenuItem} from "../openaireLibrary/sharedComponents/menu";
+import {Session, User} from "../openaireLibrary/login/utils/helper.class";
+import {UserManagementService} from "../openaireLibrary/services/user-management.service";
+import {ConnectHelper} from "../openaireLibrary/connect/connectHelper";
+import {ConfigurationService} from "../openaireLibrary/utils/configuration/configuration.service";
+import {Irish} from "../shared/irish";
 
 @Component({
   selector: 'admin',
@@ -12,59 +17,111 @@ import {MenuItem} from "../openaireLibrary/sharedComponents/menu";
       <div>
           <loading *ngIf="loading" class="uk-position-center"></loading>
           <div *ngIf="!loading" class="sidebar_main_swipe uk-flex uk-background-default"
-               [class.sidebar_main_active]="open && (hasSidebar || hasInternalSidebar)"
-               [class.sidebar_mini]="!open && (hasSidebar || hasInternalSidebar)"
+               [class.sidebar_main_active]="open && (hasSidebar || hasInternalSidebar || hasAdminMenu)"
+               [class.sidebar_mini]="!open && (hasSidebar || hasInternalSidebar || hasAdminMenu)"
                [class.sidebar_hover]="hover">
-              <dashboard-sidebar *ngIf="hasSidebar && !hasInternalSidebar && sideBarItems.length > 0" [logoURL]="stakeholder | logoUrl"
+              <dashboard-sidebar *ngIf="hasSidebar && !hasInternalSidebar && sideBarItems.length > 0"
+                                 [logoURL]="stakeholder | logoUrl"
                                  [items]="sideBarItems" [backItem]="backItem"></dashboard-sidebar>
+              <dashboard-sidebar *ngIf="hasAdminMenu && !hasInternalSidebar" [items]="adminMenuItems"
+                                 [backItem]="backItem"></dashboard-sidebar>
               <div class="uk-width-1-1">
                   <router-outlet></router-outlet>
               </div>
           </div>
+          <cache-indicators *ngIf="stakeholder && isAdmin" [alias]="stakeholder.alias"></cache-indicators>
       </div>
   `
 })
 export class AdminComponent extends SidebarBaseComponent implements OnInit {
   stakeholder: Stakeholder;
   loading: boolean = true;
+  user: User;
 
   constructor(protected _route: ActivatedRoute,
               protected _router: Router,
               protected layoutService: LayoutService,
               protected cdr: ChangeDetectorRef,
-              private stakeholderService: StakeholderService) {
+              private stakeholderService: StakeholderService,
+              private userManagementService: UserManagementService,
+              private configurationService: ConfigurationService) {
     super();
     this.initRouterParams(this._route);
   }
 
   ngOnInit() {
     super.ngOnInit();
-    this.subscriptions.push(this.params.subscribe(params => {
-      this.sideBarItems = [];
-      this.loading = true;
-      if(params['alias']) {
-        this.subscriptions.push(this.stakeholderService.getStakeholder(params['alias']).subscribe(stakeholder => {
-          this.stakeholder = stakeholder;
-          this.layoutService.setRootClass(this.stakeholder.type);
-          this.sideBarItems.push(new MenuItem("general", "General", "", "/admin/" + this.stakeholder.alias, false, [], [], {}, {name: 'badge'}));
-          this.sideBarItems.push(new MenuItem("indicators", "Indicators", "", "/admin/" + this.stakeholder.alias + '/indicators', false, [], [], {}, {name: 'bar_chart'}, null, "uk-visible@m"));
-          if (this.stakeholder.defaultId) {
-            this.sideBarItems.push(new MenuItem("users", "Users", "", "/admin/" + this.stakeholder.alias + '/users', false, [], [], {}, {name: 'group'}, null, "uk-visible@m", "/admin/" + this.stakeholder.alias + "/users"));
-          }
-          this.backItem = new MenuItem("back", "Manage profiles", "", "/admin", false, [], null, {}, {name: 'west'});
+    this.layoutService.setHasHelpPopUp(false);
+    this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
+      this.user = user;
+      this.subscriptions.push(this.params.subscribe(params => {
+        this.sideBarItems = [];
+        this.loading = true;
+        if(params['stakeholder']) {
+          this.subscriptions.push(this.stakeholderService.getStakeholder(params['stakeholder']).subscribe(stakeholder => {
+            this.stakeholder = stakeholder;
+            this.setProperties(this.stakeholder.alias, this.stakeholder.type);
+            this.layoutService.setRootClass(this.stakeholder.type);
+            this.sideBarItems = [];
+            this.sideBarItems.push(new MenuItem("general", "General", "", "/admin/" + this.stakeholder.alias, false, [], [], {}, {name: 'badge'}));
+            this.sideBarItems.push(new MenuItem("indicators", "Indicators", "", "/admin/" + this.stakeholder.alias + '/indicators', false, [], [], {}, {name: 'bar_chart'}, null, "uk-visible@m"));
+            if (this.stakeholder.defaultId) {
+              this.sideBarItems.push(new MenuItem("users", "Users", "", "/admin/" + this.stakeholder.alias + '/users', false, [], [], {}, {name: 'group'}, null, "uk-visible@m", "/admin/" + this.stakeholder.alias + "/users"));
+            }
+            if (this.isAdmin && this.stakeholder.defaultId) {
+              this.sideBarItems.push(new MenuItem("admin-tools", "Pages & Entities", "", "/admin/" + this.stakeholder.alias + "/admin-tools/pages", false, [], [], {}, {name: 'description'}, null, "uk-visible@m", "/admin/" + this.stakeholder.alias + "/admin-tools"));
+            }
+            this.backItem = null;
+            if (this.hasAdminMenu) {
+              this.setAdminMenuItems();
+            }
+            this.backItem = new MenuItem("back", "Manage profiles", "", "/admin", false, [], null, {}, {name: 'west'});
+            this.loading = false;
+          }));
+        } else {
+          this.setProperties(Irish.irishAdminToolsCommunity, Irish.irishAdminToolsPortalType);
+          this.stakeholderService.setStakeholder(null);
+          this.layoutService.setRootClass(null);
+          this.hasSidebar = false;
           this.loading = false;
-        }));
-      } else {
-        this.stakeholderService.setStakeholder(null);
-        this.layoutService.setRootClass(null);
-        this.hasSidebar = false;
-        this.loading = false;
-      }
+          if (this.hasAdminMenu) {
+            this.setAdminMenuItems();
+          }
+        }
+      }));
     }));
   }
 
   ngOnDestroy() {
     super.ngOnDestroy();
+    this.layoutService.setHasHelpPopUp(true);
     this.layoutService.setRootClass(null);
+    this.setProperties(Irish.irishAdminToolsCommunity, Irish.irishAdminToolsPortalType);
+  }
+
+  setProperties(id, type = null) {
+    this.properties.adminToolsCommunity = id;
+    if (type) {
+      this.properties.adminToolsPortalType = type;
+    } else {
+      ConnectHelper.setPortalTypeFromPid(id);
+    }
+    this.configurationService.initPortal(this.properties, this.properties.adminToolsCommunity);
+  }
+
+  private setAdminMenuItems() {
+    this.adminMenuItems = [];
+    this.adminMenuItems.push(new MenuItem("stakeholders", "Manage profiles", "", "/admin", false, [], [], {}, {name: 'settings'}));
+    if (Session.isPortalAdministrator(this.user)) {
+      this.adminMenuItems.push(new MenuItem("adminOptions", "Super Admin options", "", "/admin/admin-tools/portals", false, [], [], {}, {name: 'settings'}, null, "uk-visible@m", '/admin/admin-tools'));
+    }
+    if (Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user)) {
+      this.adminMenuItems.push(new MenuItem("irishOptions", "Irish options", "", "/admin/irish/admin-tools/pages", false, [], [], {}, {name: 'settings'}, null, "uk-visible@m", '/admin/irish/admin-tools'));
+    }
+    this.hasAdminMenu = this.hasAdminMenu && this.adminMenuItems.length > 1;
+  }
+
+  public get isAdmin() {
+    return Session.isPortalAdministrator(this.user) || Session.isCurator(this.stakeholder.type, this.user);
   }
 }

src/app/admin/admin.module.ts

@@ -6,6 +6,10 @@ import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
 import {SideBarModule} from "../openaireLibrary/dashboard/sharedComponents/sidebar/sideBar.module";
 import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
 import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
+import {AdminLoginGuard} from "../openaireLibrary/login/adminLoginGuard.guard";
+import {LoginGuard} from "../openaireLibrary/login/loginGuard.guard";
+import {AdminDashboardGuard} from "../openaireLibrary/monitor-admin/utils/adminDashboard.guard";
+import {CacheIndicatorsModule} from "../openaireLibrary/monitor-admin/utils/cache-indicators/cache-indicators.module";
 
 @NgModule({
   imports: [CommonModule, RouterModule.forChild([
@@ -13,10 +17,20 @@ import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.modu
       path: '', component: AdminComponent, children: [
         {
           path: '',
-          loadChildren: () => import('../openaireLibrary/monitor-admin/manageStakeholders/manageStakeholders.module').then(m => m.ManageStakeholdersModule)
+          canActivateChild: [LoginGuard],
+          loadChildren: () => import('../openaireLibrary/monitor-admin/manageStakeholders/manageStakeholders.module').then(m => m.ManageStakeholdersModule),
+          data: {hasAdminMenu: true, hasSidebar: false}
         },
         {
-          path: ':alias', children: [
+          path: 'admin-tools',
+          loadChildren: () => import('../admin-tools/portal-admin-tools-routing.module').then(m => m.PortalAdminToolsRoutingModule),
+          canActivateChild: [AdminLoginGuard],
+          data: {hasAdminMenu: true, hasSidebar: false}
+        },
+        {
+          path: ':stakeholder',
+          canActivateChild: [AdminDashboardGuard],
+          children: [
             {
               path: '',
               loadChildren: () => import('../openaireLibrary/monitor-admin/general/general.module').then(m => m.GeneralModule)
@@ -33,15 +47,20 @@ import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.modu
               pathMatch: 'full'
             },
             {
-              path: 'users/manager',
+              path: 'users/:user_type',
               loadChildren: () => import('./users/users.module').then(m => m.UsersModule),
               pathMatch: 'full'
             },
+            {
+              path: 'admin-tools',
+              loadChildren: () => import('../admin-tools/admin-tools-routing.module').then(m => m.AdminToolsRoutingModule),
+              data: {param: 'stakeholder', parentClass: 'monitor'}
+            }
           ]
         }
       ]
     }
-  ]), SideBarModule, LoadingModule, LogoUrlPipeModule],
+  ]), SideBarModule, LoadingModule, LogoUrlPipeModule, CacheIndicatorsModule],
   declarations: [AdminComponent],
   exports: [AdminComponent]
 })

src/app/admin/users/users.component.html

@@ -4,6 +4,10 @@
   </div>
 </div>
 <role-users *ngIf="!loading && stakeholder" [id]="stakeholder.alias" [type]="stakeholder.type" [name]="stakeholder.name" [link]="link" [role]="tab" [message]="messages.get(tab)"
-            [emailComposer]="emailComposer">
+            [emailComposer]="emailComposer" [inviteAuthorizationLevel]="tab === 'manager'?'curator':'manager'">
+    <ul class="uk-tab uk-margin-remove-bottom uk-margin-medium-top">
+        <li [class.uk-active]="tab === 'manager'"><a routerLink="../manager" class="uk-text-capitalize">{{roleUtils.roles.manager}}s</a></li>
+        <li [class.uk-active]="tab === 'member'"><a routerLink="../member" class="uk-text-capitalize">{{roleUtils.roles.member}}s</a></li>
+    </ul>
 </role-users>
 

src/app/admin/users/users.component.ts

@@ -1,7 +1,7 @@
 import {Component} from "@angular/core";
 import {StakeholderBaseComponent} from "../../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
 import {Stakeholder} from "../../openaireLibrary/monitor/entities/stakeholder";
-import {User} from "../../openaireLibrary/login/utils/helper.class";
+import {Role, RoleUtils, User} from "../../openaireLibrary/login/utils/helper.class";
 import {Email} from "../../openaireLibrary/utils/email/email";
 import {Composer} from "../../openaireLibrary/utils/email/composer";
 import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeholder.service";
@@ -9,6 +9,8 @@ import {UserManagementService} from "../../openaireLibrary/services/user-managem
 import {ActivatedRoute} from "@angular/router";
 import {Title} from "@angular/platform-browser";
 import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
+import {ConfigurationService} from "../../openaireLibrary/utils/configuration/configuration.service";
+import {Irish} from "../../shared/irish";
 
 type Tab = 'member' | 'manager';
 
@@ -18,19 +20,21 @@ type Tab = 'member' | 'manager';
 })
 export class UsersComponent extends StakeholderBaseComponent {
 	public stakeholder: Stakeholder;
+  public roleUtils: RoleUtils = new RoleUtils();
   public link: string;
   public loading: boolean;
   public messages: Map<Tab, string> = new Map<Tab, string>();
   public tab: Tab = 'manager';
   public user: User;
   public emailComposer: Function = (name, recipient, role): Email => {
-    return Composer.composeEmailForMonitorDashboard(name, recipient, role);
+    return Composer.composeMessageForIrishDashboard(name, recipient, role);
   }
 
   constructor(private stakeholderService: StakeholderService,
               private userManagementService: UserManagementService,
               protected _route: ActivatedRoute,
-              protected _title: Title) {
+              protected _title: Title,
+              private configurationService: ConfigurationService) {
     super();
   }
   
@@ -50,13 +54,14 @@ export class UsersComponent extends StakeholderBaseComponent {
     this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
       if (stakeholder) {
 				this.stakeholder = stakeholder;
+        this.setProperties(this.stakeholder.alias, this.stakeholder.type, this.configurationService);
         this.title = this.stakeholder.name + " | " + this.users;
         this.setMetadata();
         this.link = this.getURL(this.stakeholder.alias);
-        this.messages.set("member", 'A member has the right to view the <b>restricted access</b> areas of this indicator\'s profile. ' +
-          'A member has <b>no access</b> to the administration part of the profile.');
-        this.messages.set("manager", 'A manager has the right to access the administration part of this indicator\'s profile, ' +
-          'where he is able to invite other users as members and access the sandbox.');
+        this.messages.set("member", 'A '  + this.roleUtils.roles.member + ' has the right to access the <b>sandbox</b> of this indicator\'s profile. ' +
+          'A ' + this.roleUtils.roles.member + ' has <b>no access</b> to the administration part of the profile.');
+        this.messages.set("manager", 'A '  + this.roleUtils.roles.manager + ' has the right to access the <b>administration part</b> of this indicator\'s profile, ' +
+          'where he is able to invite other users as '  + this.roleUtils.roles.member + 's and access the <b>sandbox.</b>');
         this.loading = false;
       }
     }));
@@ -64,7 +69,12 @@ export class UsersComponent extends StakeholderBaseComponent {
       this.user = user;
     }));
   }
-  
+
+  ngOnDestroy() {
+    super.ngOnDestroy();
+    this.setProperties(Irish.irishAdminToolsCommunity, Irish.irishAdminToolsPortalType, this.configurationService);
+  }
+
   get users(): string {
     return StringUtils.capitalize(this.tab) + 's';
   }
@@ -88,6 +98,8 @@ export class UsersComponent extends StakeholderBaseComponent {
       url = url + '/rpo/' + id;
     } else if(this.stakeholder.type === 'datasource') {
       url = url + '/repository/' + id;
+    } else if(this.stakeholder.type === 'country') {
+      url = url + '/national';
     }
     return  url + "?verify=";
   }

src/app/app-routing.module.ts

@@ -1,8 +1,7 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
 import {Irish} from "./shared/irish";
 import {ErrorPageComponent} from "./openaireLibrary/error/errorPage.component";
-import {AdminLoginGuard} from "./openaireLibrary/login/adminLoginGuard.guard";
 import {HasConsentGuard} from "./shared/hasConsent.guard";
 
 const routes: Routes = [
@@ -46,21 +45,45 @@ const routes: Routes = [
     loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule),
     data: {title: Irish.METADATA_PREFIX}
   },
+  {
+    path: 'how-it-works',
+    loadChildren: () => import('./resources/how-it-works/how-it-works.module').then(m => m.HowItWorksModule)
+  },
+  {
+    path: 'methodology',
+    loadChildren: () => import('./resources/methodology/methodology.module').then(m => m.MethodologyModule)
+  },
+  {
+    path: 'stats-logs', 
+    loadChildren: () => import('./public-logs/public-logs.module').then(m => m.PublicLogsModule)
+  },
+  {
+    path: 'engagement-training',
+    loadChildren: () => import('./resources/engagement/engagement.module').then(m => m.EngagementModule)
+  },
+  {
+    path: 'support',
+    loadChildren: () => import('./resources/support/support.module').then(m => m.SupportModule)
+  },
   {
     path: 'admin',
     loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
-    data: {title: Irish.METADATA_PREFIX + ' Admin | ', monitorCurator: true},
-    canActivateChild: [AdminLoginGuard, HasConsentGuard]
+    data: {title: Irish.METADATA_PREFIX + ' Admin | '},
+    canActivateChild: [HasConsentGuard]
   },
-  {path: 'public-logs', loadChildren: () => import('./public-logs/public-logs.module').then(m => m.PublicLogsModule)},
   {path: 'user-policy', loadChildren: () => import('./user-policy/user-policy.module').then(m => m.UserPolicyModule)},
   {path: 'participate', loadChildren: () => import('./claims/claims.module').then(m => m.ClaimsModule), canActivate: [HasConsentGuard]},
   {
-    path: '',
+    path: 'national',
     loadChildren: () => import('./national/national.module').then(m => m.NationalModule)
   },
+  {
+    path: '',
+    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
+  },
   {path: 'orcid', loadChildren: () => import('./orcid/orcid.module').then(m => m.LibOrcidModule), canActivate: [HasConsentGuard]},
   {path: 'my-orcid-links', loadChildren: () => import('./orcid/my-orcid-links/myOrcidLinks.module').then(m => m.LibMyOrcidLinksModule), canActivate: [HasConsentGuard]},
+  {path: 'orcid-discover-links', loadChildren: () => import('./orcid/discover-links/discover-links.module').then(m => m.DiscoverLinksModule), canActivate: [HasConsentGuard]},
   {path: 'error', component: ErrorPageComponent},
   {path: '**', pathMatch: 'full', component: ErrorPageComponent}
 ];

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, OnInit} from '@angular/core';
+import {AfterViewInit, ChangeDetectorRef, Component, HostListener, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
 import {MenuItem} from "./openaireLibrary/sharedComponents/menu";
 import {Header} from "./openaireLibrary/sharedComponents/navigationBar.component";
@@ -15,46 +15,76 @@ import {UserProfileService} from "./openaireLibrary/services/userProfile.service
 import {SearchOrcidService} from "./openaireLibrary/claims/claim-utils/service/searchOrcid.service";
 import {SearchResearchResultsService} from "./openaireLibrary/services/searchResearchResults.service";
 import {Identifier} from "./openaireLibrary/utils/string-utils.class";
+import {ConnectHelper} from "./openaireLibrary/connect/connectHelper";
+import {HelperService} from "./openaireLibrary/utils/helper/helper.service";
 
 @Component({
   selector: 'app-root',
   template: `
-      <div *ngIf="loading">
-          <loading [full]="true"></loading>
-      </div>
-      <div *ngIf="!loading" class="uk-background-default">
+      <div class="uk-background-default">
+          <div *ngIf="divContents && divContents['banner']" class="uk-tile uk-tile-default uk-padding uk-border-bottom">
+              <helper [texts]="divContents['banner']"></helper>
+          </div>
           <navbar *ngIf="hasHeader" portal="irish_monitor" [menuItems]="menuItems" [showMenu]="true"
                   [header]="header" [user]="user" [userMenuItems]="userMenuItems"></navbar>
-          <div [ngClass]="rootClass">
+          <div *ngIf="loading">
+              <loading [full]="true"></loading>
+          </div>
+          <div [class.uk-hidden]="loading" [ngClass]="rootClass">
               <div id="modal-container"></div>
               <main>
                   <router-outlet></router-outlet>
               </main>
+              <help-pop-up *ngIf="hasHelpPopUp && !isBottomIntersecting"></help-pop-up>
           </div>
       </div>
       <cookie-law *ngIf="isClient" position="bottom" cookieName="cookieLawSeen-NOAMIreland">
           National Open Access Monitor - Ireland, uses cookies in order to function properly.<br>
           Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing
           experience possible.
-          By using the National Open Access Monitor - Ireland portal you accept our use of cookies. <!--<a
-          href="https://www.openaire.eu/privacy-policy#cookies" target="_blank"> Read more <span class="uk-icon">
-            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right"
-                 ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03"
-                                     points="7 4 13 10 7 16"></polyline></svg>
-            </span></a>-->
+          By using the National Open Access Monitor - Ireland portal you accept our use of cookies.
       </cookie-law>
-      <!--<cookie-law *ngIf="isClient" position="top" cookieName="logActions-NOAMIreland">
-        National Open Access Monitor - Ireland, creates public logs for user actions.<br>
-        By using the National Open Access Monitor - Ireland portal you consent to log your actions <a
-         routerLink="/public-logs"> View Public logs <span class="uk-icon">
-            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right"
-                 ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03"
-                                     points="7 4 13 10 7 16"></polyline></svg>
-            </span></a>
-      </cookie-law>-->
+      <footer id="bottom" class="uk-text-center uk-text-small uk-border-top">
+          <div class="uk-tile-default">
+              <div class="uk-section uk-container">
+                  <div class="uk-flex uk-flex-middle uk-flex-center uk-margin-medium-bottom">
+                      <img src="assets/logo/small.svg" alt="National Open Access Monitor Ireland" style="width: 40px;"/>
+                      <div class="uk-margin-small-left">
+                          Platform in <span class="uk-text-bold">Pilot</span> Phase
+                      </div>
+                  </div>
+                  <div class="uk-margin-medium-bottom">
+                    <a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@m">
+                      <img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 17px;"></a>
+                  </div>
+                  <div class="uk-margin-bottom  uk-container uk-container-small">
+                      The National Open Access Monitor, Ireland is delivered as part of the National Open Access Monitor
+                      Project,
+                      managed by the <a href="https://irel.ie/" target="_blank">Irish Research eLibrary (IReL)</a> at
+                      Maynooth University.
+                      The project has received funding from Ireland's <a href="https://dri.ie/norf/" target="_blank">National
+                      Open Research Forum (NORF)</a>
+                      under the Open Research Fund Call.
+                  </div>
+                  <div class="uk-margin-bottom">
+                      <img title="Rialtas" src="assets/Rialtas_Mark_Std_Colour.png"
+                           class=" uk-padding-xsmall uk-padding-remove-vertical" style="height: 50px;">
+                      <img title="HEA" src="assets/hea-logo.png" class=" uk-padding-xsmall uk-padding-remove-vertical"
+                           style="height: 30px;">
+                      <img title="Maynooth University" src="assets/Maynooth University Logo.png"
+                           class=" uk-padding-small uk-padding-remove-vertical" style="height: 30px;">
+                    <img  title="NORF" src="assets/norf.jpg" class=" uk-padding-small uk-padding-remove-vertical" style="height: 30px;">
+                    <img title="IRel" src="assets/IReL logo.png" class=" uk-padding-small uk-padding-remove-vertical"
+                           style="height: 30px;">
+                      <img title="OpenAIRE" src="assets/common-assets/common/Logo_Horizontal.png"
+                           class=" uk-padding-small uk-padding-remove-vertical" style="height: 30px;">
+                  </div>
+              </div>
+          </div>
+      </footer>
   `
 })
-export class AppComponent extends ResearcherBaseComponent implements OnInit {
+export class AppComponent extends ResearcherBaseComponent implements OnInit, AfterViewInit {
   loading: boolean = false;
   hasHeader: boolean = true;
   rootClass: string;
@@ -64,7 +94,7 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit {
     logoUrl: 'assets/logo/main.svg',
     logoSmallUrl: 'assets/logo/small.svg',
     position: 'left',
-    badge: true,
+    badge: true
   };
   menuItems: MenuItem[] = [];
   userMenuItems: MenuItem[] = [];
@@ -72,6 +102,11 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit {
   user: User;
   isClient: boolean = false;
   stakeholderUtils: StakeholderUtils = new StakeholderUtils();
+  windowWidth: number;
+  compactMenuItems: boolean = false;
+  hasHelpPopUp: boolean = true;
+  isBottomIntersecting: boolean = false;
+  divContents: any;
 
   constructor(protected _route: ActivatedRoute,
               protected _router: Router,
@@ -81,13 +116,21 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit {
               private configurationService: ConfigurationService,
               private customFilterService: CustomFilterService,
               private userManagementService: UserManagementService,
-              private userProfileService:UserProfileService,
+              private userProfileService: UserProfileService,
+              private helper: HelperService,
               protected _searchOrcidService: SearchOrcidService,
               protected _searchResearchResultsService: SearchResearchResultsService
   ) {
     super();
-    this.configurationService.initStaticPortal(this.irish.portal);
+    this.setProperties(this.properties.adminToolsCommunity, this.properties.adminToolsPortalType);
     this.userManagementService.fixRedirectURL = this.properties.afterLoginRedirectLink;
+    this.userManagementService.allowDoubleRedirectToFixAndCurrentPage = true;
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.getWindowWidth();
+    this.buildMenuItems();
   }
 
   ngOnDestroy() {
@@ -100,20 +143,47 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit {
 
   ngOnInit() {
     this.isClient = typeof document !== 'undefined';
+    this.subscriptions.push(this.layoutService.hasHelpPopUp.subscribe(value => {
+      this.hasHelpPopUp = value;
+      this.cdr.detectChanges();
+    }));
+    this.subscriptions.push(this.layoutService.isBottomIntersecting.subscribe(isBottomIntersecting => {
+      this.isBottomIntersecting = isBottomIntersecting;
+      this.cdr.detectChanges();
+    }));
+    if(this.isClient) {
+      this.getWindowWidth();
+    }
+    if (this.properties.environment == 'beta') {
+      this.header.environmentBadge = {
+        asset: 'assets/badge/sandbox.svg'
+      }
+    } else {
+      this.header.environmentBadge = {
+        asset: 'assets/badge/pilot.svg',
+        routerLink: '/how-it-works/about'
+      }
+    }
     this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
       this.user = user;
-      if(user){
+      if (user) {
         this.userProfileService.initUserProfile()
-      }else{
+      } else {
         this.userProfileService.setUserProfile(null);
       }
       this.initialize();
     }));
+    this.getDivContents();
+  }
+
+  ngAfterViewInit() {
     this.subscriptions.push(this.layoutService.rootClass.subscribe(rootClass => {
-      if(rootClass && this.isClient) {
+      this.loading = true;
+      this.cdr.detectChanges();
+      if (rootClass && this.isClient) {
         let link = <HTMLLinkElement>document.getElementById('theme');
         let append = false;
-        if(!link) {
+        if (!link) {
           link = document.createElement('link');
           link.rel = 'stylesheet';
           link.id = 'theme';
@@ -121,37 +191,77 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit {
         }
         link.href = rootClass + '.css';
         link.onerror = (error) => console.log(error);
-        if(append) {
+        if (append) {
           document.head.appendChild(link);
         }
       }
       this.rootClass = rootClass;
       this.cdr.detectChanges();
+      setTimeout(() => {
+        this.loading = false;
+        this.cdr.detectChanges();
+      }, 500)
     }));
-
   }
 
   initialize() {
-    this.menuItems = [
-      new MenuItem("national", this.stakeholderUtils.entities.country + ' ' + this.stakeholderUtils.entities.stakeholder, "", "/", false, [], null, {}, null, null, null),
-      new MenuItem("rpo", this.stakeholderUtils.entities.organization + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rpo", false, [], null, {}, null, null, null, "/rpo"),
-      new MenuItem("rfo", this.stakeholderUtils.entities.funder + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rfo", false, [], null, {}, null, null, null, "/rfo"),
-      new MenuItem("researcher", "Researcher Monitors", "", "/researcher", false, [], null, {}, null, null, null, "/researcher"),
-      new MenuItem("repository", "Repository Monitors", "", "/repository", false, [], null, {}, null, null, null, "/repository"),
-      new MenuItem("resources", "Resources", "", "", false, [], null, {}, null, null, null,
-        "/resources","_blank", "internal", false, [new MenuItem("public-logs", "Public logs", "", "/public-logs", false, [], null, {}, null, null, null, "/public-logs")]),
-    ];
+    this.buildMenuItems();
+  }
+
+  buildMenuItems() {
+    if(this.compactMenuItems) {
+      this.menuItems = [
+        new MenuItem("home", "Home", "", "/", false, [], null, {}, null, null, null),
+        new MenuItem("monitors", "Monitors", "", "", false, [], null, {}, null, null, null, "/monitors", "_blank", "internal", false,
+              [
+                new MenuItem("national", this.stakeholderUtils.entities.country, "", "/national", false, [], null, {}, null, null, null),
+                new MenuItem("rpo", this.stakeholderUtils.entities.organization, "", "/rpo", false, [], null, {}, null, null, null, "/rpo"),
+                new MenuItem("rfo", this.stakeholderUtils.entities.funder, "", "/rfo", false, [], null, {}, null, null, null, "/rfo"),
+                new MenuItem("researcher", "Researcher", "", "/researcher", false, [], null, {}, null, null, null, "/researcher"),
+                new MenuItem("repository", "Repository", "", "/repository", false, [], null, {}, null, null, null, "/repository")
+              ]
+          )
+      ];
+    } else {
+      this.menuItems = [
+        new MenuItem("home", "Home", "", "/", false, [], null, {}, null, null, null),
+        new MenuItem("national", this.stakeholderUtils.entities.country + ' ' + this.stakeholderUtils.entities.stakeholder, "", "/national", false, [], null, {}, null, null, null),
+        new MenuItem("rpo", this.stakeholderUtils.entities.organization + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rpo", false, [], null, {}, null, null, null, "/rpo"),
+        new MenuItem("rfo", this.stakeholderUtils.entities.funder + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rfo", false, [], null, {}, null, null, null, "/rfo"),
+        new MenuItem("researcher", "Researcher Monitors", "", "/researcher", false, [], null, {}, null, null, null, "/researcher"),
+        new MenuItem("repository", "Repository Monitors", "", "/repository", false, [], null, {}, null, null, null, "/repository")
+      ];
+    }
+    if (this.properties.environment != "beta") {
+      this.menuItems.push(
+          new MenuItem("resources", "Resources & Help", "", "", false, [], null, {}, null, null, null, "/resources", "_blank", "internal", false,
+              [
+                new MenuItem("how-it-works", "How it works?", "", "", false, [], null, {}, null, null, null, null, "_self"),
+                new MenuItem("about", "About", "", "/how-it-works/about", false, [], null, {}, null, null, null, "/how-it-works/about"),
+                new MenuItem("the-5-monitors", "The 5 Monitors", "", "/how-it-works/the-5-monitors", false, [], null, {}, null, null, null, "/the-5-monitors"),
+                new MenuItem("user-actions", "User Actions", "", "/how-it-works/user-actions", false, [], null, {}, null, null, null, "/how-it-works/user-actions"),
+                new MenuItem("methodology", "Methodology", "", "", false, [], null, {}, null, null, null, null, "_self"),
+                new MenuItem("methodological-approach", "Methodological Approach", "", "/methodology/methodological-approach", false, [], null, {}, null, null, null, "/methodological-approach"),
+                new MenuItem("terminology-construction", "Terminology & Construction", "", "/methodology/terminology", false, [], null, {}, null, null, null, "/methodology/terminology"),
+                new MenuItem("help", "Help", "", "", false, [], null, {}, null, null, null, null, "_self"),
+                new MenuItem("stats-logs", "Web Statistics & Activity Logs", "", "/stats-logs", false, [], null, {}, null, null, null, "/stats-logs"),
+                new MenuItem("engagement-training", "Engagement & Training", "", "/engagement-training", false, [], null, {}, null, null, null, "/engagement-training"),
+                new MenuItem("support", "Support", "", "/support", false, [], null, {}, null, null, null, "/support"),
+                new MenuItem("privacy-policy", "Privacy Policy", "/assets/privacy-policy.pdf", "", false, [], null, {}, null, null, null, null, "_blank"),
+              ]
+          )
+      )
+    }
     if (this.user) {
       this.userMenuItems = [];
-      // this.user.orcid = '0000-0003-4768-182X';
-      if(this.user.orcid) {
+      if (this.user.orcid) {
         this.authorId = Identifier.getRawORCID(this.user.orcid);
         this.results = {
           success: (res: string | number) => {
-            if(+res > 0) {
+            if (+res > 0) {
               this.userMenuItems.push(new MenuItem("my-researcher", "My Researcher Monitor", "", "/researcher/" + this.authorId, false, [], null, {}, null, null, null, null));
               this.staticUserItems();
-            }else{
+            } else {
               this.staticUserItems();
             }
           }
@@ -164,8 +274,10 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit {
   }
 
   staticUserItems() {
+    if(this.properties.environment != "beta"){
+      this.userMenuItems.push(new MenuItem("myorcidlinks", "My Orcid links", "", "/my-orcid-links", false, [], null, {}, null, null, null, null));
+    }
     this.userMenuItems.push(
-        new MenuItem("myorcidlinks", "My Orcid links", "", "/my-orcid-links", false, [], null, {}, null, null, null, null),
         new MenuItem("myclaims", "My links", "", "/participate/myclaims", false, [], null, {}, null, null, null, null),
         new MenuItem("claims", "Link", "", "/participate/claim", false, [], null, {}, null, null, null, null),
         new MenuItem("upload-dois", "Upload DOIs", "", "/upload-dois", false, [], null, {}, null, null, null, null)
@@ -173,9 +285,38 @@ export class AppComponent extends ResearcherBaseComponent implements OnInit {
     if (this.isAdmin) {
       this.userMenuItems.push(new MenuItem("stakeholders", "Manage profiles", "", "/admin", false, [], [], {}, {name: 'settings'}));
     }
+    if (Session.isPortalAdministrator(this.user)) {
+      this.userMenuItems.push(new MenuItem("adminOptions", "Super Admin options", "", "/admin/admin-tools/portals", false, [], [], {}, null, null, "uk-visible@m"));
+    }
+    if (Session.isPortalAdministrator(this.user) || Session.isCurator('country', this.user)) {
+      this.userMenuItems.push(new MenuItem("irishOptions", "Irish options", "", "/admin/irish/admin-tools/pages", false, [], [], {}, null, null, "uk-visible@m"));
+    }
+  }
+
+  private getDivContents() {
+    this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'irish', '/').subscribe(contents => {
+      this.divContents = contents;
+    }));
+  }
+
+  setProperties(id, type = null) {
+    this.properties.adminToolsCommunity = id;
+    if (type) {
+      this.properties.adminToolsPortalType = type;
+    } else {
+      ConnectHelper.setPortalTypeFromPid(id);
+    }
+    this.configurationService.initPortal(this.properties, this.properties.adminToolsCommunity);
   }
 
   public get isAdmin() {
-    return Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user);
+    return Session.isPortalAdministrator(this.user) || Session.isMonitorCurator(this.user) || Session.isKindOfMonitorManager(this.user);
+  }
+
+  getWindowWidth() {
+    this.windowWidth = window.innerWidth;
+    let mBreakpoint = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--uk-breakpoint-m'));
+    let xlBreakpoint = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--uk-breakpoint-xl'));
+    this.compactMenuItems = this.windowWidth > mBreakpoint && this.windowWidth <= xlBreakpoint;
   }
 }

src/app/app.module.ts

@@ -16,9 +16,11 @@ import {ErrorModule} from "./openaireLibrary/error/error.module";
 import {CookieLawModule} from "./openaireLibrary/sharedComponents/cookie-law/cookie-law.module";
 import {SearchResearchResultsServiceModule} from "./openaireLibrary/services/searchResearchResultsService.module";
 import {SearchOrcidService} from "./openaireLibrary/claims/claim-utils/service/searchOrcid.service";
-import {LoginGuard} from "./openaireLibrary/login/loginGuard.guard";
-import {HasConsentGuard} from "./shared/hasConsent.guard";
 import {SearchOrcidServiceModule} from "./openaireLibrary/claims/claim-utils/service/searchOrcidService.module";
+import {HelpPopUpModule} from './shared/help-pop-up/help-pop-up.module';
+import {RouteReuseStrategy} from '@angular/router';
+import {CustomRouteReuseStrategy} from './openaireLibrary/shared/custom-route-reuse-strategy';
+import {HelperModule} from "./openaireLibrary/utils/helper/helper.module";
 
 @NgModule({
   declarations: [
@@ -36,10 +38,13 @@ import {SearchOrcidServiceModule} from "./openaireLibrary/claims/claim-utils/ser
     AppRoutingModule,
     CookieLawModule,
     SearchResearchResultsServiceModule,
-    SearchOrcidServiceModule
+    SearchOrcidServiceModule,
+    HelpPopUpModule,
+    HelperModule
   ],
   providers: [
     SearchOrcidService,
+    {provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy},
     {provide: APP_ID, useValue: 'irish-monitor'},
     {
       provide: HTTP_INTERCEPTORS,

src/app/claims/myClaims/myClaims.component.ts

@@ -5,19 +5,11 @@ import {properties} from "../../../environments/environment";
 @Component({
   selector: 'openaire-my-claims',
   template: `
-    <my-claims *ngIf="userInfoURL && claimsInfoURL" [claimsInfoURL]="claimsInfoURL">
+    <my-claims>
     </my-claims>
   `
   
 })
-export class OpenaireMyClaimsComponent implements OnInit {
-  claimsInfoURL: string;
-  userInfoURL: string;
-  
-  constructor() {
-  }
-  
-  public ngOnInit() {
-    this.claimsInfoURL = properties.claimsInformationLink;
-  }
+export class OpenaireMyClaimsComponent {
+
 }

src/app/contact/contact.component.html

@@ -1,5 +1,5 @@
 <schema2jsonld *ngIf="url" [URL]="url" [name]="title" type="other" [description]="description"></schema2jsonld>
-<div>
+<div *ngIf="page">
   <div class="uk-section uk-container uk-container-large uk-flex uk-flex-center"
     uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
     <div class="uk-padding-small uk-width-1-2@l uk-width-2-3@m uk-width-1-1">
@@ -8,7 +8,7 @@
         <h1 page-title class="uk-visible@m uk-margin-auto uk-text-center" uk-scrollspy-class>
           Contact us<span class="uk-text-primary">.</span>
         </h1>
-				<h1 page-title class="uk-hidden@m uk-heading-large uk-margin-auto uk-text-center" uk-scrollspy-class>
+		<h1 page-title class="uk-hidden@m uk-heading-large uk-margin-auto uk-text-center" uk-scrollspy-class>
           Contact us<span class="uk-text-primary">.</span>
         </h1>
       </contact-us>
@@ -20,3 +20,28 @@
     Our team will respond to your submission soon.<br>
   </div>
 </modal-alert>
+<ng-container *ngIf="!page">
+  <a class="uk-link-reset" (click)="openFsModal()">
+    <div class="uk-flex uk-flex-top">
+      <icon name="description" flex="true" customClass="uk-text-primary"></icon>
+      <div class="uk-margin-small-left">
+        <p class="uk-text-bold uk-margin-xsmall-bottom">Give us your feedback</p>
+        <span class="uk-text-small uk-text-meta">Give general feedback of this platform.</span>
+      </div>
+    </div>
+  </a>
+  <fs-modal #fsModal>
+    <div class="uk-section uk-container uk-container-large uk-flex uk-flex-center">
+      <div class="uk-padding-small uk-width-1-2@l uk-width-2-3@m uk-width-1-1">
+        <contact-us [sending]="sending" [contactForm]="contactForm" (sendEmitter)="send($event)">
+          <h1 page-title class="uk-visible@m uk-margin-auto uk-text-center" >
+            Contact us<span class="uk-text-primary">.</span>
+          </h1>
+          <h1 page-title class="uk-hidden@m uk-heading-large uk-margin-auto uk-text-center">
+            Contact us<span class="uk-text-primary">.</span>
+          </h1>
+        </contact-us>
+      </div>
+    </div>
+  </fs-modal>
+</ng-container>

src/app/contact/contact.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {EmailService} from "../openaireLibrary/utils/email/email.service";
 import {Composer} from "../openaireLibrary/utils/email/composer";
@@ -8,16 +8,19 @@ import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
 import {UntypedFormBuilder, UntypedFormGroup, Validators} from "@angular/forms";
 import {NotificationHandler} from "../openaireLibrary/utils/notification-handler";
 import {BaseComponent} from '../openaireLibrary/sharedComponents/base/base.component';
+import {FullScreenModalComponent} from "../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.component";
 
 @Component({
     selector: 'contact',
     templateUrl: './contact.component.html'
 })
 export class ContactComponent extends BaseComponent implements OnInit {
-    public url: string = null;
+    @Input()
+    public page: boolean = true;
     public sending = false;
     public contactForm: UntypedFormGroup;
     @ViewChild('modal') modal;
+    @ViewChild('fsModal') fsModal: FullScreenModalComponent;
     
     constructor(protected _route: ActivatedRoute,
                 protected _router: Router,
@@ -31,10 +34,11 @@ export class ContactComponent extends BaseComponent implements OnInit {
     }
     
     ngOnInit() {
-      this.title = 'Contact us';
-      this.description = 'Contact us';
-      this.url = this.properties.domain + this.properties.baseLink + this._router.url;
-      this.setMetadata();
+      if(this.page) {
+        this.title = 'Contact us';
+        this.description = 'Contact us';
+        this.setMetadata();
+      }
       this.reset();
     }
 
@@ -44,11 +48,11 @@ export class ContactComponent extends BaseComponent implements OnInit {
       }
     }
 
-    public reset() {
+    public reset(subject: string = null) {
       this.contactForm = this.fb.group( {
         name: this.fb.control('', Validators.required),
         email: this.fb.control('', [Validators.required, Validators.email]),
-        subject: this.fb.control('', Validators.required),
+        subject: this.fb.control(subject, Validators.required),
         message: this.fb.control('', Validators.required),
         recaptcha: this.fb.control('', Validators.required),
       });
@@ -62,7 +66,11 @@ export class ContactComponent extends BaseComponent implements OnInit {
         res => {
           if (res) {
             this.sending = false;
-            this.reset();
+            if(this.fsModal) {
+              this.fsModal.cancel();
+            } else {
+              this.reset();
+            }
             this.modalOpen();
           } else {
             this.handleError('Email <b>sent failed!</b> Please try again.');
@@ -74,14 +82,21 @@ export class ContactComponent extends BaseComponent implements OnInit {
       ));
     }
 
+    public openFsModal() {
+      this.reset(this._title.getTitle());
+      this.fsModal.open();
+    }
+
     public modalOpen() {
-      this.modal.okButton = true;
-      this.modal.alertTitle = 'Your request has been successfully submitted';
-      this.modal.alertMessage = false;
-      this.modal.cancelButton = false;
-      this.modal.okButtonLeft = false;
-      this.modal.okButtonText = 'OK';
-      this.modal.open();
+      if(this.modal) {
+        this.modal.okButton = true;
+        this.modal.alertTitle = 'Your request has been successfully submitted';
+        this.modal.alertMessage = false;
+        this.modal.cancelButton = false;
+        this.modal.okButtonLeft = false;
+        this.modal.okButtonText = 'OK';
+        this.modal.open();
+      }
     }
 
     handleError(message: string, error = null) {
@@ -94,6 +109,8 @@ export class ContactComponent extends BaseComponent implements OnInit {
     }
 
     public goToHome() {
-      this._router.navigate(['/']);
+      if(!this.fsModal) {
+        this._router.navigate(['/']);
+      }
     }
 }

src/app/contact/contact.module.ts

@@ -10,13 +10,15 @@ import {AlertModalModule} from "../openaireLibrary/utils/modal/alertModal.module
 import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
 import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
 import {ContactUsModule} from "../openaireLibrary/contact-us/contact-us.module";
+import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
+import {FullScreenModalModule} from "../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.module";
 
 
 @NgModule({
   imports: [
     ContactRoutingModule, CommonModule, RouterModule,
     AlertModalModule, RecaptchaModule,
-    Schema2jsonldModule, ContactUsModule
+    Schema2jsonldModule, ContactUsModule, IconsModule, FullScreenModalModule
   ],
   declarations: [
     ContactComponent

src/app/home/home.component.html

@@ -0,0 +1,221 @@
+<div class="uk-tile-default">
+    <div class="uk-section uk-container hero">
+        <div class="uk-grid uk-flex-middle" uk-grid>
+            <h1 class="title uk-h2">
+                Empowering 100% Open Access in Irish Scholarly Research
+            </h1>
+            <div class="uk-text-large uk-width-1-1 uk-width-medium@m uk-flex-last@m">
+                <div>
+                    Enhance your approach to Open Science. Explore insights thoughtfully designed to support your
+                    strategy and contribute to the future of Irish Open Science. In our current pilot phase we are
+                    aiming at enhancing data integrity, broadening functionality and embedding the Monitor into the
+                    Irish scholarly ecosystem.
+                </div>
+                <a routerLink="/national" class="uk-button uk-button-secondary uk-margin-top">Take a look</a>
+            </div>
+            <h1 class="national-monitor uk-width-expand uk-visible@m">
+                <img src="assets/irish-assets/home/dashboard.png">
+            </h1>
+            <img class="uk-hidden@m" src="assets/irish-assets/home/dashboard-mobile.png">
+        </div>
+    </div>
+</div>
+<div class="uk-section">
+    <div class="uk-container">
+        <div class="uk-grid uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-4@m" uk-grid>
+            <div>
+                <h6>Tailored Monitoring</h6>
+                <div>
+                    Explore role-specific insights through our diverse dashboard types, driving priorities with
+                    precision and efficiency.
+                </div>
+            </div>
+            <div>
+                <h6>Benchmarking & Evaluation</h6>
+                <div>
+                    Effectively measure your progress against community standards and assess the impact of your Open
+                    Science initiatives.
+                </div>
+            </div>
+            <div>
+                <h6>Evidence-based decision</h6>
+                <div>
+                    Leverage a wealth of information to make informed choices that advance your objectives.
+                </div>
+            </div>
+            <div>
+                <h6>Collaboration Catalyst</h6>
+                <div>
+                    Transform complex data into valuable insights, fostering collaborations and partnerships.
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="uk-section uk-background-secondary dark">
+    <div class="uk-container">
+        <h2 class="uk-text-center uk-light">All in one platform</h2>
+        <div class="uk-margin-large-top uk-grid uk-grid-small uk-child-width-1-1 uk-child-width-1-2@m"
+             uk-height-match=".column" uk-grid>
+            <div>
+                <div class="uk-card uk-card-default uk-card-body column uk-flex uk-flex-column">
+                    <div class="uk-text-primary uk-text-large">National Monitor</div>
+                    <h3 class="uk-margin-remove-top uk-width-large">Explore Ireland’s Research Overview</h3>
+                    <div class="uk-width-large uk-width-expand uk-margin-medium-bottom uk-text-large">
+                        Dive into the National Dashboard for a comprehensive view of Ireland’s Open Access landscape or
+                        explore our other four types of tailor-made dashboards.
+                    </div>
+                    <div class="uk-flex uk-flex-right">
+                        <a routerLink="/national"
+                           class="uk-link-reset uk-text-large uk-text-bolder uk-flex uk-flex-middle">
+                            <span>National Monitor</span>
+                            <button class="uk-icon-button uk-button-primary uk-margin-left"
+                                    [class.uk-icon-button-small]="isMobile">
+                                <icon name="north_east" [flex]="true" [ratio]="isMobile?1:1.5"></icon>
+                            </button>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div>
+                <div class="uk-grid column uk-grid-small uk-child-width-1-1 uk-child-width-1-2@s" uk-grid>
+                    <div>
+                        <div class="uk-card uk-card-default uk-flex uk-flex-column uk-padding-small uk-height-1-1">
+                            <h6 class="uk-margin-remove-top uk-width-expand">Research Performing Organisations
+                                Monitors</h6>
+                            <div class="uk-flex uk-flex-right uk-margin-top organization">
+                                <a routerLink="/rpo">
+                                    <button class="uk-icon-button uk-icon-button-small uk-button-primary uk-margin-left">
+                                        <icon name="north_east" [flex]="true"></icon>
+                                    </button>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <div class="uk-card uk-card-default uk-flex uk-flex-column uk-padding-small uk-height-1-1">
+                            <h6 class="uk-margin-remove-top uk-width-expand">Researchers monitors</h6>
+                            <div class="uk-flex uk-flex-right researcher">
+                                <a routerLink="/researcher">
+                                    <button class="uk-icon-button uk-icon-button-small uk-button-primary uk-margin-left">
+                                        <icon name="north_east" [flex]="true"></icon>
+                                    </button>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <div class="uk-card uk-card-default uk-flex uk-flex-column uk-padding-small uk-height-1-1">
+                            <h6 class="uk-margin-remove-top uk-width-expand">Research Funding Organisations
+                                Monitors</h6>
+                            <div class="uk-flex uk-flex-right funder">
+                                <a routerLink="/rfo">
+                                    <button class="uk-icon-button uk-icon-button-small uk-button-primary uk-margin-left">
+                                        <icon name="north_east" [flex]="true"></icon>
+                                    </button>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div>
+                        <div class="uk-card uk-card-default uk-flex uk-flex-column uk-padding-small uk-height-1-1">
+                            <h6 class="uk-margin-remove-top uk-width-expand">Repositories Monitors</h6>
+                            <div class="uk-flex uk-flex-right datasource">
+                                <a routerLink="/repository">
+                                    <button class="uk-icon-button uk-icon-button-small uk-button-primary uk-margin-left">
+                                        <icon name="north_east" [flex]="true"></icon>
+                                    </button>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <hr class="uk-margin-large">
+        <div class="uk-grid uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
+            <div>
+                <h3 class="uk-light">
+                    Enhancing data quality through user engagement
+                </h3>
+                <div class="uk-light uk-margin-medium-bottom">
+                    We encourage active participation from our users to refine and improve the data quality on our
+                    platform. Collaborate with us, utilize the tools provided, and contribute to shaping a robust Open
+                    Access environment.
+                </div>
+                <a class="uk-button uk-button-secondary" routerLink="/how-it-works/user-actions">Learn More</a>
+            </div>
+            <div class="uk-grid uk-grid-small uk-child-width-1-1 uk-child-width-1-2@s"
+                 uk-height-match="target: .uk-card; row: false" uk-grid>
+                <div>
+                    <div class="uk-card uk-card-default uk-flex uk-flex-column uk-padding-small">
+                        <h6>Add to ORCID</h6>
+                        <div class="uk-text-small uk-width-expand uk-padding-xsmall uk-padding-remove-horizontal uk-margin-medium-bottom">
+                            Sync and enhance your ORCID record.
+                        </div>
+                        <div class="uk-flex uk-flex-right">
+                            <a routerLink="/my-orcid-links" class="uk-link-reset uk-text-bolder uk-flex uk-flex-middle">
+                                <span>Add to ORCID</span>
+                                <button class="uk-icon-button uk-icon-button-small uk-button-secondary uk-margin-left">
+                                    <icon name="north_east" [flex]="true"></icon>
+                                </button>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-card uk-card-default uk-flex uk-flex-column uk-padding-small">
+                        <h6>Link your research</h6>
+                        <div class="uk-text-small uk-width-expand uk-padding-xsmall uk-padding-remove-horizontal uk-margin-medium-bottom">
+                            Connect research results with projects, research communities, or other research outcomes.
+                        </div>
+                        <div class="uk-flex uk-flex-right">
+                            <a routerLink="/participate/claim"
+                               class="uk-link-reset uk-text-bolder uk-flex uk-flex-middle">
+                                <span>Link</span>
+                                <button class="uk-icon-button uk-icon-button-small uk-button-secondary uk-margin-left">
+                                    <icon name="north_east" [flex]="true"></icon>
+                                </button>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="uk-card uk-card-default uk-flex uk-flex-column uk-padding-small">
+                        <h6>Upload DOIs</h6>
+                        <div class="uk-text-small uk-width-expand uk-padding-xsmall uk-padding-remove-horizontal uk-margin-medium-bottom">
+                            Obtain detailed information about your publications.
+                        </div>
+                        <div class="uk-flex uk-flex-right">
+                            <a routerLink="/upload-dois" class="uk-link-reset uk-text-bolder uk-flex uk-flex-middle">
+                                <span>Upload DOIs</span>
+                                <button class="uk-icon-button uk-icon-button-small uk-button-secondary uk-margin-left">
+                                    <icon name="north_east" [flex]="true"></icon>
+                                </button>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="uk-section uk-container uk-container-small">
+    <div class="uk-grid uk-flex-middle" uk-grid>
+        <div class="uk-width-1-1 uk-flex uk-flex-middle curators">
+            <img class="uk-margin-medium-right" src="assets/irish-assets/curators/3.jpg">
+            <img class="uk-margin-medium-right" src="assets/irish-assets/curators/4.jpg">
+            <img src="assets/irish-assets/curators/1.jpg">
+        </div>
+        <div class="uk-width-1-1 uk-width-2-3@s">
+            <h3>We Value Your Feedback.</h3>
+            <div class="uk-width-large">Your insights and feedback are crucial. Reach out with questions, comments, or
+                to collaborate on data quality.
+            </div>
+        </div>
+        <div class="uk-width-1-1 uk-width-expand@s uk-flex uk-flex-center">
+            <a routerLink="/contact-us" class="uk-button uk-button-secondary">Contact us</a>
+        </div>
+    </div>
+</div>
+<schema2jsonld *ngIf="url" [URL]="url" [name]="title" type="other" [description]="description"></schema2jsonld>

src/app/home/home.component.less

@@ -0,0 +1,99 @@
+@import (reference) "~src/assets/extend-theme/less/_import-variables";
+
+@title-width: 350px;
+@dot-size: 45px;
+@card-border-radius: 14px;
+@curator-image-size: 80px;
+@curator-border-radius: 18px;
+
+.hero {
+  background-image: url("~/src/assets/irish-assets/home/logo-shadow.png");
+  background-position: center -100%;
+  background-repeat: no-repeat;
+}
+
+@media (max-width: @breakpoint-small-max) {
+  .hero {
+    background-position: center bottom;
+  }
+}
+
+.national-monitor {
+  position: relative;
+
+  img {
+    position: relative;
+  }
+
+  &::before {
+    content: 'National OA Monitor';
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    white-space: nowrap;
+    mix-blend-mode: overlay;
+  }
+}
+
+.title {
+  width: @title-width;
+
+  &::after {
+    content: '';
+    background-image: url("~/src/assets/irish-assets/home/dot.svg");
+    background-size: contain;
+    width: @dot-size;
+    height: @dot-size;
+    display: inline-flex;
+    transform: translateY(50%);
+  }
+}
+
+.uk-card {
+  border-radius: @card-border-radius;
+}
+
+.country:not(:hover) .uk-button-primary {
+  background-color: @country-color;
+  color: @global-inverse-color;
+}
+
+.funder:not(:hover) .uk-button-primary {
+  background: @funder-color;
+  color: @global-inverse-color;
+}
+
+.organization:not(:hover) .uk-button-primary {
+  background-color: @organization-color;
+  color: @global-inverse-color;
+}
+
+.researcher:not(:hover) .uk-button-primary {
+  background-color: @researcher-color;
+  color: @global-inverse-color;
+}
+
+.datasource:not(:hover) .uk-button-primary {
+  background-color: @datasource-color;
+  color: @global-inverse-color;
+}
+
+.curators {
+
+  img {
+    width: @curator-image-size;
+    height: @curator-image-size;
+    object-fit: cover;
+    border-radius: @curator-border-radius;
+
+    &:nth-child(2) {
+      transform: rotate(-10deg);
+      object-position: left;
+    }
+
+    &:last-child {
+      transform: rotate(10deg);
+    }
+  }
+}

src/app/home/home.component.ts

@@ -0,0 +1,39 @@
+import {ChangeDetectorRef, Component, OnInit} from "@angular/core";
+import {BaseComponent} from "../openaireLibrary/sharedComponents/base/base.component";
+import {ActivatedRoute, Router} from "@angular/router";
+import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
+import {Meta, Title} from "@angular/platform-browser";
+import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
+
+@Component({
+  selector: 'home',
+  templateUrl: 'home.component.html',
+  styleUrls: ['home.component.less']
+})
+export class HomeComponent extends BaseComponent implements OnInit {
+  title: string = 'OA Monitor Ireland';
+  description: string = 'OA Monitor Ireland';
+  isMobile: boolean = false;
+
+  constructor(
+    protected _route: ActivatedRoute,
+    protected _piwikService: PiwikService,
+    protected _meta: Meta,
+    protected seoService: SEOService,
+    protected _title: Title,
+    protected _router: Router,
+    private layoutService: LayoutService,
+    private cdr: ChangeDetectorRef
+    ) {
+      super();
+  }
+
+  ngOnInit() {
+    this.setMetadata();
+    this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
+      this.isMobile = isMobile;
+      this.cdr.detectChanges();
+    }));
+  }
+}

src/app/home/home.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {RouterModule} from "@angular/router";
+import {HomeComponent} from "./home.component";
+import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
+import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
+
+@NgModule({
+  imports: [CommonModule, RouterModule.forChild([
+    {path: '', component: HomeComponent}
+  ]), IconsModule, Schema2jsonldModule],
+  declarations: [HomeComponent],
+  exports: [HomeComponent]
+})
+export class HomeModule {
+
+}

src/app/national/national.component.ts

@@ -11,64 +11,77 @@ import {CustomFilterService} from "../openaireLibrary/shared/customFilter.servic
 import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
 import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
 import {OpenaireEntities} from "../openaireLibrary/utils/properties/searchFields";
-import {RouterHelper} from "../openaireLibrary/utils/routerHelper.class";
-import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
+import {ConfigurationService} from "../openaireLibrary/utils/configuration/configuration.service";
+import {Session} from "../openaireLibrary/login/utils/helper.class";
+import {properties as beta} from "../../environments/environment.beta";
+import {UserManagementService} from "../openaireLibrary/services/user-management.service";
 
 @Component({
   selector: 'national',
   template: `
       <div>
-        <loading *ngIf="loading" class="uk-position-center"></loading>
-        <div *ngIf="!loading && stakeholder">
-            <div class="uk-banner uk-light">
-                <div class="uk-container uk-container-large">
-                  <div class="uk-padding-small uk-padding-remove-vertical">
-                    <div class="uk-grid uk-grid-large uk-flex-middle uk-margin-medium-bottom" uk-grid>
-                      <div class="uk-width-expand">
-                        <h1 *ngIf="stakeholder" class="uk-h4 uk-margin-remove uk-text-truncate">{{entities.country}} {{entities.stakeholder}}</h1>
+          <loading *ngIf="loading" class="uk-position-center"></loading>
+          <div *ngIf="!loading && stakeholder">
+              <div class="uk-banner uk-light">
+                  <div class="uk-container uk-container-large">
+                      <div class="uk-padding-small uk-padding-remove-vertical">
+                          <div class="uk-grid uk-grid-large uk-flex-middle uk-margin-medium-bottom" uk-grid>
+                              <div class="uk-width-expand">
+                                  <h1 class="uk-h3 uk-margin-remove uk-text-truncate">{{ entities.country }} {{ entities.stakeholder }}</h1>
+                              </div>
+                              <div class="uk-width-auto">
+                                  <oa-indicator [stakeholder]="stakeholder"></oa-indicator>
+                              </div>
+                          </div>
                       </div>
-                      <div class="uk-width-auto">
-                        <div class="uk-progress-semicircle open-access" [attr.percentage]="0" [style]="'--percentage:' + 0"></div>
-                        <div class="uk-flex uk-flex-middle uk-margin-small-top">
-                          <icon [name]="'open_access'" [flex]="true" class="open-access"></icon>
-                          <span class="uk-margin-xsmall-left">Open Access</span>
-                        </div>
-                      </div>
-                    </div>
                   </div>
-                </div>
-                <div class="uk-banner-footer">
-                    <div class="uk-container uk-container-large">
-                        <ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
-                            <li [class.uk-active]="!isSearch">
-                                <a [routerLink]="'/'">{{entities.stakeholder}}</a>
-                            </li>
-                            <li [class.uk-active]="isSearch">
-                                <a [routerLink]="'/search/find/research-outcomes'" [queryParams]="routerHelper.createQueryParams(['type','peerreviewed'], [quote('publications'), quote('true')])">
-                                  Browse {{openaireEntities.RESULTS}}</a>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <div class="uk-margin-medium-top uk-margin-medium-bottom">
-                <router-outlet></router-outlet>
-            </div>
-        </div>
-        <h3 *ngIf="!loading && !stakeholder" class="uk-position-center">
-            No {{entities.country}} {{entities.stakeholder}} yet.
-        </h3>
+                  <div class="uk-banner-footer">
+                      <div class="uk-container uk-container-large uk-flex uk-flex-between">
+                          <ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
+                              <li [class.uk-active]="!isSearch">
+                                  <a [routerLink]="'/national'">{{ entities.stakeholder }}</a>
+                              </li>
+                              <li [class.uk-active]="isSearch">
+                                  <a [routerLink]="'/national/search/find/research-outcomes'"
+                                     [queryParams]="routerHelper.createQueryParams(['type','peerreviewed'], [quote('publications'), quote('true')])">
+                                      Browse {{ openaireEntities.RESULTS }}</a>
+                              </li>
+                          </ul>
+                          <div *ngIf="!isMobile" class="uk-margin-large-right uk-flex uk-flex-middle">
+                              <a *ngIf="isManager" [routerLink]="adminLink" target="_blank"
+                                 class="uk-button uk-flex uk-flex-middle uk-margin-small-right">
+                                  Manage
+                              </a>
+                              <a *ngIf="sandboxLink" [href]="sandboxLink" target="_blank"
+                                 class="uk-button uk-flex uk-flex-middle uk-margin-small-right">
+                                  Sandbox
+                              </a>
+                          </div>
+                      </div>
+                  </div>
+              </div>
+              <div>
+                  <router-outlet></router-outlet>
+              </div>
+          </div>
+          <h3 *ngIf="!loading && !stakeholder" class="uk-position-center">
+              No {{ entities.country }} {{ entities.stakeholder }} yet.
+          </h3>
       </div>
-      <role-verification *ngIf="stakeholder" [id]="stakeholder.alias" [name]="stakeholder.name" [type]="stakeholder.type" [service]="'irish'"></role-verification>
+      <role-verification *ngIf="stakeholder" [id]="stakeholder.alias" [name]="stakeholder.name"
+                         [dashboard]="'National Open Access Monitor, Ireland'"
+                         [type]="stakeholder.type" [service]="'irish'" [relativeTo]="null"></role-verification>
   `
 })
 export class NationalComponent extends StakeholderBaseComponent implements OnInit {
   stakeholder: Stakeholder;
   loading: boolean = true;
+  isMobile: boolean = false;
   isSearch: boolean = false;
   openaireEntities = OpenaireEntities;
 
   constructor(private stakeholderService: StakeholderService,
+              private userManagementService: UserManagementService,
               private layoutService: LayoutService,
               protected _router: Router,
               protected _route: ActivatedRoute,
@@ -76,7 +89,8 @@ export class NationalComponent extends StakeholderBaseComponent implements OnIni
               protected _piwikService: PiwikService,
               protected _title: Title,
               protected _meta: Meta,
-              private _customFilterService:CustomFilterService) {
+              private _customFilterService:CustomFilterService,
+              private configurationService: ConfigurationService) {
     super();
     super.initRouterParams(this._route, event => {
       this.isSearch = event.url.includes('search');
@@ -85,9 +99,13 @@ export class NationalComponent extends StakeholderBaseComponent implements OnIni
 
   ngOnInit() {
     this.layoutService.setRootClass('country');
+    this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
+      this.isMobile = isMobile;
+    }));
     this.stakeholderService.getStakeholder(this._route.snapshot.data.stakeholder).subscribe(stakeholder => {
       this.stakeholder = stakeholder;
       if(this.stakeholder) {
+        this.setProperties(this.stakeholder.alias, this.stakeholder.type, this.configurationService);
         this._customFilterService.setCustomFilter([new SearchCustomFilter("National", "country", "IE", "Irish National Monitor")]);
         LinksResolver.resetProperties();
         this.loading = false;
@@ -101,4 +119,27 @@ export class NationalComponent extends StakeholderBaseComponent implements OnIni
     super.ngOnDestroy();
     this.layoutService.setRootClass(null);
   }
+
+  get isManager() {
+    return Session.isPortalAdministrator(this.userManagementService.user) ||
+        Session.isCurator(this.stakeholder.type, this.userManagementService.user) ||
+        Session.isManager(this.stakeholder.type, this.stakeholder.alias, this.userManagementService.user);
+  }
+
+  get isMember() {
+    return this.isManager ||
+        Session.isMember(this.stakeholder.type, this.stakeholder.alias, this.userManagementService.user);
+  }
+
+  get adminLink() {
+    return "/admin/" + this.stakeholder.alias;
+  }
+
+  get sandboxLink() {
+    if(this.properties.environment !== 'beta' && this.isMember) {
+      return beta.domain + '/national/';
+    } else {
+      return null;
+    }
+  }
 }

src/app/national/national.module.ts

@@ -8,6 +8,7 @@ import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
 import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
 import {open_access} from "../openaireLibrary/utils/icons/icons";
 import {SandboxGuard} from "../shared/sandbox.guard";
+import {OaIndicatorModule} from "../shared/oa-indicator/oa-indicator.module";
 
 const routes: Route[] = [
   {
@@ -19,7 +20,7 @@ const routes: Route[] = [
 ];
 
 @NgModule({
-  imports: [CommonModule, RouterModule.forChild(routes), LoadingModule, RoleVerificationModule, IconsModule],
+  imports: [CommonModule, RouterModule.forChild(routes), LoadingModule, RoleVerificationModule, IconsModule, OaIndicatorModule],
   declarations: [NationalComponent],
   exports: [NationalComponent],
 })

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 1157c0f4a77f2ff92f05c8ce4dd649b0f1d99e53
+Subproject commit bb9f4dfc9afa90438256d105a6da206d3ddb3dd9

src/app/orcid/discover-links/discover-links.component.html

@@ -0,0 +1,37 @@
+<div>
+  <div class="uk-banner">
+    <div class="uk-container uk-container-large">
+      <div class="uk-padding-small uk-padding-remove-vertical">
+        <div class="uk-grid uk-flex-middle" uk-grid>
+          <div class="uk-width-expand">
+            <h1 class="uk-h4 uk-margin-small-bottom">Discover your research results</h1>
+            <div class="uk-margin-bottom"> <span *ngIf="user"> Below are research results for <span class="uk-text-large uk-text-primary">'{{user.firstname + ' ' + user.lastname}}'</span>. <br>
+              Select your works to add them to your ORCID profile, by clicking on "claim" below each record.</span> </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+
+   <!--<div   class="uk-section uk-container uk-container-large" >
+
+     <sea
+   </div>-->
+  <div class=" uk-flex uk-flex-center uk-margin-medium-bottom">
+    <div class="uk-margin-top">
+
+      <div search-input [(value)]="keyword" [placeholder]="'Search by title, author, abstract, DOI, orcid...'"
+           [searchInputClass]="'flat'" [iconPosition]="'left'" (searchEmitter)="search()" class="uk-width-xlarge@l uk-width-large@m uk-width-1-1"></div>
+    </div>
+  </div>
+  <search-research-results *ngIf="filters" [customFilters]="filters"
+                           [includeOnlyResultsAndFilter]="true"
+                           resultType="result" [simpleView]="true"
+                           [hasPrefix]="false"
+                           [showBreadcrumb]="false"
+                           [showSwitchSearchLink]="false"
+                           [searchForm]="{dark: false, class: 'search-form'}"
+                           [pageTitlePrefix]="title"
+  ></search-research-results>
+</div>

src/app/orcid/discover-links/discover-links.component.ts

@@ -0,0 +1,43 @@
+import {Component, OnInit} from '@angular/core';
+import {SearchResearchResultsService} from "../../openaireLibrary/services/searchResearchResults.service";
+import {LogService} from "../../openaireLibrary/utils/log/log.service";
+import {ActivatedRoute, Router} from '@angular/router';
+import {SEOService} from '../../openaireLibrary/sharedComponents/SEO/SEO.service';
+import {PiwikService} from '../../openaireLibrary/utils/piwik/piwik.service';
+import {Meta, Title} from '@angular/platform-browser';
+import {UserManagementService} from "../../openaireLibrary/services/user-management.service";
+import {SearchCustomFilter} from "../../openaireLibrary/searchPages/searchUtils/searchUtils.class";
+import {SearchBaseComponent} from "../../search/searchPages/searchBaseComponent";
+
+@Component({
+  selector: 'discover-links',
+  templateUrl: './discover-links.component.html'
+})
+export class DiscoverLinksComponent extends  SearchBaseComponent  implements OnInit {
+  filters = null;
+  user = null;
+  constructor(private _searchResearchResultsService: SearchResearchResultsService,
+              private _logService: LogService,
+              protected router: Router,
+              protected route: ActivatedRoute,
+              protected seoService: SEOService,
+              protected _piwikService: PiwikService,
+              protected _title: Title,
+              protected _meta: Meta, private _userManagementService: UserManagementService) {
+    super();
+  }
+
+  ngOnInit() {
+    this.title = 'Discover links';
+    this.description = 'Discover links';
+    this.setMetadata();
+
+    this.subscriptions.push(this._userManagementService.getUserInfo().subscribe(user => {
+      this.user = user;
+      this.filters = [new SearchCustomFilter("Author", "resultauthor", user.fullname, user.fullname, false, 'resultauthor="'+user.firstname + '" and resultauthor="'+ user.lastname+'"')];
+
+
+    }));
+  }
+
+}

src/app/orcid/discover-links/discover-links.module.ts

@@ -0,0 +1,22 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {DiscoverLinksComponent} from "./discover-links.component";
+import {RouterModule} from "@angular/router";
+import {LoginGuard} from "../../openaireLibrary/login/loginGuard.guard";
+import {SearchResearchResultsModule} from "../../openaireLibrary/searchPages/searchResearchResults.module";
+import {SearchInputModule} from "../../openaireLibrary/sharedComponents/search-input/search-input.module";
+
+
+@NgModule({
+  declarations: [DiscoverLinksComponent],
+  imports: [
+    CommonModule, RouterModule.forChild([
+      {
+        path: '',
+        component: DiscoverLinksComponent, canActivate: [LoginGuard]
+      }
+    ]), SearchResearchResultsModule, SearchInputModule
+
+  ],
+})
+export class DiscoverLinksModule { }

src/app/orcid/recommend-orcid-links/searchRecommendedResultsForOrcid-routing.module.ts

@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import {IsRouteEnabled} from "../../openaireLibrary/error/isRouteEnabled.guard";
-import {PreviousRouteRecorder} from "../../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
-import {OpenaireSearchRecommendedResultsForOrcidComponent} from "./searchRecommendedResultsForOrcid.component";
-import {FreeGuard} from "../../openaireLibrary/login/freeGuard.guard";
-import {LoginGuard} from "../../openaireLibrary/login/loginGuard.guard";
-import {properties} from "../../../environments/environment";
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      // { path: '', component: OpenaireSearchMyResultsInOrcidComponent, canActivate: [IsRouteEnabled], data: {
-      { path: '', component: OpenaireSearchRecommendedResultsForOrcidComponent,
-        canActivate: [LoginGuard], data: {
-          redirect: properties.errorLink,  community : 'openaire'
-        },
-        canDeactivate: [PreviousRouteRecorder]
-      }
-
-    ])
-  ]
-})
-export class SearchRecommendedResultsForOrcidRoutingModule { }

src/app/orcid/recommend-orcid-links/searchRecommendedResultsForOrcid.component.ts

@@ -1,18 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'openaire-search-recommended-results-for-orcid',
-  template: `
-      <div class="uk-section">
-        <search-recommended-results-for-orcid></search-recommended-results-for-orcid>
-      </div>
-  `
-})
-
-export class OpenaireSearchRecommendedResultsForOrcidComponent {
-
-  constructor() {}
-
-  public ngOnInit() {}
-}
-

src/app/orcid/recommend-orcid-links/searchRecommendedResultsForOrcid.module.ts

@@ -1,27 +0,0 @@
-import { NgModule }            from '@angular/core';
-import { CommonModule }        from '@angular/common';
-import { FormsModule }         from '@angular/forms';
-import {OpenaireSearchRecommendedResultsForOrcidComponent} from "./searchRecommendedResultsForOrcid.component";
-import {PreviousRouteRecorder} from "../../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
-import {IsRouteEnabled} from "../../openaireLibrary/error/isRouteEnabled.guard";
-import {SearchRecommendedResultsForOrcidModule} from "../../openaireLibrary/orcid/recommend-orcid-links/searchRecommendedResultsForOrcid.module";
-import {SearchRecommendedResultsForOrcidRoutingModule} from "./searchRecommendedResultsForOrcid-routing.module";
-import {FreeGuard} from "../../openaireLibrary/login/freeGuard.guard";
-import {LoginGuard} from "../../openaireLibrary/login/loginGuard.guard";
-
-@NgModule({
-  imports: [
-    CommonModule, FormsModule,
-    SearchRecommendedResultsForOrcidModule,
-    SearchRecommendedResultsForOrcidRoutingModule
-  ],
-  declarations: [
-    OpenaireSearchRecommendedResultsForOrcidComponent
-  ],
-  exports: [
-    OpenaireSearchRecommendedResultsForOrcidComponent
-  ],
-  // providers:    [PreviousRouteRecorder, IsRouteEnabled]
-  providers:    [PreviousRouteRecorder, LoginGuard]
-})
-export class LibSearchRecommendedResultsForOrcidModule { }

src/app/public-logs/public-logs.component.ts

@@ -5,36 +5,55 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
 import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
 import {Meta, Title} from '@angular/platform-browser';
 import {LogService} from "../openaireLibrary/utils/log/log.service";
+import {Breadcrumb} from '../openaireLibrary/utils/breadcrumbs/breadcrumbs.component';
 
 @Component({
   selector: 'public-logs',
   template: `
-<div class="uk-container uk-container-large uk-margin-top">
-  <h3>Public logs</h3>
-  
-      <ul class="uk-tab " uk-switcher>
-        <li><a href="#">Dashboard</a></li>
-        <!-- <li><a href="#">Linking</a></li>
-         <li><a href="#">ORCID Claim</a></li>
-         <li><a href="#">Upload DOIs</a></li>-->
-        <li><a href="#">OpenOrgs</a></li>
-        <li><a href="#"> Web stats from Matomo</a></li>
+    <div class="uk-banner dark uk-padding-remove-vertical uk-light">
+      <div class="uk-container uk-container-large uk-section uk-section-small">
+        <div>
+          <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
+        </div>
+        <div class="uk-text-center uk-margin-medium-top" uk-scrollspy-class>
+          <h1 class="uk-h2 uk-margin-medium-top uk-margin-medium-bottom">Web Statistics & Activity Logs</h1>
+        </div>
+      </div>
+    </div>
+    <div class="uk-container uk-container-small uk-section">
+      <ul class="uk-tab uk-flex uk-flex-center uk-flex-middle uk-flex-nowrap uk-text-large" uk-switcher>
+        <li><a href="#">Web statistics</a></li>
+        <li><a href="#">Monitor logs</a></li>
+        <li><a href="#">OpenOrgs logs</a></li>
       </ul>
-      <ul class="uk-switcher uk-margin">
+      <ul class="uk-switcher uk-margin-medium-top">
         <li>
-          
-<!--          <ng-container *ngTemplateOutlet="formattedLogs; context: { logs: claimsLogs}"></ng-container>-->
-          <div>
-
-            National Open Access Monitor - Ireland, creates public logs when users uploas dois, claim links to research outputs or claim a research output to their ORCID profile.<br>
-            
-          </div>
-          <div>Get monthly logs for Dashboard:</div>
-
-          <ul class="uk-list">
+          <div>Explore analytics detailing the user engagement on the National Monitor. This section offers insights into traffic patterns, visitor demographics, page views, and other key metrics that help understand National Monitor usage and effectiveness.</div>
+          <div class="uk-alert uk-alert-warning">Current month web statistics will be available at the beginning of next month!</div>
+          <ul class="uk-list uk-margin-top">
             <ng-container *ngFor="let year of years ">
               <ng-container *ngFor="let month of months ">
-                <ng-container *ngIf="(year == today.getFullYear() && month <= today.getMonth()+1 &&  month >= startDate.getMonth()+1) || (year >startDate.getFullYear() || year < today.getFullYear()) ">
+                <ng-container *ngIf="show(year, month) ">
+                <li *ngIf=" !(year == today.getFullYear()  &&  month == today.getMonth()+1)">
+                    <a [href]="properties.logServiceUrl + 'webstats/' + year + '/' + (month<10?'0'+month:month) " target="_blank"> {{month}}/{{year}}</a>
+                  </li>
+                </ng-container>
+              </ng-container>
+            </ng-container>
+          </ul>
+        </li>
+        <li>
+          <div>
+
+            Access monthly logs to see user activities such as uploading DOIs for metadata review, claiming links to one’s ORCID profile, and linking research outputs. To understand the specifics of these activities, visit 
+            <a routerLink="/user-actions">User Actions</a>. These logs offer a clear view of user interactions within the open access ecosystem.
+            
+          </div>
+
+          <ul class="uk-list  uk-margin-top">
+            <ng-container *ngFor="let year of years ">
+              <ng-container *ngFor="let month of months ">
+                <ng-container *ngIf="show(year, month) "> 
                   <li>
                     <a [href]="properties.logServiceUrl + 'public-logs/' + year + '/' + month " target="_blank"> {{month}}/{{year}}</a>
                   </li>
@@ -44,12 +63,13 @@ import {LogService} from "../openaireLibrary/utils/log/log.service";
           </ul>        </li>
         
         <li>
-          <div>Get monthly logs for OpenOrgs:</div>
-          <ul class="uk-list">
+          <div>    Review monthly logs from <a [href]="properties.openOrgsUrl" target="_blank">OpenOrgs</a>, focusing on the identification and disambiguation of Irish Research Performing Organisations (RPOs) 
+            within the <a href="https://graph.openaire.eu" target="_blank">OpenAIRE Graph</a>. Access is exclusive to the primary RPO dashboard managers and IReL representatives, ensuring consistent and accurate information management. Each log provides a clear overview of a month's updates and changes in OpenOrgs.
+            <a routerLink="/contact-us">Contact us</a> if you would like to apply to be a manager for your RPO.  </div>
+          <ul class="uk-list  uk-margin-top">
             <ng-container *ngFor="let year of years ">
               <ng-container *ngFor="let month of months ">
-                <ng-container *ngIf="(year == today.getFullYear() && month <= today.getMonth()+1 &&  month >= startDate.getMonth()+1) || (year >startDate.getFullYear() || year < today.getFullYear()) ">                  <li>
-                  <li>
+                <ng-container *ngIf="show(year, month) ">                  <li>
                     <a [href]="properties.openOrgsUrl + '/public-api/logs/' + year + '/' + month+ '/IE' " target="_blank"> {{month}}/{{year}}</a>
                   </li>
                 </ng-container>
@@ -57,25 +77,21 @@ import {LogService} from "../openaireLibrary/utils/log/log.service";
             </ng-container>
           </ul>
         </li>
-        <li> 
-          <div class="uk-alert uk-alert-warning">Coming soon!</div>
-<!--        <a target="_blank" href="https://beta.analytics.openaire.eu/index.php?apiAction=get&apiModule=API&date=2022-01-01,2023-12-31&expanded=1&filter_limit=-1&force_api_session=1&format=JSON&format_metrics=1&idSite=407&method=API.getProcessedReport&module=API&period=month&token_auth=anonymous"> View Matomo logs</a>-->
-        </li>
+        
       </ul>
-   
-</div>
+    </div>
     <ng-template #formattedLogs let-logs="logs">
-      <div *ngIf="logs && logs.length > 0" class="uk-text-meta "> Viewing last  {{logs.length}} actions.</div>
-      <div *ngIf="!logs || logs.length == 0" class="uk-text-meta "> No logs yet.</div>
+      <div *ngIf="logs && logs.length > 0" class="uk-text-meta">Viewing last  {{logs.length}} actions.</div>
+      <div *ngIf="!logs || logs.length == 0" class="uk-text-meta">No logs yet.</div>
       <div *ngFor="let log of logs">
         On {{log.date | date: 'd/M/yyyy, hh:mm':'GMT'  }} {{log.message}}
       </div>
-      
     </ng-template>
     
   `
 })
 export class PublicLogsComponent extends BaseComponent implements OnInit {
+  breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'resources - web statistics & activity logs'}];
   isConsent = false;
   redirectUrl = null;
   startDate = new Date();
@@ -88,9 +104,9 @@ export class PublicLogsComponent extends BaseComponent implements OnInit {
               protected _piwikService: PiwikService,
               protected _title: Title,
               protected _meta: Meta,
-              private _logService:LogService) {
+              private _logService: LogService) {
     super();
-    this.startDate.setFullYear(2023,11,1)
+    this.startDate.setFullYear(2024,0,10)
     this.months = Array.from({ length:12  }, (_, index) => 12 - index);
     this.years = Array.from({ length:this.today.getFullYear() + 1 - this.startDate.getFullYear()  }, (_, index) => this.today.getFullYear() - index);
   }
@@ -100,4 +116,12 @@ export class PublicLogsComponent extends BaseComponent implements OnInit {
     this.description = 'Public logs of user actions in OA monitor - Ireland';
     this.setMetadata();
   }
+  
+  show(year, month){
+    return (year > this.startDate.getFullYear() && year < this.today.getFullYear()) ||
+      (year == this.startDate.getFullYear() && year < this.today.getFullYear() && month >= this.startDate.getMonth() + 1 ) ||
+      (year > this.startDate.getFullYear() && year == this.today.getFullYear() && month <= this.today.getMonth() + 1 ) ||
+      (year == this.startDate.getFullYear() && year == this.today.getFullYear() && month >= this.startDate.getMonth() + 1 && month <= this.today.getMonth()+1 ) ||
+      ( year == this.today.getFullYear()  && month < this.today.getMonth()+1 )
+  }
 }

src/app/public-logs/public-logs.module.ts

@@ -3,6 +3,7 @@ import {CommonModule} from '@angular/common';
 import {PublicLogsComponent} from "./public-logs.component";
 import {LogServiceModule} from "../openaireLibrary/utils/log/LogService.module";
 import {Route, RouterModule} from "@angular/router";
+import {BreadcrumbsModule} from '../openaireLibrary/utils/breadcrumbs/breadcrumbs.module';
 
 const routes: Route[] = [
   {
@@ -14,7 +15,7 @@ const routes: Route[] = [
 @NgModule({
   declarations: [PublicLogsComponent],
   imports: [
-    CommonModule, RouterModule.forChild(routes),  LogServiceModule, RouterModule
+    CommonModule, RouterModule.forChild(routes),  LogServiceModule, RouterModule, BreadcrumbsModule
   ],
   exports: [PublicLogsComponent]
 })

src/app/repository/browse-repositories/browse-repositories.component.html

@@ -3,13 +3,13 @@
     <loading></loading>
   </div>
 </ng-container>
-<div *ngIf="!showLoading" class="uk-container uk-container-large">
+<div *ngIf="!showLoading" class="uk-container uk-container-large uk-section-small">
   <div class="uk-flex uk-flex-middle uk-flex-center">
     <div search-input *ngIf="keywordControl" [searchControl]="keywordControl" [searchInputClass]="'flat'" [iconPosition]="'left'"
       placeholder="Search for {{typeAsLabel}} {{entities.stakeholders}}" [disabled]="stakeholders.length === 0" class="uk-width-xlarge@l uk-width-large@m uk-width-1-1">
     </div>
   </div>
-  <div class="uk-flex uk-flex-middle uk-flex-between uk-margin-large-top">
+  <div class="uk-flex uk-flex-middle uk-flex-between uk-margin-large-top" [id]="id">
     <div class="uk-flex uk-flex-middle">
       <div class="uk-width-small uk-margin-medium-right">
         <div input
@@ -32,7 +32,7 @@
       </paging-no-load>
     </div>
   </div>
-  <div class="uk-margin-large-top" id="target">
+  <div class="uk-margin-large-top">
     <div *ngIf="!filteredStakeholders || filteredStakeholders?.length == 0" class="uk-flex uk-flex-center">
       <div class="uk-alert uk-alert-primary uk-text-center uk-width-2-3@m uk-width-1-1">
         No {{entities.stakeholders}} available

src/app/repository/browse-repositories/browse-repositories.component.ts

@@ -1,33 +1,31 @@
 import {ChangeDetectorRef, Component} from "@angular/core";
 import {ActivatedRoute, Router} from "@angular/router";
 import {FormBuilder} from "@angular/forms";
-import {BrowseStakeholderBaseComponent} from "../../shared/browse-stakeholder-base.component";
-import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeholder.service";
 import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
 import {Option} from "../../openaireLibrary/sharedComponents/input/input.component";
-import {Stakeholder} from "../../openaireLibrary/monitor/entities/stakeholder";
 import {SearchDataprovidersService} from "../../openaireLibrary/services/searchDataproviders.service";
 import {SearchResult} from "../../openaireLibrary/utils/entities/searchResult";
 import {ResultPreview} from "../../openaireLibrary/utils/result-preview/result-preview";
-import {Observable, forkJoin, of} from "rxjs";
+import {forkJoin, Observable, of} from "rxjs";
 import {catchError} from "rxjs/operators";
+import {StakeholderExtended} from "../../shared/irish";
+import {IrishMonitorService} from "../../shared/irish-monitor.service";
+import {BrowseStakeholderBaseComponent} from "../../openaireLibrary/monitor/browse-stakeholder/browse-stakeholder-base.component";
 
 @Component({
   selector: 'browse-repository',
   templateUrl: 'browse-repositories.component.html'
 })
-export class BrowseRepositoriesComponent extends BrowseStakeholderBaseComponent {
-  filteredStakeholders: StakeholderRepository[];
+export class BrowseRepositoriesComponent extends BrowseStakeholderBaseComponent<StakeholderExtended> {
+  sortBy = 'alphAsc';
   sortOptions: Option[] = [
     {value: 'alphAsc', label: 'Alphabetically Asc. (A-Z)'},
-    {value: 'alphDsc', label: 'Alphabetically Dsc. (Z-A)'},
-    {value: 'mostRecent', label: 'Most recent'},
-    {value: 'leastRecent', label: 'Least recent'},
+    {value: 'alphDsc', label: 'Alphabetically Dsc. (Z-A)'}
   ]
   
   constructor(protected _route: ActivatedRoute,
               protected _router: Router,
-              protected stakeholderService: StakeholderService,
+              protected irishMonitorService: IrishMonitorService,
               protected layoutService: LayoutService,
               protected cdr: ChangeDetectorRef,
               protected fb: FormBuilder,
@@ -35,6 +33,15 @@ export class BrowseRepositoriesComponent extends BrowseStakeholderBaseComponent
     super();
   }
 
+  init() {
+    this.subscriptions.push(this.irishMonitorService.getStakeholders(this.stakeholderType).subscribe(stakeholders => {
+      this.stakeholders = stakeholders;
+      this.filteredStakeholders = stakeholders;
+      this.sortByChanged();
+      this.filtering(this.keywordControl.value);
+    }));
+  }
+
   sortByChanged() {
     switch(this.sortBy) {
       case 'alphAsc':
@@ -46,15 +53,6 @@ export class BrowseRepositoriesComponent extends BrowseStakeholderBaseComponent
         this.stakeholders = this.stakeholders.sort((a, b) => b['index_name'].localeCompare(a['index_name']));
         this.afterStakeholdersInitialized();
         break;
-      case 'mostRecent':
-        // compare creationDate?
-        this.stakeholders = this.stakeholders.sort((a, b) => Number(b['creationDate']) - Number(a['creationDate']));
-        this.afterStakeholdersInitialized();
-        break;
-      case 'leastRecent':
-        this.stakeholders = this.stakeholders.sort((a, b) => Number(a['creationDate']) - Number(b['creationDate']));
-        this.afterStakeholdersInitialized();
-        break;
       default:
         break;
     }
@@ -62,35 +60,36 @@ export class BrowseRepositoriesComponent extends BrowseStakeholderBaseComponent
 
   afterStakeholdersInitialized() {
     let currentFilteredStakeholders = this.filteredStakeholders.slice((this.currentPage-1)*this.pageSize, this.currentPage*this.pageSize);
-    let obs: Observable<any>[] = [];
-    currentFilteredStakeholders.forEach(item => {
-      if(!item.details) {
-        this.showLoading = true;
-        let ob = this.searchDataprovidersService.searchDataproviderById(item.index_id).pipe(
-          catchError(error => {
-            let details: SearchResult = new SearchResult();
-            details['title'] = {'name': item.name, 'accessMode': ''};
-            details['entityType'] = "dataprovider";
-            return of([details]);
-          }));
-        obs.push(ob);
-      }
-    });
-    this.subscriptions.push(forkJoin(obs).subscribe(
-      data => {
-        data.forEach((item, index) => {
-          currentFilteredStakeholders[index].details = item[0];
-          currentFilteredStakeholders[index].details['title']['name'] = currentFilteredStakeholders[index].name; 
-        });
-      }
-    ));
-    this.showLoading = false;
+    if(currentFilteredStakeholders && currentFilteredStakeholders.length > 0) {
+      let obs: Observable<any>[] = [];
+      currentFilteredStakeholders.forEach(item => {
+        if (!item.details) {
+          this.showLoading = true;
+          let ob = this.searchDataprovidersService.searchDataproviderById(item.index_id).pipe(
+            catchError(error => {
+              let details: SearchResult = new SearchResult();
+              details['title'] = {'name': item.name, 'accessMode': ''};
+              details['entityType'] = "dataprovider";
+              return of([details]);
+            }));
+          obs.push(ob);
+        }
+      });
+      this.subscriptions.push(forkJoin(obs).subscribe(
+        data => {
+          data.forEach((item, index) => {
+            currentFilteredStakeholders[index].details = item[0];
+            currentFilteredStakeholders[index].details['title']['name'] = currentFilteredStakeholders[index].name;
+          });
+          this.showLoading = false;
+        }
+      ));
+    } else {
+      this.showLoading = false;
+    }
   }
 
   public getResultPreview(result: SearchResult): ResultPreview {
     return ResultPreview.searchResultConvert(result, (result.entityType) ? result.entityType : this.typeAsLabel);
   }
 }
-export class StakeholderRepository extends Stakeholder {
-  details: any;
-}

src/app/repository/repository.component.ts

@@ -13,94 +13,123 @@ import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sideb
 import {OpenaireEntities} from "../openaireLibrary/utils/properties/searchFields";
 import {SearchDataprovidersService} from "../openaireLibrary/services/searchDataproviders.service";
 import {UserManagementService} from "../openaireLibrary/services/user-management.service";
+import {ConfigurationService} from "../openaireLibrary/utils/configuration/configuration.service";
+import {Irish} from "../shared/irish";
+import {Session} from "../openaireLibrary/login/utils/helper.class";
+import {properties as beta} from "../../environments/environment.beta";
+
 
 @Component({
   selector: 'repository',
   template: `
       <loading *ngIf="loading" class="uk-position-center"></loading>
       <div *ngIf="!loading">
-        <div class="uk-banner uk-light">
-          <div class="uk-container uk-container-large">
-            <div class="uk-padding-small uk-padding-remove-vertical">
-              <div *ngIf="stakeholder" class="uk-grid uk-grid-large uk-flex-middle uk-margin-medium-bottom" uk-grid>
-                <div class="uk-width-expand">
-                  <div class="uk-grid uk-grid-small uk-flex-middle" uk-grid>
-                    <div class="uk-card uk-card-default uk-padding-small">
-                      <img *ngIf="stakeholder.logoUrl; else elseBlock" [src]="stakeholder | logoUrl" [alt]="stakeholder.name + ' logo'" class="uk-height-max-xsmall" style="max-width: 180px;">
-                      <ng-template #elseBlock>
-                        <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall" style="max-width: 180px;">
-                      </ng-template>
-                    </div>
-                    <div class="uk-width-expand uk-margin-small-left">
-                      <div class="uk-h5 uk-margin-remove uk-text-truncate">{{stakeholder.name}}</div>
-                      <ng-container *ngIf="stakeholder.details">
-                        <div class="uk-text-xsmall uk-margin-small-bottom">
-                          <entity-metadata [entityType]="stakeholder.details.type"
-                                        [compatibilityString]="stakeholder.details.compatibility" 
-                                        [organizations]="stakeholder.details.organizations">
-                          </entity-metadata>
-                        </div>
-                        <div class="uk-text-small">
-                          <!-- Website URL -->
-                          <div *ngIf="stakeholder.details.websiteURL && stakeholder.details.websiteURL != ''" class="uk-margin-xsmall-bottom">
-                            <span>Website URL: </span>
-                            <span class="uk-text-italic">
+          <div class="uk-banner uk-light">
+              <div class="uk-container uk-container-large">
+                  <div class="uk-padding-small uk-padding-remove-vertical">
+                      <div *ngIf="stakeholder" class="uk-grid uk-grid-large uk-flex-middle uk-margin-medium-bottom"
+                           uk-grid>
+                          <div class="uk-width-expand">
+                              <div class="uk-grid uk-grid-small uk-flex-middle" uk-grid>
+                                  <div class="uk-card uk-card-default uk-padding-small">
+                                      <img *ngIf="stakeholder.logoUrl; else elseBlock" [src]="stakeholder | logoUrl"
+                                           [alt]="stakeholder.name + ' logo'" class="uk-height-max-xsmall"
+                                           style="max-width: 180px;">
+                                      <ng-template #elseBlock>
+                                          <img src="assets/common-assets/placeholder.png"
+                                               alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall"
+                                               style="max-width: 180px;">
+                                      </ng-template>
+                                  </div>
+                                  <div class="uk-width-expand uk-margin-small-left">
+                                      <div class="uk-text-small uk-flex uk-flex-middle uk-margin-small-bottom">
+                                          <icon [name]="'navigate_before'" [flex]="true" [ratio]="0.8"
+                                                class="uk-margin-xsmall-right"></icon>
+                                          <a routerLink=".">Back to
+                                              all {{ entities.datasource }} {{ entities.stakeholders }}</a>
+                                      </div>
+                                      <div class="uk-h4 uk-margin-remove uk-text-truncate">{{ stakeholder.name }}</div>
+                                      <ng-container *ngIf="stakeholder.details">
+                                          <div class="uk-text-xsmall uk-margin-small-bottom">
+                                              <entity-metadata [entityType]="stakeholder.details.type"
+                                                               [compatibilityString]="stakeholder.details.compatibility"
+                                                               [organizations]="stakeholder.details.organizations">
+                                              </entity-metadata>
+                                          </div>
+                                          <div class="uk-text-small">
+                                              <!-- Website URL -->
+                                              <div *ngIf="stakeholder.details?.websiteURL"
+                                                   class="uk-margin-xsmall-bottom">
+                                                  <span>Website URL: </span>
+                                                  <span class="uk-text-italic">
                               <a href="{{stakeholder.details.websiteURL}}" target="_blank" class="custom-external">
-                                {{stakeholder.details.websiteURL}}
+                                {{ stakeholder.details.websiteURL }}
                               </a>
                             </span>
-                          </div>
-                          <!-- OAI-PMH URL-->
-                          <div *ngIf="stakeholder.details.OAIPMHURL && stakeholder.details.OAIPMHURL != ''" class="uk-margin-xsmall-bottom">
-                            <span>OAI-PMH URL: </span>
-                            <span class="uk-text-italic">
+                                              </div>
+                                              <!-- OAI-PMH URL-->
+                                              <div *ngIf="stakeholder.details?.OAIPMHURL"
+                                                   class="uk-margin-xsmall-bottom">
+                                                  <span>OAI-PMH URL: </span>
+                                                  <span class="uk-text-italic">
                               <a href="{{stakeholder.details.OAIPMHURL}}" target="_blank" class="custom-external">
-                                {{stakeholder.details.OAIPMHURL}}
+                                {{ stakeholder.details.OAIPMHURL }}
                               </a>
                             </span>
+                                              </div>
+                                          </div>
+                                      </ng-container>
+                                  </div>
+                              </div>
                           </div>
-                        </div>
-                      </ng-container>
-                    </div>
+                          <div class="uk-width-auto">
+                              <oa-indicator [stakeholder]="stakeholder"></oa-indicator>
+                          </div>
+                      </div>
+                      <h1 *ngIf="!stakeholder" class="uk-h3 uk-margin-small-bottom">{{ entities.datasources }}</h1>
+                  </div>
+              </div>
+              <div *ngIf="stakeholder" class="uk-banner-footer">
+                  <div class="uk-container uk-container-large uk-flex uk-flex-between">
+                      <ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
+                          <li [class.uk-active]="!isSearch">
+                              <a [routerLink]="['./', stakeholder.alias]" [relativeTo]="_route"
+                                 (click)="isSearch = false">
+                                  {{ entities.stakeholder }}
+                              </a>
+                          </li>
+                          <li [class.uk-active]="isSearch">
+                              <a [routerLink]="['./', stakeholder.alias, 'search']"
+                                 [queryParams]="routerHelper.createQueryParams(['type','peerreviewed'], [quote('publications'), quote('true')])"
+                                 [relativeTo]="_route">
+                                  Browse {{ openaireEntities.RESULTS }}
+                              </a>
+                          </li>
+                      </ul>
+                      <div *ngIf="!isMobile" class="uk-margin-large-right uk-flex uk-flex-middle">
+                          <a *ngIf="isManager" [routerLink]="adminLink" target="_blank"
+                             class="uk-button uk-flex uk-flex-middle uk-margin-small-right">
+                              Manage
+                          </a>
+                          <a *ngIf="sandboxLink" [href]="sandboxLink" target="_blank"
+                             class="uk-button uk-flex uk-flex-middle uk-margin-small-right">
+                              Sandbox
+                          </a>
+                          <a *ngIf="isProvideManager && provideLink" [href]="provideLink" target="_blank"
+                             class="uk-button uk-flex uk-flex-middle">
+                              <img class="uk-margin-xsmall-bottom" width="78"
+                                   src="assets/common-assets/logo-small-provide.png">
+                          </a>
+                      </div>
                   </div>
-                </div>
-                <div class="uk-width-auto">
-                  <div class="uk-progress-semicircle open-access" [attr.percentage]="0" [style]="'--percentage:' + 0"></div>
-                  <div class="uk-flex uk-flex-middle uk-margin-small-top">
-                    <icon [name]="'open_access'" [flex]="true" class="open-access"></icon>
-                    <span class="uk-margin-xsmall-left">Open Access</span>
-                  </div>
-                </div>
               </div>
-              <h1 *ngIf="!stakeholder" class="uk-h4 uk-margin-small-bottom">{{entities.datasources}}</h1>
-            </div>
           </div>
-          <div *ngIf="stakeholder" class="uk-banner-footer">
-            <div class="uk-container uk-container-large uk-flex uk-flex-between">
-              <ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
-                <li [class.uk-active]="!isSearch">
-                  <a [routerLink]="['./', stakeholder.alias]" [relativeTo]="_route" (click)="isSearch = false">
-                    {{entities.stakeholder}}
-                  </a>
-                </li>
-                <li [class.uk-active]="isSearch">
-                  <a [routerLink]="['./', stakeholder.alias, 'search']" [queryParams]="routerHelper.createQueryParams(['type','peerreviewed'], [quote('publications'), quote('true')])" [relativeTo]="_route">
-                    Browse {{openaireEntities.RESULTS}}
-                  </a>
-                </li>
-              </ul>
-              <a *ngIf="isProvideManager" [href]="provideLink" target="_blank" class="uk-button uk-margin-large-right uk-flex uk-flex-middle">
-                <span class="uk-margin-small-right">Manage at</span> 
-                <img class="uk-margin-xsmall-bottom" width="78" src="assets/common-assets/logo-small-provide.png">
-                <icon name="east" flex="true" class="uk-margin-small-left"></icon>
-              </a>
-            </div>
+          <div *ngIf="!this.alias || this.stakeholder">
+              <router-outlet></router-outlet>
           </div>
-        </div>
-        <div *ngIf="!this.alias || this.stakeholder" class="uk-margin-medium-top uk-margin-medium-bottom">
-          <router-outlet></router-outlet>
-        </div>
-        <role-verification *ngIf="stakeholder" [id]="stakeholder.alias" [name]="stakeholder.name" [type]="stakeholder.type" [service]="'irish'"></role-verification>
+          <role-verification *ngIf="stakeholder" [id]="stakeholder.alias" [name]="stakeholder.name"
+                             [type]="stakeholder.type" [dashboard]="'National Open Access Monitor, Ireland'"
+                             [service]="'irish'" [relativeTo]="null"></role-verification>
       </div>
   `
 })
@@ -108,6 +137,7 @@ export class RepositoryComponent extends StakeholderBaseComponent implements OnI
   stakeholder: Stakeholder;
   alias: string;
   isSearch: boolean = false;
+  isMobile: boolean = false;
   loading: boolean = false;
   openaireEntities = OpenaireEntities;
   isProvideManager: boolean;
@@ -122,10 +152,11 @@ export class RepositoryComponent extends StakeholderBaseComponent implements OnI
               protected seoService: SEOService,
               protected _piwikService: PiwikService,
               protected _title: Title,
-              protected _meta: Meta) {
+              protected _meta: Meta,
+              private configurationService: ConfigurationService) {
     super();
     super.initRouterParams(this._route, event => {
-      this.isSearch = event.url.includes('search');
+      this.isSearch = event.url.includes('/search');
     });
   }
 
@@ -134,40 +165,74 @@ export class RepositoryComponent extends StakeholderBaseComponent implements OnI
     this.title = 'Repository Monitors';
     this.description = 'Repository Monitors';
     this.setMetadata();
+    this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
+      this.isMobile = isMobile;
+    }));
     this.params.subscribe(params => {
-      this._customFilterService.setCustomFilter(null);
       this.alias = params['stakeholder'];
       if (this.alias) {
-        this.loading = true;
-        this.subscriptions.push(this.stakeholderService.getStakeholder(this.alias, true).subscribe(stakeholder => {
-          this.stakeholder = stakeholder;
-          if (this.stakeholder && this.stakeholder.type === 'datasource') {
-            LinksResolver.resetProperties();
-            LinksResolver.setSearchAndResultLanding("repository/" + this.stakeholder.alias);
-            this._customFilterService.setCustomFilter(
-                [new SearchCustomFilter("National", "country", "IE", "Irish National Monitor", false),
-                  new SearchCustomFilter("Repository", "collectedfromdatasourceid", this.stakeholder.index_id, this.stakeholder.index_name, true)
-                ]);
-            this.subscriptions.push(this.searchDataprovidersService.searchDataproviderById(this.stakeholder.index_id).subscribe(data => {
-              this.stakeholder.details = data[0];
-              this.subscriptions.push(this.userManagementService.getUserInfoAt(1).subscribe(user => {
-                this.isProvideManager = !!user.role.find(role => role.includes(this.stakeholder.details.originalId.toUpperCase()));
+        if (this.stakeholder?.alias !== this.alias) {
+          this._customFilterService.setCustomFilter(null);
+          this.loading = true;
+          this.subscriptions.push(this.stakeholderService.getStakeholder(this.alias, true).subscribe(stakeholder => {
+            this.stakeholder = stakeholder;
+            if (this.stakeholder && this.stakeholder.type === 'datasource') {
+              this.setProperties(this.stakeholder.alias, this.stakeholder.type, this.configurationService);
+              LinksResolver.resetProperties();
+              LinksResolver.setSearchAndResultLanding("repository/" + this.stakeholder.alias);
+              this._customFilterService.setCustomFilter(
+                  [
+                    new SearchCustomFilter("National", "country", "IE", "Irish National Monitor", false),
+                    new SearchCustomFilter("Repository", "resulthostingdatasourceid", this.stakeholder.index_id, this.stakeholder.index_name, true)
+                  ]);
+              this.subscriptions.push(this.searchDataprovidersService.searchDataproviderById(this.stakeholder.index_id).subscribe(data => {
+                this.stakeholder.details = data[0];
+                this.subscriptions.push(this.userManagementService.getUserInfoAt(1).subscribe(user => {
+                  this.isProvideManager = !!user.role.find(role => role.includes(this.stakeholder.details.originalId.toUpperCase()));
+                }));
+                this.loading = false;
+              }, error => {
+                this.stakeholder.details = null;
+                this.loading = false;
               }));
-              this.loading = false;
-            }));
-          } else {
-            this.navigateToError();
-          }
-        }));
+            } else {
+              this.navigateToError();
+            }
+          }));
+        }
       } else {
         this.stakeholder = null;
+        this._customFilterService.setCustomFilter(null);
       }
     });
   }
 
+  get isManager() {
+    return Session.isPortalAdministrator(this.userManagementService.user) ||
+        Session.isCurator(this.stakeholder.type, this.userManagementService.user) ||
+        Session.isManager(this.stakeholder.type, this.stakeholder.alias, this.userManagementService.user);
+  }
+
+  get isMember() {
+    return this.isManager ||
+        Session.isMember(this.stakeholder.type, this.stakeholder.alias, this.userManagementService.user);
+  }
+
+  get adminLink() {
+    return "/admin/" + this.stakeholder.alias;
+  }
+
+  get sandboxLink() {
+    if (this.properties.environment !== 'beta' && this.isMember) {
+      return beta.domain + '/repository/' + this.stakeholder.alias;
+    } else {
+      return null;
+    }
+  }
+
   get provideLink() {
-    if(this.stakeholder?.details?.originalId) {
-      return 'https://' + (this.properties.environment != 'production'?'beta.':'') + 'provide.openaire.eu/repository/' + this.stakeholder.details.originalId + '/dashboard';
+    if (this.stakeholder?.details?.originalId) {
+      return 'https://' + (this.properties.environment != 'production' ? 'beta.' : '') + 'provide.openaire.eu/repository/' + this.stakeholder.details.originalId + '/dashboard';
     } else {
       return null;
     }
@@ -176,5 +241,7 @@ export class RepositoryComponent extends StakeholderBaseComponent implements OnI
   ngOnDestroy() {
     super.ngOnDestroy();
     this.layoutService.setRootClass(null);
+    this.setProperties(Irish.irishAdminToolsCommunity, Irish.irishAdminToolsPortalType, this.configurationService);
+    LinksResolver.resetProperties();
   }
 }

src/app/repository/repository.module.ts

@@ -11,6 +11,7 @@ import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
 import {open_access} from "../openaireLibrary/utils/icons/icons";
 import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
 import {SandboxGuard} from "../shared/sandbox.guard";
+import {OaIndicatorModule} from "../shared/oa-indicator/oa-indicator.module";
 
 const routes: Route[] = [
   {
@@ -23,7 +24,7 @@ const routes: Route[] = [
 ];
 
 @NgModule({
-  imports: [CommonModule, RouterModule.forChild(routes), LoadingModule, RoleVerificationModule, IconsModule, EntityMetadataModule, LogoUrlPipeModule],
+  imports: [CommonModule, RouterModule.forChild(routes), LoadingModule, RoleVerificationModule, IconsModule, EntityMetadataModule, LogoUrlPipeModule, OaIndicatorModule],
   declarations: [RepositoryComponent],
   providers: [SearchDataprovidersService],
   exports: [RepositoryComponent],

src/app/researcher/author/author.component.ts

@@ -1,39 +0,0 @@
-import {Component, OnDestroy, OnInit} from "@angular/core";
-import {Stakeholder} from "../../openaireLibrary/monitor/entities/stakeholder";
-import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeholder.service";
-import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
-import {ActivatedRoute, Router} from "@angular/router";
-import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
-import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
-import {Meta, Title} from "@angular/platform-browser";
-import {SearchCustomFilter} from "../../openaireLibrary/searchPages/searchUtils/searchUtils.class";
-import {SearchOrcidService} from "../../openaireLibrary/claims/claim-utils/service/searchOrcid.service";
-import {properties} from "../../../environments/environment";
-
-@Component({
-  selector: 'author',
-  template: `
-  
-  <monitor-search-results   ></monitor-search-results>
-  
-  `
-})
-export class AuthorComponent extends BaseComponent implements OnInit {
-
-  constructor(private stakeholderService: StakeholderService,
-              private _searchOrcidService: SearchOrcidService,
-              protected _route: ActivatedRoute,
-              protected _router: Router,
-              protected seoService: SEOService,
-              protected _piwikService: PiwikService,
-              protected _title: Title,
-              protected _meta: Meta) {
-    super();
-  }
-
-  ngOnInit() {
-
-  }
-
-
-}

src/app/researcher/author/author.module.ts

@@ -1,18 +0,0 @@
-import {NgModule} from "@angular/core";
-import {CommonModule} from "@angular/common";
-import {Route, RouterModule} from "@angular/router";
-import {AuthorComponent} from "./author.component";
-import {MonitorSearchResearchResultsModule} from "../../search/searchPages/simple/searchResearchResults.module";
-const routes: Route[] = [
-  {
-    path: '', component: AuthorComponent
-  }
-];
-
-@NgModule({
-  imports: [CommonModule, RouterModule.forChild(routes), MonitorSearchResearchResultsModule],
-  declarations: [AuthorComponent],
-  exports: [AuthorComponent],
-})
-export class AuthorModule {
-}

src/app/researcher/researcher.component.ts

@@ -12,6 +12,9 @@ import {ResearcherBaseComponent} from "../shared/researcher-base.component";
 import {LinksResolver} from "../search/links-resolver";
 import {SearchCustomFilter} from "../openaireLibrary/searchPages/searchUtils/searchUtils.class";
 import {properties} from "../../environments/environment";
+import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
+import {ConfigurationService} from "../openaireLibrary/utils/configuration/configuration.service";
+import {OpenaireEntities} from "../openaireLibrary/utils/properties/searchFields";
 
 @Component({
   selector: 'researcher',
@@ -30,11 +33,11 @@ import {properties} from "../../environments/environment";
                     </div>
                   </div>
                   <div class="uk-width-expand uk-margin-small-left">
-                    <div class="uk-h5 uk-margin-xsmall-bottom uk-text-truncate">{{author.authorGivenName}} {{author.authorFamilyName}}</div>
-                    <div class="uk-text-xsmall uk-text-bold uk-margin-bottom">
-                      <div *ngIf="totalResults > 0">{{totalResults}} research outcomes</div>
+                    <div class="uk-h4 uk-margin-xsmall-bottom uk-text-truncate">{{author.authorGivenName}} {{author.authorFamilyName}}</div>
+                    <!--<div class="uk-text-xsmall uk-text-bold uk-margin-bottom">
+                      <div *ngIf="totalResults > 0">{{totalResults}} {{openaireEntities.RESULTS}}</div>
                       <div *ngIf="author.institutions" class="uk-text-truncate">{{author.institutions.join(", ")}} </div>
-                    </div>
+                    </div>-->
                     <div class="uk-flex uk-flex-middle uk-text-small uk-text-italic">
                       <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid"
                             loading="lazy" style="width:16px; height:16px;" class="uk-margin-xsmall-right">
@@ -43,30 +46,45 @@ import {properties} from "../../environments/environment";
                       </a>
                     </div>
                   </div>
-                </div>
-              </div>
-              <div *ngIf="openResults && totalResults" class="uk-width-auto">
-                <div class="uk-progress-semicircle open-access" [attr.percentage]="getPercentage()" [style]="'--percentage:' + getPercentage()"></div>
-                <div class="uk-flex uk-flex-middle uk-margin-small-top">
-                  <icon class="open-access" [name]="'open_access'" [flex]="true"></icon>
-                  <span class="uk-margin-xsmall-left">Open Access</span>
+                  <div *ngIf="stakeholder" class="uk-width-auto">
+                   <oa-indicator [stakeholder]="stakeholder"></oa-indicator>
+                  </div>
                 </div>
               </div>
             </div>
-            <h1 *ngIf="!authorId" class="uk-h4 uk-margin-small-bottom">Researcher Monitors</h1>
+            <h1 *ngIf="!authorId" class="uk-h3 uk-margin-small-bottom">Researcher Monitors</h1>
+          </div>
+        </div>
+        <div *ngIf="stakeholder" class="uk-banner-footer">
+          <div class="uk-container uk-container-large uk-flex uk-flex-between">
+            <ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
+              <li [class.uk-active]="!isSearch">
+                <a [routerLink]="['./', stakeholder.alias]" [relativeTo]="_route" (click)="isSearch = false">
+                  {{entities.stakeholder}}
+                </a>
+              </li>
+              <li [class.uk-active]="isSearch">
+                <a [routerLink]="['./', stakeholder.alias, 'search']" [queryParams]="routerHelper.createQueryParams(['type','peerreviewed'], [quote('publications'), quote('true')])" [relativeTo]="_route">
+                  Browse {{openaireEntities.RESULTS}}
+                </a>
+              </li>
+            </ul>
+
           </div>
         </div>
       </div>
-      <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
+      <div class="uk-container uk-container-large">
         <router-outlet></router-outlet>
       </div>
     </div>
   `
 })
-export class ResearcherComponent extends ResearcherBaseComponent implements OnInit {
+export class ResearcherComponent extends ResearcherBaseComponent  implements OnInit {
   totalResults: number;
-  openResults: number;
   loading: boolean = false;
+  stakeholder;
+  isSearch: boolean = false;
+  openaireEntities = OpenaireEntities;
 
   constructor(protected _router: Router,
               protected _route: ActivatedRoute,
@@ -77,9 +95,13 @@ export class ResearcherComponent extends ResearcherBaseComponent implements OnIn
               protected _searchOrcidService: SearchOrcidService,
               protected _searchResearchResultsService: SearchResearchResultsService,
               private _customFilterService: CustomFilterService,
-              private layoutService: LayoutService) {
+              private layoutService: LayoutService,
+              private stakeholderService: StakeholderService,
+              private configurationService: ConfigurationService) {
     super();
-    super.initRouterParams(this._route);
+    super.initRouterParams(this._route, event => {
+      this.isSearch = event.url.includes('/search');
+    });
   }
 
 
@@ -87,37 +109,58 @@ export class ResearcherComponent extends ResearcherBaseComponent implements OnIn
     this.layoutService.setRootClass('researcher');
     this.params.subscribe(params => {
       this.authorId = params['stakeholder'];
-      this.author = null;
-      this._customFilterService.setCustomFilter([]);
       if (this.authorId) {
-        this.loading = true;
-        LinksResolver.resetProperties();
-        LinksResolver.setSearchAndResultLanding("researcher/" + this.authorId);
-        this.orcid = {
-          success: () => {
-            this._customFilterService.setCustomFilter(
-                [new SearchCustomFilter("National", "country", "IE", "Irish National Monitor", false),
-                  new SearchCustomFilter("Orcid", "authorId", this.authorId, this.author.authorGivenName + " " + this.author.authorFamilyName)
-                ]);
-          },
-          error: () => {
-            this._router.navigate([properties.errorLink]);
-          }
-        }
-        this.results = {
-          success: (res: string | number) => {
-            this.totalResults = +res;
-            if(this.totalResults ==0 ){
+        if(this.stakeholder?.index_id !== this.authorId) {
+          this.loading = true;
+          this.author = null;
+          this._customFilterService.setCustomFilter([]);
+
+              this.orcid = {
+                success: () => {
+                  let name = this.author.authorGivenName + " " + (this.author.authorFamilyName?this.author.authorFamilyName:"");
+                  this._customFilterService.setCustomFilter(
+                    [/*new SearchCustomFilter("National", "country", "IE", "Irish National Monitor", false),*/
+                      new SearchCustomFilter("Orcid", "authorId", this.authorId, name)
+                    ]);
+                  this.title = name;
+                  this.description = name;
+                  this.setProperties(this.authorId, "researcher", this.configurationService);
+                  LinksResolver.resetProperties();
+                  LinksResolver.setSearchAndResultLanding("researcher/" + this.authorId);
+                  this.setMetadata();
+                },
+                error: () => {
+                  this._router.navigate([properties.errorLink]);
+                }
+              }
+              this.results = {
+                success: (res: string | number) => {
+                  this.totalResults = +res;
+                  if(this.totalResults ==0 ){
+                    this._router.navigate([properties.errorLink]);
+                  }else{
+                    this.loading = false;
+                    this.subscriptions.push(this.stakeholderService.getResearcherStakeholder(this.authorId,"",this.totalResults, true).subscribe(stakeholder => {
+                      this.stakeholder = stakeholder;
+
+                    }));
+                  }
+                }
+              }
+              this.search();
+
+          /*  } else {
               this._router.navigate([properties.errorLink]);
-            }else{
-              this.loading = false;
-              this.subscriptions.push(this._searchResearchResultsService.numOfResearchOutcomes(this.param + ' and (resultbestaccessright exact "Open Access")', properties, null).subscribe(res => {
-                this.openResults = +res;
-              }));
             }
-          }
+          }));*/
         }
-        this.search();
+      } else {
+        this.stakeholder = null;
+        this.author = null;
+        this._customFilterService.setCustomFilter([]);
+        this.title = 'Researcher Monitors';
+        this.description = 'Researcher Monitors';
+        this.setMetadata();
       }
     });
   }
@@ -125,10 +168,6 @@ export class ResearcherComponent extends ResearcherBaseComponent implements OnIn
   ngOnDestroy() {
     super.ngOnDestroy();
     this.layoutService.setRootClass(null);
-  }
-
-  getPercentage(){
-    let num = (this.openResults/this.totalResults)*100;
-    return num == 100?100:num.toPrecision(2);
+    LinksResolver.resetProperties();
   }
 }

src/app/researcher/researcher.module.ts

@@ -8,19 +8,22 @@ import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
 import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
 import {IconsService} from '../openaireLibrary/utils/icons/icons.service';
 import {open_access} from '../openaireLibrary/utils/icons/icons';
+import {SandboxGuard} from "../shared/sandbox.guard";
+import {OaIndicatorModule} from "../shared/oa-indicator/oa-indicator.module";
 
 const routes: Route[] = [
   {
     path: '', component: ResearcherComponent, children: [
       {path: '', loadChildren: () => import('./search-researcher/search-researcher.module').then(m => m.SearchResearcherModule)},
-      {path: ':stakeholder', loadChildren: () => import('./author/author.module').then(m => m.AuthorModule)},
-      {path: ':stakeholder/search', loadChildren: () => import('../search/resultLanding.module').then(m => m.ResultLandingModule)}
+      {path: ':stakeholder/search', loadChildren: () => import('../search/resultLanding.module').then(m => m.ResultLandingModule)},
+      {path: ':stakeholder', loadChildren: () => import('../shared/monitor/monitor.module').then(m => m.MonitorModule), canActivateChild: [SandboxGuard],
+      data: {"researcher": true}}
     ]
   }
 ];
 
 @NgModule({
-  imports: [CommonModule, RouterModule.forChild(routes), SearchOrcidServiceModule, SearchResearchResultsServiceModule, LoadingModule, IconsModule],
+  imports: [CommonModule, RouterModule.forChild(routes), SearchOrcidServiceModule, SearchResearchResultsServiceModule, LoadingModule, IconsModule, OaIndicatorModule],
   declarations: [ResearcherComponent],
   exports: [ResearcherComponent],
 })

src/app/researcher/search-researcher/search-researcher.component.html

@@ -1,66 +1,67 @@
-<div class="uk-flex uk-flex-center">
-  <div search-input [(value)]="keyword" [placeholder]="'Search for author or ORCID...'" [disabled]="orcidStatus ==errorCodes.LOADING"
-    [searchInputClass]="'flat'" [iconPosition]="'left'" (searchEmitter)="searchByKeyword()" (valueChange)="checkForReset()"  class="uk-width-xlarge@l uk-width-large@m uk-width-1-1"></div>
-</div>
-
-<div class="uk-margin-large-top">
-  <div *ngIf="orcidStatus == errorCodes.ERROR" class="uk-flex uk-flex-center">
-    <div class="uk-alert uk-alert-warning uk-text-center uk-width-2-3@m uk-width-1-1" role="alert">
-      An error occured
+<div class="uk-section-small">
+    <div class="uk-flex uk-flex-center">
+        <div search-input [(value)]="keyword" placeholder="Search by full name or ORCID for accurate results." tooltip="e.g: James Smith or 0000-0001-2345-6789" [disabled]="orcidStatus ==errorCodes.LOADING"
+             [searchInputClass]="'flat'" [iconPosition]="'left'" (searchEmitter)="searchByKeyword()" (valueChange)="checkForReset()"  class="uk-width-xlarge@l uk-width-large@m uk-width-1-1"></div>
     </div>
-  </div>
-  <div *ngIf="orcidStatus == errorCodes.NOT_AVAILABLE" class="uk-flex uk-flex-center">
-    <div class="uk-alert uk-alert-danger uk-text-center uk-width-2-3@m uk-width-1-1" role="alert">
-      Service not available
-    </div>
-  </div>
-  <div *ngIf="orcidStatus == errorCodes.NONE" class="uk-flex uk-flex-center">
-    <div class="uk-alert uk-alert-primary uk-text-center uk-width-2-3@m uk-width-1-1">
-      No results found
-    </div>
-  </div>
-  <div *ngIf="!(orcidStatus == errorCodes.NONE ||
-  orcidStatus == errorCodes.ERROR || orcidStatus == errorCodes.NOT_AVAILABLE)">
-    <!--  Debug info -->
-    <!--<div>
-    Orcid found:{{authors.length}} <br>
-    check for results: {{authorsRendered}} <br>
-    Authors found (with OpenAIRE results):{{authorsToShow.length}} <br>
-    page: {{page}}<br>
-    </div>-->
-    <div class="uk-grid uk-grid-small uk-child-width-1-3@l uk-child-width-1-2@m" uk-grid>
-      <div *ngFor=" let author of authorsToShow.slice(0,page*size>authorsToShow.length?authorsToShow.length:page*size)">
-        <div *ngIf="author.resultsCount > 0" class="uk-card uk-card-default uk-card-hover uk-padding-small clickable" 
-          [routerLink]="'./'+author.id+''"  [queryParams]="routerHelper.createQueryParams(['type','peerreviewed'], [quote('publications'), quote('true')])">
-          <div class="uk-margin-bottom uk-grid uk-flex-middle" uk-grid>
-            <div>
-              <div class="uk-border uk-border-circle uk-text-meta uk-padding-xsmall uk-margin-small-right">
-                <icon [name]="'person'" [ratio]="2" [flex]="true"></icon>
-              </div>
+    <div class="uk-margin-large-top">
+        <div *ngIf="orcidStatus == errorCodes.ERROR" class="uk-flex uk-flex-center">
+            <div class="uk-alert uk-alert-warning uk-text-center uk-width-2-3@m uk-width-1-1" role="alert">
+                An error occured
             </div>
-            <div class="uk-padding-remove-left uk-width-expand">
-                <div class="uk-h6 uk-margin-xsmall-bottom uk-text-truncate">{{author.authorGivenName}} {{author.authorFamilyName}}</div>
-                <div class="uk-text-primary uk-text-xsmall uk-text-bold">
-                  <div *ngIf="author.resultsCount && author.resultsCount > 0">{{author.resultsCount}} research outcomes</div>
-                  <div class="uk-text-truncate" *ngIf="author.institutions">{{author.institutions.join(", ")}}</div>
+        </div>
+        <div *ngIf="orcidStatus == errorCodes.NOT_AVAILABLE" class="uk-flex uk-flex-center">
+            <div class="uk-alert uk-alert-danger uk-text-center uk-width-2-3@m uk-width-1-1" role="alert">
+                Service not available
+            </div>
+        </div>
+        <div *ngIf="orcidStatus == errorCodes.NONE" class="uk-flex uk-flex-center">
+            <div class="uk-alert uk-alert-primary uk-text-center uk-width-2-3@m uk-width-1-1">
+                No results found
+            </div>
+        </div>
+        <div *ngIf="!(orcidStatus == errorCodes.NONE ||
+  orcidStatus == errorCodes.ERROR || orcidStatus == errorCodes.NOT_AVAILABLE)">
+            <!--  Debug info -->
+            <!--<div>
+            Orcid found:{{authors.length}} <br>
+            check for results: {{authorsRendered}} <br>
+            Authors found (with OpenAIRE results):{{authorsToShow.length}} <br>
+            page: {{page}}<br>
+            </div>-->
+            <div class="uk-grid uk-grid-small uk-child-width-1-3@l uk-child-width-1-2@m" uk-grid>
+                <div *ngFor=" let author of authorsToShow.slice(0,page*size>authorsToShow.length?authorsToShow.length:page*size)">
+                    <div *ngIf="author.resultsCount > 0" class="uk-card uk-card-default uk-card-hover uk-padding-small clickable"
+                         [routerLink]="'./'+author.id+''">
+                        <div class="uk-margin-bottom uk-grid uk-flex-middle" uk-grid>
+                            <div>
+                                <div class="uk-border uk-border-circle uk-text-meta uk-padding-xsmall uk-margin-small-right">
+                                    <icon [name]="'person'" [ratio]="2" [flex]="true"></icon>
+                                </div>
+                            </div>
+                            <div class="uk-padding-remove-left uk-width-expand">
+                                <div class="uk-h6 uk-margin-xsmall-bottom uk-text-truncate">{{author.authorGivenName}} {{author.authorFamilyName}}</div>
+                                <div class="uk-text-primary uk-text-xsmall uk-text-bold">
+                                    <!--                  <div *ngIf="author.resultsCount && author.resultsCount > 0">{{author.resultsCount}} {{openaireEntities.RESULTS}}</div></div>-->
+                                    <div class="uk-text-truncate" *ngIf="author.institutions">{{author.institutions.join(", ")}}</div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="uk-margin-top uk-text-small uk-text-italic">
+                            <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid"
+                                 loading="lazy" style="width:16px; height:16px; margin-right: 3px;">
+                            <a [href]="properties.orcidURL + author.id" target="_blank" class="uk-link-text">
+
+                                {{properties.orcidURL + author.id}}</a></div>
+                        <!-- <div>Research outcomes:{{author.resultsCount}}</div>-->
+                    </div>
                 </div>
             </div>
-          </div>
-          <div class="uk-margin-top uk-text-small uk-text-italic">
-              <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid"
-                  loading="lazy" style="width:16px; height:16px; margin-right: 3px;">
-              <a [href]="properties.orcidURL + author.id" target="_blank" class="uk-link-text">
-
-              {{properties.orcidURL + author.id}}</a></div>
-              <!-- <div>Research outcomes:{{author.resultsCount}}</div>-->
+            <div *ngIf="orcidStatus == errorCodes.LOADING" class="uk-height-medium uk-position-relative" role="alert">
+                <loading class="uk-position-center"></loading>
+            </div>
+            <div class="uk-flex uk-flex-center uk-margin-medium-top">
+                <button *ngIf="authorsToShow.length >  0 && orcidStatus != errorCodes.LOADING && (authorsToShow.length > page*size || authors.length > authorsRendered)" class="uk-button uk-button-default" [class.uk-disabled]="orcidStatus == errorCodes.LOADING" (click)="loadMore()" >Load more</button>
+            </div>
         </div>
-      </div>
     </div>
-    <div *ngIf="orcidStatus == errorCodes.LOADING" class="uk-height-medium uk-position-relative" role="alert">
-        <loading class="uk-position-center"></loading>
-    </div>
-    <div class="uk-flex uk-flex-center">
-        <button *ngIf="authorsToShow.length >  0 && orcidStatus != errorCodes.LOADING && (authorsToShow.length > page*size || authors.length > authorsRendered)" class="uk-button uk-button-default" [class.uk-disabled]="orcidStatus == errorCodes.LOADING" (click)="loadMore()" >Load more</button>
-    </div>
-  </div>
 </div>

src/app/researcher/search-researcher/search-researcher.component.ts

@@ -12,12 +12,14 @@ import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service
 import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
 import {Meta, Title} from "@angular/platform-browser";
 import {map} from "rxjs/operators";
+import {OpenaireEntities} from "../../openaireLibrary/utils/properties/searchFields";
 
 @Component({
   selector: 'search-researcher',
   templateUrl: './search-researcher.component.html',
 })
 export class SearchResearcherComponent  extends BaseComponent implements OnInit  {
+  openaireEntities = OpenaireEntities;
   page: number = 1;
   size: number = 10;
   public keyword: string = "";//"paolo manghi";//'0000-0001-7291-3210';
@@ -80,6 +82,9 @@ export class SearchResearcherComponent  extends BaseComponent implements OnInit
       return;
     }
     this.orcidStatus = this.errorCodes.LOADING;
+    if(!Identifier.isValidORCID(this.keyword) && Identifier.isValidORCID(this.keyword.replace("x","X"))){
+      this.keyword = this.keyword.replace("x","X")
+    }
     if(Identifier.isValidORCID(this.keyword)){
       this.getOrcidAuthor(this.keyword.indexOf(properties.orcidURL)!=-1?this.keyword.split(properties.orcidURL)[1]:this.keyword, true, -1);
     }else{

src/app/resources/engagement/engagement.component.html

@@ -0,0 +1,38 @@
+<div class="uk-banner dark uk-padding-remove-vertical uk-light">
+  <div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
+    <div>
+      <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
+    </div>
+    <div class="uk-container uk-container-small uk-text-center" uk-scrollspy-class>
+      <h1 class="uk-h2 uk-margin-medium-top">Engage, learn, and contribute to the Open Science community.</h1>
+      <div class="uk-text-large uk-margin-medium-bottom">Explore essential resources and activities that enhance your interaction with the National Open Access Monitor of Ireland.</div>
+    </div>
+    <div class="graphics uk-flex uk-flex-middle uk-flex-center uk-margin-top">
+      <img class="graphic graphic1 uk-position-relative" src="assets/irish-assets/resources/resources-pink-blue.png" loading="lazy">
+      <img class="graphic graphic2 uk-position-relative" src="assets/irish-assets/resources/resources-green.png" loading="lazy">
+      <img class="graphic graphic3 uk-position-relative" src="assets/irish-assets/resources/resources-dark-blue.jpg" loading="lazy">
+      <img class="graphic graphic4 uk-position-relative" src="assets/irish-assets/resources/resources-orange.jpg" loading="lazy">
+    </div>
+  </div>
+</div>
+
+<ng-container *ngIf="divContents">
+  <helper [texts]="divContents['events']"></helper>
+</ng-container>
+
+<div class="uk-flex uk-child-width-1-1 uk-child-width-1-2@m uk-margin-large-top">
+  <div class="uk-section">
+    <div class="uk-width-1-1 uk-width-1-2@m uk-margin-auto" [ngClass]="isMobile ? 'uk-container' : ''">
+      <div class="uk-text-large uk-text-primary">Contact us</div>
+      <h2 class="uk-h3 uk-margin-remove">Stay in the loop</h2>
+      <div class="uk-margin-top">
+        If you wish to stay updated on our engagement and training events, please contact us. We’ll ensure you’re informed about upcoming opportunities to connect and learn.
+      </div>
+      <a class="uk-button uk-button-primary uk-margin-medium-top" routerLink="/contact-us">contact us</a>
+    </div>
+  </div>
+  <div class="uk-visible@m uk-banner uk-overflow-hidden uk-position-relative">
+    <img class="uk-position-bottom-right" style="margin: -10px"
+      src="assets/irish-assets/resources/dashboard-half-height.png" alt="National Monitor Dashboard" loading="lazy">
+  </div>
+</div>

src/app/resources/engagement/engagement.component.less

@@ -0,0 +1,52 @@
+@import (reference) "~src/assets/extend-theme/less/_import-variables.less";
+@import (reference) "~src/assets/openaire-theme/less/mixin.less";
+
+.graphics {
+  grid-gap: 40px;
+
+  .graphic {
+    max-width: 213px;
+
+    &.graphic1 {
+      transform: translateY(60%);
+    }
+
+    &.graphic2 {
+      transform: translateY(45%);
+    }
+
+    &.graphic3 {
+      transform: translateY(25%);
+    }
+
+    &.graphic4 {
+      transform: translateY(45%);
+    }
+  }
+}
+
+@media (max-width: @breakpoint-small-max) {
+  .graphics {
+    grid-gap: 20px;
+  
+    .graphic {
+      max-width: 80px;
+  
+      &.graphic1 {
+        transform: translateY(60%);
+      }
+  
+      &.graphic2 {
+        transform: translateY(45%);
+      }
+  
+      &.graphic3 {
+        transform: translateY(25%);
+      }
+  
+      &.graphic4 {
+        transform: translateY(45%);
+      }
+    }
+  }
+}

src/app/resources/engagement/engagement.component.ts

@@ -0,0 +1,50 @@
+import {ChangeDetectorRef, Component, OnInit} from "@angular/core";
+import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
+import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
+import {ActivatedRoute, Router} from "@angular/router";
+import {Meta, Title} from "@angular/platform-browser";
+import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
+import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
+import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
+
+@Component({
+  selector: 'engagement',
+  templateUrl: 'engagement.component.html',
+  styleUrls: ['engagement.component.less']
+})
+export class EngagementComponent extends BaseComponent implements OnInit {
+  title = 'Engagement & Training';
+  description = 'Engagement & Training';
+  breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'resources - engagement & training'}];
+  divContents: any;
+
+  isMobile: boolean = false;
+
+  constructor(protected _route: ActivatedRoute,
+              protected _piwikService: PiwikService,
+              protected _meta: Meta,
+              protected seoService: SEOService,
+              protected _title: Title,
+              protected _router: Router,
+              private cdr: ChangeDetectorRef,
+              private layoutService: LayoutService,
+              private helper: HelperService) {
+    super();
+  }
+
+  ngOnInit() {
+    this.setMetadata();
+    this.layoutService.isMobile.subscribe(isMobile => {
+			this.isMobile = isMobile;
+			this.cdr.detectChanges();
+		});
+    this.getDivContents();
+  }
+
+  private getDivContents() {
+    this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'irish', '/engagement-training').subscribe(contents => {
+      this.divContents = contents;
+    }));
+  }
+}

src/app/resources/engagement/engagement.module.ts

@@ -0,0 +1,18 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {EngagementComponent} from "./engagement.component";
+import {RouterModule} from "@angular/router";
+import {BreadcrumbsModule} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
+import {HelperModule} from "../../openaireLibrary/utils/helper/helper.module";
+
+@NgModule({
+  declarations: [EngagementComponent],
+  imports: [CommonModule, RouterModule.forChild([
+    {
+      path: '', component: EngagementComponent
+    }
+  ]), BreadcrumbsModule, HelperModule],
+  exports: [EngagementComponent]
+})
+export class EngagementModule {
+}

src/app/resources/how-it-works/about.component.html

@@ -0,0 +1,182 @@
+<ng-template #about>
+  <h1 [ngClass]="isMobile ? 'uk-heading-small' : 'uk-h2'">About</h1>
+  <div class="about uk-margin-top uk-text-large">
+    Welcome to the National Open Access Monitor, Ireland, <mark>a dynamic and innovative platform
+    designed to chart and foster the transition of Ireland’s scholarly output to 100% Open Access.</mark>
+    This project has been entrusted to <a target="_blank" href="https://www.openaire.eu/" class="custom-external">OpenAIRE</a>,
+    following a contract awarded through a
+    <a target="_blank" href="https://irl.eu-supply.com/ctm/Supplier/PublicPurchase/238957/0/0?returnUrl=ctm/Supplier/publictenders&b=ETENDERS_SIMPLE" class="custom-external">competitive tendering process</a>
+    by the <a target="_blank" href="https://irel.ie/" class="custom-external">Irish Research eLibrary</a> (IReL) in collaboration with
+    <a target="_blank" href="https://www.educationprocurementservice.ie/" class="custom-external">Education Procurement Services</a>.
+  </div>
+  <a routerLink="/national" class="uk-button uk-button-secondary uk-margin-medium-top">Take a look</a>
+</ng-template>
+
+<ng-template #pilot>
+  This platform is currently in its <span class="uk-text-bold">pilot</span> phase.
+  Over the next few months, we are dedicatedly working on enhancing data quality and expanding functionalities.
+  This period is crucial for refining our services and ensuring that the platform meets the highest standards of excellence
+  and user satisfaction, please <a routerLink="/contact-us">contact us</a> with any questions or comments.
+</ng-template>
+
+<ng-template #mission>
+  <div class="uk-text-large uk-width-2-5@m uk-width-1-1">
+    At the heart of this platform is the mission to provide transparent, comprehensive insights into the state of Open Access in Ireland.
+    It serves as a key instrument for analyzing trends, identifying challenges,
+    and guiding policy development towards achieving an open, accessible, and sustainable research environment.
+  </div>
+</ng-template>
+
+<ng-template #context>
+  <div class="uk-light">
+    <h2 [ngClass]="isMobile ? 'uk-heading-small' : 'uk-h2'">Context</h2>
+    <div class="context uk-text-large uk-margin-medium-top">
+      In 2022, the National Open Research Forum (NORF) awarded funding to six collaborative projects
+      to implement priority actions in Ireland’s <a target="_blank" href="https://norf.ie/national-action-plan/" class="custom-external">National Action Plan for Open Research 2022-2030</a>.
+      By building national capacity and infrastructure for open research, these projects support the visibility and impact
+      of Irish research and help progress Ireland’s strategic goals for research and innovation under Impact 2030.
+      Development of the National Open Access Monitor is one of the priority actions
+      and the funding for management of the project was awarded to IReL.
+      The tender requirements for the National Open Access Monitor and a definition for open access in this context were
+      both defined following <a target="_blank" href="https://irel.ie/oamonitor-february2023survey-update/" class="custom-external">consultation</a> with national stakeholders.
+      The impact of the project will be to enable both point-in-time and longitudinal monitoring
+      of the open access status of Irish research publications as part of national implementation
+      and monitoring of open research practices.
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #norf>
+  <h4 class="uk-h3">NORF</h4>
+  <div class="uk-width-expand uk-text-large uk-margin-medium-bottom">
+    Ireland’s <a target="_blank" href="https://norf.ie/" class="custom-external">National Open Research Forum</a> (NORF) was established in 2017 to drive the Irish agenda for open research.
+    NORF provides a space for communication, consultation and cooperation among key stakeholders
+    in the research system regarding strategic issues and overarching policies and procedures in open research.
+    NORF developed Ireland’s <a target="_blank" href="https://doi.org/10.7486/DRI.0287dj04d" class="custom-external">National Framework on the Transition to an Open Research Environment</a> (2019)
+    and the <a target="_blank" href="https://norf.ie/national-action-plan/" class="custom-external">National Action Plan for Open Research 2022-2030</a>.
+  </div>
+  <div class="uk-flex uk-flex-right">
+    <a target="_blank" href="https://norf.ie/" class="uk-link-reset uk-flex uk-flex-middle">
+      <span class="uk-text-large uk-text-bolder">NORF</span>
+      <button class="uk-icon-button uk-button-secondary uk-margin-left">
+        <icon [name]="'north_east'" [flex]="true" [ratio]="1.5"></icon>
+      </button>
+    </a>
+  </div>
+</ng-template>
+
+<ng-template #irel>
+  <h4 class="uk-h3">IReL</h4>
+  <div class="uk-width-expand uk-text-large uk-margin-medium-bottom">
+    IReL is the e-resource licensing consortium for Irish publicly funded higher education institutions
+    and the lead organisation for the Irish ORCID Consortium.
+    Since 2004, the IReL service (hosted by Maynooth University) has expanded from providing access
+    to quality peer-reviewed online research publications and index & abstracting services,
+    to facilitating open access publishing agreements, and managing the Irish ORCID Consortium.
+  </div>
+  <div class="uk-flex uk-flex-right">
+    <a target="_blank" href="" class="uk-link-reset uk-flex uk-flex-middle">
+      <span class="uk-text-large uk-text-bolder">IReL</span>
+      <button class="uk-icon-button uk-button-secondary uk-margin-left">
+        <icon [name]="'north_east'" [flex]="true" [ratio]="1.5"></icon>
+      </button>
+    </a>
+  </div>
+</ng-template>
+
+<ng-template #openaire>
+  <h4 class="uk-h3">OpenAIRE</h4>
+  <div class="uk-grid uk-grid-divider uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
+    <div class="uk-text-large">
+      OpenAIRE AMKE is a non-profit organization established in 2018 to create a European-wide national policy
+      and open scholarly communication infrastructure.
+      OpenAIRE started as a series of European Commission projects in 2010 before incorporating
+      and has built extensive experience in both technical infrastructure and working within the Open Science community.
+      Its mission is to establish, maintain, and operate an open and sustainable scholarly communication infrastructure
+      and provide the necessary services, resources, and network for supporting a common European open e-research and e-science environment.
+      OpenAIRE modus operandi includes applying and contributing to international best practices
+      to meet the needs of the research community and promote Open Science. In particular, OpenAIRE:
+    </div>
+    <div>
+      <ul class="uk-list uk-list-bullet uk-list-secondary">
+        <li>Adheres to and promotes key standards like the FAIR principles.</li>
+        <li>Provides the <a target="_blank" href="https://guidelines.openaire.eu/en/latest/" class="custom-external">OpenAIRE Guidelines</a>
+          for literature repositories, data archives, and Current Research Information Systems (CRIS) managers,
+          which (a) adapt global standards and schemas from RDA, COUNTER, COAR, DataCite, etc.,
+          and (b) are adopted by organisations around the world.</li>
+        <li>As a key partner in delivering the EOSC CORE and the EOSC Interoperability Framework,
+          OpenAIRE ensures interoperability with the European Open Science Cloud (EOSC).</li>
+        <li>Supports Open Access policies and advocacy.</li>
+        <li>Provides capacity building and training for the Open Science community.</li>
+      </ul>
+    </div>
+  </div>
+  <div class="uk-text-large">
+    <div class="uk-margin-medium-top">
+      As Ireland moves towards an open research environment, this platform signifies a commitment to transparency,
+      access, and the advancement of scientific communication.
+      It is a crucial step in supporting Ireland's alignment with broader European and global movements towards accessible and open scientific research.
+    </div>
+    <div class="uk-margin-top">
+      Discover more about this initiative in our Zenodo community, including related reports, presentations, and datasets.
+    </div>
+    <div class="uk-margin-top">
+      Thank you for joining us!
+    </div>
+  </div>
+  <div class="uk-flex uk-flex-right uk-margin-medium-top">
+    <a target="_blank" href="https://www.openaire.eu" class="uk-link-reset uk-flex uk-flex-middle">
+      <span class="uk-text-large uk-text-bolder">OpenAIRE</span>
+      <button class="uk-icon-button uk-button-secondary uk-margin-left">
+        <icon [name]="'north_east'" [flex]="true" [ratio]="1.5"></icon>
+      </button>
+    </a>
+  </div>
+</ng-template>
+
+<div class="uk-container uk-container-large uk-section uk-section-small hero">
+  <div>
+    <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
+  </div>
+  <div class="uk-flex uk-flex-wrap uk-flex-middle uk-child-width-1-2@m uk-width-1-1 uk-margin-medium-top uk-margin-large-bottom" uk-scrollspy-class>
+    <div>
+      <ng-container *ngTemplateOutlet="about"></ng-container>
+    </div>
+    <div [ngClass]="isMobile ? 'uk-margin-medium-top' : ''">
+      <div class="uk-card uk-card-body uk-card-default uk-background-secondary uk-light uk-margin-auto pilot uk-text-large">
+        <ng-container *ngTemplateOutlet="pilot"></ng-container>
+      </div>
+    </div>
+  </div>
+  <div class="logos uk-flex uk-flex-middle uk-flex-center">
+    <img src="assets/norf.jpg" alt="NORF" class="uk-blend-multiply">
+    <img src="assets/IReL logo.png" alt="IRel" class="uk-blend-multiply">
+    <img src="assets/common-assets/common/Logo_Horizontal.png" alt="OpenAIRE" class="uk-blend-multiply">
+  </div>
+</div>
+<div class="uk-container uk-container-large uk-section">
+  <div class="uk-flex uk-flex-center">
+    <ng-container *ngTemplateOutlet="mission"></ng-container>
+  </div>
+</div>
+<div class="uk-section uk-background-secondary dark">
+  <div class="uk-container uk-container-large">
+    <ng-container *ngTemplateOutlet="context"></ng-container>
+    <hr class="uk-margin-large">
+    <div class="uk-grid uk-child-width-1-1 uk-child-width-1-2@m uk-margin-medium-bottom" uk-grid uk-height-match="target: .uk-card;">
+      <div>
+        <div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-column card-bg norf">
+          <ng-container *ngTemplateOutlet="norf"></ng-container>
+        </div>
+      </div>
+      <div>
+        <div class="uk-card uk-card-default uk-card-body uk-flex uk-flex-column card-bg irel">
+          <ng-container *ngTemplateOutlet="irel"></ng-container>
+        </div>
+      </div>
+    </div>
+    <div class="uk-width-1-1 uk-card uk-card-default uk-card-body card-bg openaire">
+      <ng-container *ngTemplateOutlet="openaire"></ng-container>
+    </div>
+  </div>
+</div>

src/app/resources/how-it-works/about.component.less

@@ -0,0 +1,60 @@
+@import (reference) "~src/assets/extend-theme/less/_import-variables";
+@import (reference) "~src/assets/openaire-theme/less/color.less";
+
+.hero {
+  background-image: url("~/src/assets/irish-assets/resources/irish-bg-blur.png");
+  background-repeat: no-repeat;
+  background-position: center;
+  .about {
+    max-width: 500px;
+  }
+  .pilot {
+    max-width: 400px;
+  }
+  .logos {
+    grid-gap: 60px;
+    img {
+      height: 60px;
+    }
+  }
+}
+.context {
+  column-count: 2;
+  column-gap: 200px;
+}
+.card-bg {
+  background-repeat: no-repeat;
+  background-position: bottom;
+  &.norf {
+    background-image: url("~/src/assets/irish-assets/resources/norf-logo-blur.png");
+  }
+  &.irel {
+    background-image: url("~/src/assets/irish-assets/resources/irel-logo-blur.png");
+  }
+  &.openaire {
+    background-image: url("~/src/assets/irish-assets/resources/openaire-logo-blur.png");
+  }
+}
+
+@media (max-width: @breakpoint-small-max) {
+  .hero {
+    background-position: center bottom;
+    .logos {
+      grid-gap: 40px;
+      img {
+        height: 40px;
+      }
+    }
+  }
+  .context {
+    column-count: 1;
+  }
+}
+
+.uk-width-medium {
+  width: 350px;
+}
+
+.uk-card.pilot {
+  box-shadow: none;
+}

src/app/resources/how-it-works/about.component.ts

@@ -0,0 +1,54 @@
+import {ChangeDetectorRef, Component} from "@angular/core";
+import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
+import {ActivatedRoute, Router} from "@angular/router";
+import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
+import {Meta, Title} from "@angular/platform-browser";
+import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
+import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
+import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
+
+@Component({
+  selector: 'about',
+  templateUrl: 'about.component.html',
+  styleUrls: ['about.component.less']
+})
+export class AboutComponent extends BaseComponent {
+  title = 'About';
+  description = 'About';
+  breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'resources - about'}];
+  tab: 'mission' | 'context' | 'norf' | 'irel' | 'openaire' = 'mission';
+  contentSections: string[] = ['entities', 'inherited-and-inferred-attributes', 'constructed-attributes'];
+  activeSection: string;
+  divContents: any;
+
+  isMobile: boolean = false;
+  isServer: boolean;
+
+  constructor(protected _route: ActivatedRoute,
+              protected _piwikService: PiwikService,
+              protected _meta: Meta,
+              protected seoService: SEOService,
+              protected _title: Title,
+              protected _router: Router,
+              private cdr: ChangeDetectorRef,
+              private layoutService: LayoutService,
+              private helper: HelperService) {
+    super();
+  }
+
+  ngOnInit() {
+    this.setMetadata();
+    this.subscriptions.push(this._route.fragment.subscribe(fragment => {
+      if(fragment) {
+        this.activeSection = fragment;
+      } else {
+        this.activeSection = 'mission';
+      }
+    }));
+    this.layoutService.isMobile.subscribe(isMobile => {
+      this.isMobile = isMobile;
+      this.cdr.detectChanges();
+    });
+  }
+}

src/app/resources/how-it-works/how-it-works.module.ts

@@ -0,0 +1,41 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {RouterModule} from "@angular/router";
+import {AboutComponent} from "./about.component";
+import {TheFiveMonitorsComponent} from "./the-five-monitors.component";
+import {UserActionsComponent} from "./user-actions.component";
+import {SliderTabsModule} from "../../openaireLibrary/sharedComponents/tabs/slider-tabs.module";
+import {YouWeComponent} from "./you-we.component";
+import {BreadcrumbsModule} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
+import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
+import {HelperModule} from "../../openaireLibrary/utils/helper/helper.module";
+
+@NgModule({
+  declarations: [AboutComponent, TheFiveMonitorsComponent, UserActionsComponent, YouWeComponent],
+  imports: [CommonModule, RouterModule.forChild([
+    {
+      path: '',
+      redirectTo: 'about',
+      pathMatch: 'full',
+      canDeactivate: []
+    },
+    {
+      path: 'about',
+      component: AboutComponent,
+      canDeactivate: []
+    },
+    {
+      path: 'the-5-monitors',
+      component: TheFiveMonitorsComponent,
+      canDeactivate: []
+    },
+		{
+      path: 'user-actions',
+      component: UserActionsComponent,
+			canDeactivate: []
+    }
+  ]), SliderTabsModule, BreadcrumbsModule, IconsModule, HelperModule],
+  exports: []
+})
+export class HowItWorksModule {
+}

src/app/resources/how-it-works/the-five-monitors.component.html

@@ -0,0 +1,245 @@
+<div class="uk-container uk-container-large uk-section uk-section-small hero">
+  <div>
+    <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
+  </div>
+  <div class="uk-margin-medium-top" [class.uk-margin-medium-bottom]="!isMobile">
+    <h1 class="uk-h2 uk-text-center uk-width-1-1 uk-width-1-2@m uk-margin-auto">
+      Navigating Ireland’s Open Access
+    </h1>
+    <div class="uk-grid uk-flex-middle uk-margin-medium-top" uk-grid>
+      <div class="uk-width-1-1 uk-width-1-4@m">
+        <h2 class="uk-h3" [class.uk-text-center]="isMobile">
+          5 Tailored Dashboards for Insights.
+        </h2>
+      </div>
+      <div class="uk-width-1-1 uk-width-expand@m">
+        <img src="assets/irish-assets/resources/dashboard-half-height.png">
+      </div>
+      <div class="uk-width-1-1 uk-width-1-4@m" [class.uk-text-center]="isMobile">
+        <img src="assets/irish-assets/resources/five-monitors-badges.png">
+      </div>
+    </div>
+  </div>
+</div>
+<div class="uk-container uk-container-large uk-section">
+  <div class="uk-grid uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m uk-margin-medium-top" uk-grid>
+    <div>
+      <img src="assets/irish-assets/resources/dashboard-detailed.png">
+    </div>
+    <div>
+      <h2 class="uk-h3 uk-margin-remove">National Monitor.</h2>
+      <h2 class="uk-h3 uk-margin-remove-top">The Broad Perspective.</h2>
+      <div class="uk-margin-top uk-text-large">
+        The National Monitor offers an expansive view, featuring cross-country benchmarking and in-depth breakdowns specific to Ireland. It is meant to serve as a key resource for policymakers, publishers, and anyone interested in a comprehensive national overview. Take a look at the National Monitor for detailed insights into the broader Open Access landscape.
+      </div>
+      <a routerLink="/national" class="uk-button uk-button-secondary uk-margin-medium-top">Take a look</a>
+    </div>
+  </div>
+</div>
+<div class="uk-section uk-background-secondary">
+  <div class="uk-container uk-container-large">
+    <div class="uk-width-1-1 uk-width-2-3@m uk-light">
+      <h2 class="uk-h3">
+        Dive Deeper with Tailored Dashboards
+      </h2>
+      <div class="uk-text-large">
+        For RPOs, RFOs, Researchers, and Institutional Repositories, we invite you to explore your individual monitors. Each dashboard is equipped to give you a detailed understanding of your role and impact within Open Access research. Discover how each dashboard works in the sections below.
+      </div>
+    </div>
+    <div class="uk-section uk-light">
+      <div class="uk-sticky uk-visible@l" [attr.uk-sticky]="shouldSticky?'':null" [attr.offset]="offset">
+        <div class="uk-container">
+          <div class="uk-padding-small uk-padding-remove-horizontal uk-padding-remove-bottom">
+            <slider-tabs tabsClass="uk-subnav uk-subnav-pill-alt" [border]="false" flexPosition="center" customClass="uk-flex uk-flex-center uk-text-large"
+              [arrows]="false" containerClass="uk-padding-xsmall uk-blur-background uk-border-rounded-xlarge" connect="#tabs-content">
+              <slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
+                          [tabId]="section"></slider-tab>
+            </slider-tabs>
+          </div>
+        </div>
+      </div>
+      <div class="uk-sticky uk-hidden@l" [attr.uk-sticky]="shouldSticky?'':null">
+        <div>
+          <slider-tabs tabsClass="uk-subnav uk-subnav-pill-alt" [border]="false" flexPosition="center" customClass="uk-flex uk-flex-center uk-text-large"
+            [arrows]="false" containerClass="uk-padding-xsmall uk-blur-background uk-border-rounded-xlarge" connect="#tabs-content">
+            <slider-tab *ngFor="let section of sections; let i = index" [tabTitle]="section"
+                        [tabId]="section"></slider-tab>
+          </slider-tabs>
+        </div>
+      </div>
+      <ul id="tabs-content" class="uk-switcher uk-margin-large-bottom">
+        <li>
+          <you-we [type]="'Research Performing Organisation (RPO)'" id="rpo" [titleClass]="null" backgroundClass="uk-background-secondary">
+            <ng-container you>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-top uk-margin-large-bottom">
+                <div class="uk-card-body">
+                  <span class="uk-text-primary">Step 1a</span>
+                  <p class="uk-text-large uk-margin-xsmall-top">Assign a Primary Dashboard Manager</p>
+                  <p>Nominate a primary dashboard manager by <a routerLink="/contact-us" target="_blank">contacting us</a>. If you already have a primary dashboard manager or prefer not to be one, proceed to step 2. </p>
+                </div>
+              </div>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
+                <span class="uk-text-primary">Step 2a</span>
+                <p class="uk-text-large uk-margin-xsmall-top">Find Your RPO's Monitor Dashboard</p>
+                <p>Head to the <a routerLink="/rpo">RPO Monitor page</a> and look up your organization. If you can't find it or it appears under multiple names, please <a routerLink="/contact-us">contact us</a>. </p>
+              </div>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
+                <span class="uk-text-primary">Step 3a</span>
+                <p class="uk-text-large uk-margin-xsmall-top">Validate and approve the results. </p>
+                <p>You examine your dashboard and the showcased information to ensure you are satisfied with what you see.</p>
+              </div>
+            </ng-container>
+            <ng-container we>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-overflow-hidden uk-position-relative uk-margin-top uk-margin-large-bottom">
+                <div class="uk-card-body">
+                  <span class="uk-text-primary">Step 1b</span>
+                  <p class="uk-text-large uk-margin-xsmall-top">
+                    Invite your RPOs Primary Manager via email
+                  </p>
+                  <p>Primary managers will have the ability to invite additional managers. They will also have access to our Sandbox environment for data previews and use of OpenOrgs, OpenAIRE's organization deduplication service.</p>
+                </div>
+              </div>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
+                <span class="uk-text-primary">Step 2b</span>
+                <p class="uk-text-large uk-margin-xsmall-top">Troubleshoot your Monitor</p>
+                <p>We built your profile if it is missing and help you deduplicate your organization’s name via the OpenORgs service.</p>
+              </div>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
+                <span class="uk-text-primary">Step 3b</span>
+                <p class="uk-text-large uk-margin-xsmall-top">Interact with you Through 1-on-1 expert consultations</p>
+                <p>to understand any gaps and deviations within the dashboard to verify the data integrity</p>
+              </div>
+            </ng-container>
+          </you-we>
+        </li>
+        <li>
+          <you-we [type]="'Research Funding Organisation (RFO)'" id="rfo" [titleClass]="null" backgroundClass="uk-background-secondary">
+            <ng-container you>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-top uk-margin-large-bottom">
+                <div class="uk-card-body">
+                  <span class="uk-text-primary">Step 1a</span>
+                  <p class="uk-text-large uk-margin-xsmall-top">Assign a Primary Dashboard Manager</p>
+                  <p>Nominate a primary dashboard manager by by <a routerLink="/contact-us" target="_blank">contacting us</a>. If you already have a primary dashboard manager or prefer not to be one, proceed to step 2.</p>
+                </div>
+              </div>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
+                <span class="uk-text-primary">Step 2a</span>
+                <p class="uk-text-large uk-margin-xsmall-top">Find Your RFO's Monitor Dashboard</p>
+                <p>Head to the <a routerLink="/rfo">RFO Monitor page</a> and look up your organization. If you can't find it or it appears under multiple names, please <a routerLink="/contact-us">contact us</a>.</p>
+              </div>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
+                <span class="uk-text-primary">Step 3a</span>
+                <p class="uk-text-large uk-margin-xsmall-top">Discover Your Monitor and consider joining OpenAIRE (Optional)</p>
+                <p>Explore your personalized dashboard at your leisure. You have the option to join OpenAIRE, allowing us to develop a specialized text mining algorithm to enrich your profile. This marks the final step if you choose not to join OpenAIRE.</p>
+              </div>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-large-bottom">
+                <div class="uk-card-body uk-margin-medium-bottom">
+                  <span class="uk-text-primary">Step 4a</span>
+                  <p class="uk-text-large uk-margin-xsmall-top">Join OpenAIRE - You provide Information about your funded projects and join OpenAIRE.</p>
+                  <p>All information is exchanged under confidential agreements and we only make public what you agree on. 
+                  </p>
+                </div>
+              </div>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative">
+                <span class="uk-text-primary">Step 5a</span>
+                <p class="uk-text-large uk-margin-xsmall-top">validate the results and approve for them to be shown on your Monitor dashboard.</p>
+                <p>Examine your dashboard in the Sandbox environment and the showcased information to ensure you are satisfied with what you see.</p>
+              </div>
+            </ng-container>
+            <ng-container we>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-top uk-margin-large-bottom">
+                <div class="uk-card-body">
+                  <span class="uk-text-primary">Step 1b</span>
+                  <p class="uk-text-large uk-margin-xsmall-top">Invite your RFOs Primary Manager via email</p>
+                  <p>Primary managers will have the ability to invite additional managers. They will also have access to our Sandbox environment for data previews and curation.</p>
+                </div>
+              </div>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
+                <span class="uk-text-primary">Step 2b</span>
+                <p class="uk-text-large uk-margin-xsmall-top">Troubleshoot your Monitor</p>
+                <p>We built your profile if it is missing and help you with any additional issues</p>
+              </div>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
+                <span class="uk-text-primary">Step 3b</span>
+                <p class="uk-text-large uk-margin-xsmall-top">Interact with you  Through 1-on-1 expert consultations</p>
+                <p>to understand any gaps and deviations within the dashboard to verify the data integrity</p>
+              </div>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
+                <span class="uk-text-primary">Step 4b</span>
+                <p class="uk-text-large uk-margin-xsmall-top">Ingest your project metadata and mine the <a href="https://graph.openaire.eu" target="_blank">OpenAIRE Graph</a>.</p>
+                <p>We infer links to research results: publications, datasets, software, etc, via dedicated text mining algorithms.</p>
+              </div>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative">
+                <span class="uk-text-primary">Step 5b</span>
+                <p class="uk-text-large uk-margin-xsmall-top">Refine until you are happy with the results.</p>
+              </div>
+            </ng-container>
+          </you-we>
+        </li>
+        <li>
+          <you-we [type]="'Researcher'" id="researcher" [titleClass]="null" backgroundClass="uk-background-secondary">
+            <ng-container you>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-top uk-margin-large-bottom">
+                <div class="uk-card-body">
+                  <span class="uk-text-primary">Step 1a</span>
+                  <p class="uk-text-large uk-margin-xsmall-top">Access Your Profile with ORCID iD</p>
+                  <p>Log in using your ORCID iD to grant OpenAIRE access to your ORCID record. Then, visit the <a routerLink="/researcher">Researcher Monitors</a> to search for your ORCID iD. If it’s not listed, contact us. Note that only research products affiliated with an Irish RPO will be displayed in your profile. </p>
+                </div>
+              </div>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
+                <span class="uk-text-primary">Step 2a</span>
+                <p class="uk-text-large uk-margin-xsmall-top">Claim Additional Records</p>
+                <p>From your profile (click the circle with your initials at the top right), navigate to the 'My ORCID Links' page and allow OpenAIRE to enhance your ORCID record. Search for your research products and claim them. These will appear in your ORCID record following the next update of the OpenAIRE Graph.</p>
+              </div>
+            </ng-container>
+            <ng-container we>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-top uk-margin-large-bottom">
+                <div class="uk-card-body">
+                  <span class="uk-text-primary">Step 1b</span>
+                  <p class="uk-text-large uk-margin-xsmall-top">Troubleshoot your Monitor</p>
+                  <p>If your profile is missing, we are here to help build it. Remember, OpenAIRE syncs with ORCID, so research products not in ORCID or unaffiliated with an Irish organization will not appear in your record.</p>
+                </div>
+              </div>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
+                <span class="uk-text-primary">Step 2b</span>
+                <p class="uk-text-large uk-margin-xsmall-top">Support you in understanding any gaps or deviations within your dashboard and to provide assistance as needed.</p>
+              </div>
+            </ng-container>
+          </you-we>
+        </li>
+        <li>
+          <you-we [type]="'Institutional Repository'" id="repository" [titleClass]="null" backgroundClass="uk-background-secondary">
+            <ng-container you>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-top uk-margin-large-bottom">
+                <div class="uk-card-body">
+                  <span class="uk-text-primary">Step 1a</span>
+                  <p class="uk-text-large uk-margin-xsmall-top">Find Your Repository’s Monitor Dashboard & Register to OpenAIRE PROVIDE</p>
+                  <p>Navigate to the <a routerLink="/repository">Repository Monitor page</a> and search for your repository. If it is not listed, this indicates that you need to register with OpenAIRE. You can complete this process by following <a href="http://Navigate%20to%20the%20Repository%20Monitor%20page%20and%20search%20for%20your%20repository.%20If%20it's%20not%20listed,%20this%20typically%20indicates%20that%20you%20need%20to%20register%20with%20OpenAIRE.%20You%20can%20complete%20this%20process%20here.%20If%20your%20repository%20already%20has%20a%20Monitor%20dashboard%20but%20hasn't%20been%20registered%20in%20OpenAIRE%20PROVIDE,%20please%20contact%20us%20for%20assistance." target="_blank">these</a> instructions. If your repository already has a Monitor dashboard but your have not been registered in OpenAIRE PROVIDE, please <a routerLink="/contact-us">contact us</a> for assistance.</p>
+                </div>
+              </div>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
+                <span class="uk-text-primary">Step 2a</span>
+                <p class="uk-text-large uk-margin-xsmall-top">Validate and approve the results.</p>
+                <p>You examine your dashboard and the showcased information to ensure you are satisfied with what you see.</p>
+              </div>
+            </ng-container>
+            <ng-container we>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-position-relative uk-overflow-hidden uk-margin-top uk-margin-large-bottom">
+                <div class="uk-card-body">
+                  <span class="uk-text-primary">Step 1b</span>
+                  <p class="uk-text-large uk-margin-xsmall-top">Invite you as a Manager via email</p>
+                  <p>As a manager, you will receive access to the PROVIDE dashboard. OpenAIRE PROVIDE is a service designed for Institutional Repository Managers to register, validate, and enrich their records. It also offers insights into usage statistics, including views and downloads. This dashboard allows you to efficiently manage your records and comply with Open Access requirements.</p>
+                </div>
+              </div>
+              <div class="uk-card uk-blur-background uk-box-shadow-large uk-card-body uk-position-relative uk-margin-large-bottom">
+                <span class="uk-text-primary">Step 2b</span>
+                <p class="uk-text-large uk-margin-xsmall-top">Interact with you through 1-on-1 expert consultations</p>
+                <p>to understand any gaps and deviations within the dashboard to verify the data integrity</p>
+              </div>
+            </ng-container>
+          </you-we>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>

src/app/resources/how-it-works/the-five-monitors.component.less

@@ -0,0 +1,46 @@
+@import (reference) "~src/assets/extend-theme/less/_import-variables";
+
+.hero {
+  background-image: url("~/src/assets/irish-assets/home/logo-shadow.png");
+  background-position: center -100%;
+  background-repeat: no-repeat;
+}
+
+@media (max-width: @breakpoint-small-max) {
+  .hero {
+    background-position: center bottom;
+  }
+}
+
+.custom-translate-bottom-left {
+  transform: translate(-20%, 20%);
+}
+
+.five-boxes {
+  transform: translateY(-50%);
+}
+
+.country {
+  background-color: @country-color;
+  color: @global-inverse-color;
+}
+
+.funder {
+  background: @funder-color;
+  color: @global-inverse-color;
+}
+
+.organization {
+  background-color: @organization-color;
+  color: @global-inverse-color;
+}
+
+.researcher {
+  background-color: @researcher-color;
+  color: @global-inverse-color;
+}
+
+.datasource {
+  background-color: @datasource-color;
+  color: @global-inverse-color;
+}

src/app/resources/how-it-works/the-five-monitors.component.ts

@@ -0,0 +1,54 @@
+import {ChangeDetectorRef, Component} from "@angular/core";
+import {ActivatedRoute, Router} from "@angular/router";
+import {PiwikService} from "src/app/openaireLibrary/utils/piwik/piwik.service";
+import {Meta, Title} from "@angular/platform-browser";
+import {SEOService} from "src/app/openaireLibrary/sharedComponents/SEO/SEO.service";
+import {StakeholderBaseComponent} from "../../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
+import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
+import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
+
+@Component({
+  selector: 'the-five-monitors',
+  templateUrl: 'the-five-monitors.component.html',
+  styleUrls: ['the-five-monitors.component.less']
+})
+export class TheFiveMonitorsComponent extends StakeholderBaseComponent{
+  title = 'The 5 Monitors';
+  description = 'The 5 Monitors';
+  breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'resources - the 5 monitors'}];
+  public sections: string[] = ['RPOs', 'RFOs', 'Researchers', 'Repositories'];
+  public offset: number;
+  public shouldSticky: boolean = true;
+
+  isMobile: boolean = false;
+
+  constructor(protected _route: ActivatedRoute,
+              protected _piwikService: PiwikService,
+              protected _meta: Meta,
+              protected seoService: SEOService,
+              protected _title: Title,
+              protected _router: Router,
+              private cdr: ChangeDetectorRef,
+              private layoutService: LayoutService) {
+    super();
+  }
+
+  ngOnInit() {
+    this.setMetadata();
+    this.layoutService.isMobile.subscribe(isMobile => {
+			this.isMobile = isMobile;
+			this.cdr.detectChanges();
+		});
+    this.subscriptions.push(this.layoutService.isBottomIntersecting.subscribe(isBottomIntersecting => {
+      this.shouldSticky = !isBottomIntersecting;
+      this.cdr.detectChanges();
+    }));
+  }
+
+  ngAfterViewInit() {
+    if (typeof document !== 'undefined') {
+      this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
+      this.cdr.detectChanges();
+    }
+  }
+}

src/app/resources/how-it-works/user-actions.component.html

@@ -0,0 +1,96 @@
+<div *ngIf="!isMobile" class="uk-visible@m">
+    <div class="uk-banner dark uk-padding-remove-vertical uk-light">
+        <div class="uk-container uk-container-large uk-section uk-section-small">
+            <div>
+                <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
+            </div>
+            <div class="uk-margin-medium-top uk-margin-medium-bottom" uk-scrollspy-class>
+                <h1 class="uk-h2" uk-scrollspy-class>User Actions</h1>
+                <div class="uk-text-large uk-width-1-2@l uk-width-2-3" uk-scrollspy-class>
+                    Once you are logged in (researchers should use their ORCID ID), you will be all set to access the
+                    following
+                </div>
+            </div>
+        </div>
+    </div>
+    <div *ngIf="divContents" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
+        <div class="uk-section uk-container uk-container-large" uk-scrollspy-class>
+            <div id="parentContainer" class="uk-grid uk-grid-large" uk-grid>
+                <div class="uk-width-medium uk-margin-top">
+                    <div class="uk-sticky" uk-sticky="end: !#parentContainer; offset: 100;">
+                        <slider-tabs type="scrollable" position="left" [scrollThreshold]="0.5">
+                            <slider-tab tabId="add-to-orcid" tabTitle="Add to ORCID"></slider-tab>
+                            <slider-tab tabId="linking" tabTitle="Linking"></slider-tab>
+                            <slider-tab tabId="upload-dois" tabTitle="Upload DOIs"></slider-tab>
+                            <slider-tab tabId="oai-pmh" tabTitle="OAI-PMH"></slider-tab>
+                            <slider-tab tabId="dashboard-managers" tabTitle="Dashboard Managers"></slider-tab>
+                        </slider-tabs>
+                    </div>
+                </div>
+                <div class="uk-width-expand uk-margin-top">
+                    <div id="add-to-orcid" class="uk-width-xlarge uk-margin-large-bottom">
+                        <helper [texts]="divContents['add-to-orcid']"></helper>
+                    </div>
+                    <div id="linking" class="uk-width-xlarge uk-margin-large-bottom">
+                        <helper [texts]="divContents['linking']"></helper>
+                    </div>
+                    <div id="upload-dois" class="uk-width-xlarge uk-margin-large-bottom">
+                        <helper [texts]="divContents['upload-dois']"></helper>
+                    </div>
+                    <div id="oai-pmh" class="uk-width-xlarge uk-margin-large-bottom">
+                        <helper [texts]="divContents['oai-pmh']"></helper>
+                    </div>
+                    <div id="dashboard-managers" class="uk-width-xlarge uk-margin-large-bottom">
+                        <helper [texts]="divContents['dashboard-managers']"></helper>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<div *ngIf="isMobile || isServer" class="uk-hidden@m">
+    <div class="uk-banner dark uk-padding-remove-vertical uk-light">
+        <div class="uk-container uk-container-large uk-section uk-section-small">
+            <div>
+                <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
+            </div>
+            <div class="uk-text-center" uk-scrollspy-class>
+                <h1 class="uk-heading-small uk-margin-medium-top uk-margin-bottom">User Actions</h1>
+                <div uk-scrollspy-class>
+                    Once you are logged in (researchers should use their ORCID ID), you will be all set to access the
+                    following
+                </div>
+            </div>
+        </div>
+    </div>
+    <div *ngIf="divContents" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
+        <div>
+            <div class="uk-sticky uk-background-default uk-padding-small uk-padding-remove-right" uk-sticky>
+                <slider-tabs type="scrollable" position="horizontal">
+                    <slider-tab tabId="add-to-orcid" tabTitle="Add to ORCID"></slider-tab>
+                    <slider-tab tabId="linking" tabTitle="Linking"></slider-tab>
+                    <slider-tab tabId="upload-dois" tabTitle="Upload DOIs"></slider-tab>
+                    <slider-tab tabId="oai-pmh" tabTitle="OAI-PMH"></slider-tab>
+                    <slider-tab tabId="dashboard-managers" tabTitle="Dashboard Managers"></slider-tab>
+                </slider-tabs>
+            </div>
+        </div>
+        <div class="uk-container uk-container-large uk-section uk-section-small uk-text-break">
+            <div id="add-to-orcid" class="uk-margin-xlarge-bottom">
+                <helper [texts]="divContents['add-to-orcid']"></helper>
+            </div>
+            <div id="linking" class="uk-margin-xlarge-bottom">
+                <helper [texts]="divContents['linking']"></helper>
+            </div>
+            <div id="upload-dois" class="uk-margin-xlarge-bottom">
+                <helper [texts]="divContents['upload-dois']"></helper>
+            </div>
+            <div id="oai-pmh" class="uk-width-xlarge uk-margin-large-bottom">
+                <helper [texts]="divContents['oai-pmh']"></helper>
+            </div>
+            <div id="dashboard-managers" class="uk-margin-xlarge-bottom">
+                <helper [texts]="divContents['dashboard-managers']"></helper>
+            </div>
+        </div>
+    </div>
+</div>

src/app/resources/how-it-works/user-actions.component.less

@@ -0,0 +1,3 @@
+.uk-width-medium {
+  width: 350px;
+}

src/app/resources/how-it-works/user-actions.component.ts

@@ -0,0 +1,62 @@
+import {ChangeDetectorRef, Component, Inject, PLATFORM_ID} from "@angular/core";
+import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
+import {ActivatedRoute, Router} from "@angular/router";
+import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
+import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {Meta, Title} from "@angular/platform-browser";
+import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
+import {isPlatformServer} from "@angular/common";
+import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
+import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
+
+@Component({
+  selector: 'user-actions',
+  templateUrl: 'user-actions.component.html',
+  styleUrls: ['user-actions.component.less']
+})
+export class UserActionsComponent extends BaseComponent{
+  title = 'User Actions';
+  description = 'User Actions';
+  breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'resources - user actions'}];
+  activeSection: string;
+  divContents: any;
+
+  isMobile: boolean = false;
+  isServer: boolean;
+
+  constructor(protected _route: ActivatedRoute,
+              protected _piwikService: PiwikService,
+              protected _meta: Meta,
+              protected seoService: SEOService,
+              protected _title: Title,
+              protected _router: Router,
+              private cdr: ChangeDetectorRef,
+              private layoutService: LayoutService,
+              private helper: HelperService,
+              @Inject(PLATFORM_ID) private platform: any) {
+    super();
+    this.isServer = isPlatformServer(this.platform);
+  }
+
+  ngOnInit() {
+    this.setMetadata();
+    this.subscriptions.push(this._route.fragment.subscribe(fragment => {
+      if(fragment) {
+        this.activeSection = fragment;
+      } else {
+        this.activeSection = 'add-to-orcid';
+      }
+    }));
+    this.layoutService.isMobile.subscribe(isMobile => {
+			this.isMobile = isMobile;
+			this.cdr.detectChanges();
+		});
+    this.getDivContents();
+  }
+
+  private getDivContents() {
+    this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'irish', '/how-it-works/user-actions').subscribe(contents => {
+      this.divContents = contents;
+    }));
+  }
+}

src/app/resources/how-it-works/you-we.component.ts

@@ -0,0 +1,121 @@
+import {
+  AfterContentChecked,
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  Input,
+  OnDestroy,
+  ViewChild
+} from "@angular/core";
+
+declare var UIkit;
+
+@Component({
+  selector: 'you-we',
+  template: `
+    <div>
+      <div class="uk-container">
+        <h3 class="uk-h4 uk-text-center uk-margin-large-top uk-margin-large-bottom">Are you a <span
+            [ngClass]="titleClass">{{type}}?</span></h3>
+      </div>
+      <div [id]="'sticky-' + id" #sticky class="uk-sticky uk-visible@l" [ngClass]="isSticky?backgroundClass:null"
+           uk-sticky="animation: uk-animation-slide-bottom" [attr.end]="'#' + id"
+           [attr.start]="'100vh -' + height + 'px'" [attr.offset]="offset">
+        <div class="uk-container">
+          <div class="uk-grid uk-grid-large uk-child-width-1-2@l" [class.uk-grid-divider]="!isSticky">
+            <div class="uk-text-center uk-first-column">
+              <h4 class="uk-h5 uk-margin-remove uk-margin-small-top uk-margin-small-bottom">You</h4>
+            </div>
+            <div class="uk-text-center">
+              <h4 class="uk-h5 uk-margin-remove uk-margin-small-top uk-margin-small-bottom">We</h4>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div [id]="id" class="uk-container">
+        <div class="uk-padding uk-padding-remove-vertical">
+          <div class="uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@l" uk-grid
+               uk-height-match="target: .uk-card">
+            <div class="uk-flex uk-flex-column uk-flex-middle uk-child-width-1-1">
+              <div class="uk-margin-top uk-margin-large-bottom">
+                <span class="uk-h3 uk-text-center uk-margin-bottom uk-hidden@l">You</span>
+                <ng-content select="[you]"></ng-content>
+              </div>
+            </div>
+            <div class="uk-flex uk-flex-column uk-flex-middle uk-child-width-1-1">
+              <div class="uk-margin-top uk-margin-large-bottom">
+                <span class="uk-h3 uk-text-center uk-margin-bottom uk-hidden@l">We</span>
+                <ng-content select="[we]"></ng-content>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class YouWeComponent implements AfterViewInit, AfterContentChecked, OnDestroy {
+  @Input()
+  public type: string;
+  @Input()
+  public id;
+  @Input()
+  titleClass: string = "uk-text-primary";
+  @Input()
+  backgroundClass: string = "uk-background-default uk-blur-background";
+  @ViewChild('sticky') sticky: ElementRef;
+  public isSticky: boolean = false;
+  public offset: number
+  public height: number;
+  private subscriptions: any[] = [];
+
+  constructor(private cdr: ChangeDetectorRef) {
+  }
+  
+  ngAfterViewInit() {
+    if (this.sticky) {
+      this.observeSticky();
+    }
+  }
+  
+  ngAfterContentChecked() {
+    if (this.sticky && typeof document !== 'undefined') {
+      this.offset = this.calcOffset(this.sticky.nativeElement);
+    }
+  }
+  
+  ngOnDestroy() {
+    this.subscriptions.forEach(subscription => {
+      if (typeof ResizeObserver != 'undefined' && subscription instanceof ResizeObserver) {
+        subscription.disconnect();
+      }
+    });
+  }
+  
+  public observeSticky() {
+    if(typeof ResizeObserver != 'undefined') {
+      let resizeObs = new ResizeObserver(entries => {
+        entries.forEach(entry => {
+          setTimeout(() => {
+            this.offset = this.calcOffset(entry.target);
+            this.cdr.detectChanges();
+          });
+        })
+      });
+      this.subscriptions.push(resizeObs);
+      resizeObs.observe(this.sticky.nativeElement);
+      this.subscriptions.push(UIkit.util.on('#sticky-' + this.id, 'active', (): void => {
+        this.isSticky = true;
+      }));
+      this.subscriptions.push(UIkit.util.on('#sticky-' + this.id, 'inactive', () => {
+        this.isSticky = false;
+      }));
+    }
+  }
+  
+  calcOffset(element) {
+    this.height = element.offsetHeight;
+    return window.innerHeight - this.height;
+  }
+}

src/app/resources/methodology/methodological-approach.component.html

@@ -0,0 +1,145 @@
+<div class="hero">
+  <div class="uk-container uk-container-large uk-section uk-section-small" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
+    <div>
+      <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
+    </div>
+    <div id="how" class="uk-margin-medium-top uk-margin-medium-bottom">
+      <h1 class="uk-h2" uk-scrollspy-class>
+        Methodological <br>Approach<span class="uk-text-primary">.</span>
+      </h1>
+      <div class="uk-width-large uk-text-large">
+        The National Open Access Monitor for Ireland employs a robust methodology, underpinned by a commitment
+        to best practices in Open Science. This approach ensures comprehensive, accurate, and user-centric
+        insights into Ireland's Open Access landscape.
+      </div>
+    </div>
+  </div>
+</div>
+<div class="uk-section uk-background-secondary blur-bg-img">
+  <div class="uk-container uk-container-large uk-light">
+    <h2 class="uk-h3 uk-text-center " uk-scrollspy-class>
+      Principles
+    </h2>
+    <div class="uk-margin-large-top uk-grid uk-child-width-1-2@m uk-child-width-1-1@s uk-grid-match" uk-grid>
+      <div class="uk-margin-small-bottom">
+        <div class="uk-card uk-card-body uk-blur-background uk-box-shadow-large" uk-scrollspy-class>
+          <div class="uk-text-bold uk-margin-small-bottom">Openness & Transparency</div>
+          <div>
+            We prioritize transparent methodological assumptions and the use of openly available,
+            public data.
+            Adherence to the FAIR principles and international standards ensures our findings are
+            trustworthy, replicable, and accessible for public engagement.
+          </div>
+        </div>
+      </div>
+      <div class="uk-margin-small-bottom">
+        <div class="uk-card uk-card-body uk-blur-background uk-box-shadow-large" uk-scrollspy-class>
+          <div class="uk-text-bold uk-margin-small-bottom">Comprehensive Coverage & Accuracy</div>
+          <div>
+            Leveraging the extensive data capabilities of the OpenAIRE Graph and working closely with
+            stakeholders for data representation and quality we aim to provide the most comprehensive
+            coverage possible, incorporating data from multiple sources for accurate and meaningful
+            indicators.
+          </div>
+        </div>
+      </div>
+      <div class="uk-margin-small-bottom">
+        <div class="uk-card uk-card-body uk-blur-background uk-box-shadow-large" uk-scrollspy-class>
+          <div class="uk-text-bold uk-margin-small-bottom">Readiness & Timeliness:</div>
+          <div>
+            Built around well-established open databases and already tested knowledge extraction
+            technologies - natural language processing (NLP) / machine-learning (ML) - using
+            operational workflows in OpenAIRE to warrant timely results.
+          </div>
+        </div>
+      </div>
+      <div class="uk-margin-small-bottom">
+        <div class="uk-card uk-card-body uk-blur-background uk-box-shadow-large" uk-scrollspy-class>
+          <div class="uk-text-bold uk-margin-small-bottom">Engagement & Inclusivity</div>
+          <div>
+            Our methodology focuses on meeting the needs of our diverse users, from researchers to
+            policymakers. We emphasize ease of use, clear communication, and responsiveness to
+            feedback. The platform is designed to be intuitive and responsive, ensuring an effective
+            and engaging experience for all stakeholders.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="uk-section uk-margin-medium-top uk-position-relative" [ngClass]="isMobile ? 'uk-padding-remove-bottom' : ''">
+  <div class="uk-container uk-container-large">
+    <div class="uk-grid uk-child-width-1-2@m" uk-grid>
+      <div>
+        <div style="max-width: 575px;">
+          <span class="uk-text-large text-graph">
+            Data backbone: The OpenAIRE Graph
+          </span>
+          <h2 class="uk-h2 uk-margin-small-top">
+            How? It’s about open data and collaboration<span class="text-graph">.</span>
+          </h2>
+          <div>
+            The National Open Access Monitor for Ireland is built upon the OpenAIRE Graph, a
+            comprehensive database of research metadata records. This extensive collection includes
+            records from 129K data sources, featuring around 3 million projects, 170 million
+            publications, 60 million datasets, 400K pieces of research software, and approximately 8
+            million other research outputs as of December 2023. Regular updates, conducted nearly
+            monthly, ensure the graph is consistently reflective of the latest scholarly
+            contributions.
+          </div>
+        </div>
+      </div>
+      <div>
+        <img class="uk-margin-medium-left uk-position-center-right uk-visible@m"
+          src="assets/common-assets/common/graph-nodes-1.svg" alt="OpenAIRE Graph" loading="lazy">
+      </div>
+    </div>
+  </div>
+</div>
+<div class="uk-position-relative" [ngClass]="isMobile ? '' : 'uk-section uk-section-small'">
+  <img class="uk-position-center-left uk-visible@m"
+    src="assets/common-assets/common/graph-nodes-2.svg" alt="OpenAIRE Graph" loading="lazy">
+  <div class="uk-container uk-container-large uk-width-1-1 uk-width-1-2@m">
+    At the core of the OpenAIRE Graph is a commitment to data quality. The pipeline processes metadata
+    from a multitude of sources, including detailed project information from funding bodies. Advanced
+    inference algorithms enhance the metadata and full texts of Open Access publications, establishing
+    crucial links between research results, projects, author affiliations, and classifications like Fields
+    of Science (FoS) and Sustainable Development Goals (SDGs). To maintain an open, trusted, and publicly
+    accessible resource, we apply sophisticated techniques for identifying and merging duplicate records,
+    supplemented by OpenAIRE's suite of curation tools, including the Metadata Validator for completeness
+    checks and OpenORGS for organization disambiguation.
+  </div>
+</div>
+<div class="uk-container uk-container-large uk-margin-large-top">
+  <img class="uk-width-1-1" src="assets/irish-assets/openaire-pipeline.png" alt="OpenAIRE pipeline" loading="lazy">
+  <div class="uk-text-meta uk-text-small uk-text-right uk-margin-top">
+    Figure 1: Seemless Integration with to OpenAIRE & EOSC
+  </div>
+</div>
+<div class="uk-container uk-width-xlarge uk-margin-large-top">
+  The OpenAIRE technology center is responsible with the upkeep of this robust infrastructure,
+  conducting regular hardware maintenance and implementing high-availability solutions, load balancing,
+  backups, and precise restore procedures to ensure uninterrupted system performance.
+</div>
+<div class="uk-container uk-width-xlarge uk-margin-top">
+  Explore the Graph in detail at the OpenAIRE Graph <a href="https://graph.openaire.eu" target="_blank">website</a>
+  and its <a href="https://graph.openaire.eu/docs/" target="_blank">documentation</a>.
+</div>
+<div class="uk-flex uk-child-width-1-1 uk-child-width-1-2@m uk-margin-large-top">
+  <div class="uk-section">
+    <div class="uk-width-1-1 uk-width-1-2@m uk-margin-auto" [ngClass]="isMobile ? 'uk-container' : ''">
+      <div class="uk-text-large uk-text-primary">Contact us</div>
+      <h2 class="uk-h3 uk-margin-remove">Your Feedback Matters</h2>
+      <div class="uk-margin-top">
+        If you notice any issues or have improvement
+        suggestions, please contact us. Your feedback is crucial for the continuous enhancement of our
+        platform and helps us maintain the highest accuracy and effectiveness.
+      </div>
+      <a class="uk-button uk-button-primary uk-margin-medium-top" routerLink="/contact-us">contact us</a>
+    </div>
+  </div>
+  <div class="uk-visible@m uk-banner uk-overflow-hidden uk-position-relative">
+    <img class="uk-position-bottom-right" style="margin: -10px;"
+      src="assets/irish-assets/resources/dashboard-half-height.png" alt="National Monitor Dashboard" loading="lazy">
+  </div>
+</div>

src/app/resources/methodology/methodological-approach.component.less

@@ -0,0 +1,14 @@
+@import (reference) "~src/assets/extend-theme/less/_import-variables";
+
+.hero {
+  background-image: url("~/src/assets/irish-assets/resources/hero.svg");
+  background-size: 25%;
+  background-repeat: no-repeat;
+  background-position: 105% 125%;
+}
+.blur-bg-img {
+  background-image: url("~/src/assets/irish-assets/resources/irish-bg-blur.png");
+  background-size: 50%;
+  background-repeat: no-repeat;
+  background-position: -15% 100%;
+}

src/app/resources/methodology/methodological-approach.component.ts

@@ -0,0 +1,40 @@
+import {ChangeDetectorRef, Component, OnInit} from "@angular/core";
+import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
+import {ActivatedRoute, Router} from "@angular/router";
+import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
+import {Meta, Title} from "@angular/platform-browser";
+import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
+import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
+
+@Component({
+  selector: 'methodological-approach',
+  templateUrl: 'methodological-approach.component.html',
+  styleUrls: ['methodological-approach.component.less']
+})
+export class MethodologicalApproachComponent  extends BaseComponent implements OnInit {
+  title = 'Methodological Approach';
+  description = 'Methodological Approach';
+  breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'resources - methodological approach'}];
+
+  isMobile: boolean = false;
+
+  constructor(protected _route: ActivatedRoute,
+              protected _piwikService: PiwikService,
+              protected _meta: Meta,
+              protected seoService: SEOService,
+              protected _title: Title,
+              protected _router: Router,
+              private cdr: ChangeDetectorRef,
+              private layoutService: LayoutService) {
+    super();
+  }
+
+  ngOnInit() {
+    this.setMetadata();
+    this.layoutService.isMobile.subscribe(isMobile => {
+			this.isMobile = isMobile;
+			this.cdr.detectChanges();
+		});
+  }
+}

src/app/resources/methodology/methodology.module.ts

@@ -0,0 +1,33 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {RouterModule} from "@angular/router";
+import {MethodologicalApproachComponent} from "./methodological-approach.component";
+import {TerminologyComponent} from "./terminology.component";
+import {SliderTabsModule} from "../../openaireLibrary/sharedComponents/tabs/slider-tabs.module";
+import {HelperModule} from "../../openaireLibrary/utils/helper/helper.module";
+import {BreadcrumbsModule} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
+
+@NgModule({
+  declarations: [MethodologicalApproachComponent, TerminologyComponent],
+  imports: [CommonModule, RouterModule.forChild([
+    {
+      path: '',
+      redirectTo: 'methodological-approach',
+      pathMatch: 'full',
+      canDeactivate: []
+    },
+    {
+      path: 'methodological-approach',
+      component: MethodologicalApproachComponent,
+      canDeactivate: []
+    },
+    {
+      path: 'terminology',
+      component: TerminologyComponent,
+      canDeactivate: []
+    },
+  ]), SliderTabsModule, HelperModule, BreadcrumbsModule],
+  exports: []
+})
+export class MethodologyModule {
+}

src/app/resources/methodology/terminology.component.html

@@ -0,0 +1,73 @@
+<div *ngIf="!isMobile" class="uk-visible@m">
+  <div class="uk-banner dark uk-padding-remove-vertical uk-light">
+    <div class="uk-container uk-container-large uk-section uk-section-small">
+      <div>
+        <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
+      </div>
+      <div class="uk-text-center uk-margin-medium-top" uk-scrollspy-class>
+        <h1 class="uk-h2 uk-margin-medium-top uk-margin-medium-bottom">Terminology & Construction.</h1>
+      </div>
+    </div>
+  </div>
+  <div *ngIf="divContents" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
+    <div class="uk-section uk-container uk-container-large" uk-scrollspy-class>
+      <div id="parentContainer" class="uk-grid uk-grid-large" uk-grid>
+        <div class="uk-width-medium uk-margin-top">
+          <div class="uk-sticky" uk-sticky="end: !#parentContainer; offset: 100;">
+            <slider-tabs type="scrollable" position="left">
+              <slider-tab tabId="entities" tabTitle="1. Entities"></slider-tab>
+              <slider-tab tabId="inherited-and-inferred-attributes" tabTitle="2. Inherited and Inferred Attributes"></slider-tab>
+              <slider-tab tabId="constructed-attributes" tabTitle="3. Constructed Attributes"></slider-tab>
+            </slider-tabs>
+          </div>
+        </div>
+        <div class="uk-width-expand uk-margin-top">
+          <div id="entities" class="uk-margin-large-bottom">
+            <helper [texts]="divContents['entities']"></helper>
+          </div>
+          <div id="inherited-and-inferred-attributes" class="uk-margin-large-bottom">
+            <helper [texts]="divContents['inherited-and-inferred-attributes']"></helper>
+          </div>
+          <div id="constructed-attributes" class="uk-margin-large-bottom">
+            <helper [texts]="divContents['constructed-attributes']"></helper>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<div *ngIf="isMobile || isServer" class="uk-hidden@m">
+  <div class="uk-banner dark uk-padding-remove-vertical uk-light">
+    <div class="uk-container uk-container-large uk-section uk-section-small">
+      <div>
+        <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
+      </div>
+      <div class="uk-text-center" uk-scrollspy-class>
+        <h1 class="uk-heading-small uk-margin-medium-top uk-margin-medium-bottom">Terminology & Construction.</h1>
+      </div>
+    </div>
+  </div>
+  <div *ngIf="divContents" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
+    <div>
+      <div class="uk-sticky uk-background-default uk-padding-small uk-padding-remove-right" uk-sticky>
+        <slider-tabs type="scrollable" position="horizontal">
+          <slider-tab tabId="entities_m" tabTitle="1. Entities"></slider-tab>
+          <slider-tab tabId="inherited-and-inferred-attributes_m"
+                      tabTitle="2. Inherited and Inferred Attributes"></slider-tab>
+          <slider-tab tabId="constructed-attributes_m" tabTitle="3. Constructed Attributes"></slider-tab>
+        </slider-tabs>
+      </div>
+    </div>
+    <div class="uk-container uk-container-large uk-section uk-section-small uk-text-break">
+      <div id="entities_m" class="uk-margin-xlarge-bottom">
+        <helper [texts]="divContents['entities']"></helper>
+      </div>
+      <div id="inherited-and-inferred-attributes_m" class="uk-margin-xlarge-bottom">
+        <helper [texts]="divContents['inherited-and-inferred-attributes']"></helper>
+      </div>
+      <div id="constructed-attributes_m" class="uk-margin-xlarge-bottom">
+        <helper [texts]="divContents['constructed-attributes']"></helper>
+      </div>
+    </div>
+  </div>
+</div>

src/app/resources/methodology/terminology.component.less

@@ -0,0 +1,3 @@
+.uk-width-medium {
+  width: 350px;
+}

src/app/resources/methodology/terminology.component.ts

@@ -0,0 +1,64 @@
+import {ChangeDetectorRef, Component, Inject, PLATFORM_ID} from "@angular/core";
+import {Meta, Title} from "@angular/platform-browser";
+import {ActivatedRoute, Router} from "@angular/router";
+import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
+import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
+import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
+import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
+import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
+import {isPlatformServer} from "@angular/common";
+
+@Component({
+  selector: 'terminology',
+  templateUrl: 'terminology.component.html',
+  styleUrls: ['terminology.component.less']
+})
+export class TerminologyComponent extends BaseComponent{
+  title = 'Terminology & Construction';
+  description = 'Terminology & Construction';
+  breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'resources - terminology & construction'}];
+  tab: 'entities' | 'attributes' = 'entities';
+  contentSections: string[] = ['entities', 'inherited-and-inferred-attributes', 'constructed-attributes'];
+  activeSection: string;
+  divContents: any;
+
+  isMobile: boolean = false;
+	isServer: boolean;
+
+  constructor(protected _route: ActivatedRoute,
+              protected _piwikService: PiwikService,
+              protected _meta: Meta,
+              protected seoService: SEOService,
+              protected _title: Title,
+              protected _router: Router,
+              private cdr: ChangeDetectorRef,
+              private layoutService: LayoutService,
+              private helper: HelperService,
+              @Inject(PLATFORM_ID) private platform: any) {
+    super();
+    this.isServer = isPlatformServer(this.platform);
+  }
+
+  ngOnInit() {
+    this.setMetadata();
+    this.subscriptions.push(this._route.fragment.subscribe(fragment => {
+      if(fragment) {
+        this.activeSection = fragment;
+      } else {
+        this.activeSection = 'entities';
+      }
+    }));
+    this.layoutService.isMobile.subscribe(isMobile => {
+			this.isMobile = isMobile;
+			this.cdr.detectChanges();
+		});
+    this.getDivContents();
+  }
+
+  private getDivContents() {
+    this.subscriptions.push(this.helper.getDivHelpContents(this.properties, 'irish', '/methodology/terminology').subscribe(contents => {
+      this.divContents = contents;
+    }));
+  }
+}

src/app/resources/support/support.component.html

@@ -0,0 +1,40 @@
+<div class="uk-visible@m">
+	<div class="uk-banner dark uk-padding-remove-vertical uk-light hero">
+		<div class="uk-container uk-container-large uk-section uk-section-small">
+      <div>
+        <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
+      </div>
+			<div class="uk-flex uk-flex-middle" uk-scrollspy-class>
+				<div class="uk-width-1-2 uk-margin-medium-bottom">
+					<h1 class="uk-h2">How can we help you?</h1>
+					<div class="uk-text-lead uk-margin-medium-bottom">Monitor expert support team is ready and excited to help.</div>
+					<a routerLink="/contact-us" class="uk-button uk-button-primary">Contact Us</a>
+				</div>
+				<div class="uk-position-relative uk-width-1-2 uk-visible@l contact-us">
+					<img class="uk-box-shadow-large two" src="assets/irish-assets/curators/1.jpg">
+					<img class="uk-box-shadow-large three" src="assets/irish-assets/curators/3.jpg">
+					<img class="uk-box-shadow-large four" src="assets/irish-assets/curators/4.jpg">
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="uk-margin-large-top">
+		<h3 class="uk-text-center">Frequently Asked Questions</h3>
+	</div>
+	<helper *ngIf="pageContents" [texts]="pageContents.top"></helper>
+</div>
+<div class="uk-hidden@m">
+	<div class="uk-banner dark uk-padding-remove-vertical uk-light">
+		<div class="uk-container uk-container-large uk-section uk-section-small">
+			<div class="uk-text-center" uk-scrollspy-class>
+				<h1 class="uk-margin-top">How can we help you?</h1>
+				<div class="uk-margin-medium-bottom">Monitor expert support team is ready and excited to help.</div>
+				<a routerLink="/contact-us" class="uk-button uk-button-small uk-button-primary">Contact Us</a>
+			</div>
+		</div>
+	</div>
+	<div class="uk-margin-medium-top">
+		<h3 class="uk-text-center">Frequently Asked Questions</h3>
+	</div>
+	<helper *ngIf="pageContents" [texts]="pageContents.top"></helper>
+</div>

src/app/resources/support/support.component.less

@@ -0,0 +1,49 @@
+@import (reference) "~../../../assets/openaire-theme/less/_import-variables";
+
+@faqs-curator-image-size: 120px;
+@faqs-contact-us-height: 400px;
+
+.hero {
+  background-image: url("~/src/assets/irish-assets/resources/irish-bg-blur.png");
+  background-position: right;
+  background-repeat: no-repeat;
+}
+.contact-us {
+  height: @faqs-contact-us-height;
+
+  img {
+    position: absolute;
+    width: @faqs-curator-image-size;
+    height: @faqs-curator-image-size;
+    object-fit: cover;
+    border-radius: 18px;
+
+
+    &.one {
+      top: @global-medium-gutter;
+      right: @global-medium-gutter + (@faqs-curator-image-size/2);
+      transform: rotate(10deg);
+    }
+
+    &.two {
+      bottom: @global-medium-gutter;
+      right: @global-medium-gutter + (@faqs-curator-image-size/0.7);
+      transform: rotate(15deg);
+      object-position: top;
+    }
+
+    &.three {
+      top: 0;
+      left: @global-medium-gutter + (@faqs-curator-image-size*1.5);
+      // transform: rotate(-10deg);
+      object-position: -60px;
+    }
+
+    &.four {
+      bottom: 2*@global-medium-gutter;
+      left: 2*@global-medium-gutter;
+      transform: rotate(-10deg);
+      object-position: 0;
+    }
+  }
+}

src/app/resources/support/support.component.ts

@@ -0,0 +1,42 @@
+import {Component} from "@angular/core";
+import {Meta, Title} from "@angular/platform-browser";
+import {ActivatedRoute, Router} from "@angular/router";
+import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
+import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
+import {HelperService} from "../../openaireLibrary/utils/helper/helper.service";
+import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
+
+@Component({
+  selector: 'support',
+  templateUrl: 'support.component.html',
+  styleUrls: ['support.component.less']
+})
+export class SupportComponent extends BaseComponent {
+  title = 'Support';
+  description = 'Support';
+  breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'resources - support'}];
+  pageContents = null;
+
+  constructor(protected _route: ActivatedRoute,
+              protected _piwikService: PiwikService,
+              protected _meta: Meta,
+              protected seoService: SEOService,
+              protected _title: Title,
+              protected _router: Router,
+              private helper: HelperService) {
+    super();
+  }
+
+  ngOnInit() {
+    this.setMetadata();
+    this.getPageContents();
+  }
+
+  private getPageContents() {
+    this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'irish', this._router.url, 'country').subscribe(contents => {
+      this.pageContents = contents;
+      console.log(this.pageContents);
+    }));
+  }
+}

src/app/resources/support/support.module.ts

@@ -0,0 +1,18 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {SupportComponent} from "./support.component";
+import {RouterModule} from "@angular/router";
+import {HelperModule} from "../../openaireLibrary/utils/helper/helper.module";
+import {BreadcrumbsModule} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
+
+@NgModule({
+  declarations: [SupportComponent],
+  imports: [CommonModule, RouterModule.forChild([
+    {
+      path: '', component: SupportComponent
+    }
+  ]), HelperModule, BreadcrumbsModule],
+  exports: [SupportComponent]
+})
+export class SupportModule {
+}

src/app/rfo/rfo.component.ts

@@ -11,6 +11,11 @@ import {CustomFilterService} from "../openaireLibrary/shared/customFilter.servic
 import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
 import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
 import {OpenaireEntities} from "../openaireLibrary/utils/properties/searchFields";
+import {ConfigurationService} from "../openaireLibrary/utils/configuration/configuration.service";
+import {Irish} from "../shared/irish";
+import {UserManagementService} from "../openaireLibrary/services/user-management.service";
+import {Session} from "../openaireLibrary/login/utils/helper.class";
+import {properties as beta} from "../../environments/environment.beta";
 
 @Component({
   selector: 'rfo',
@@ -20,65 +25,84 @@ import {OpenaireEntities} from "../openaireLibrary/utils/properties/searchFields
           <div class="uk-banner uk-light">
               <div class="uk-container uk-container-large">
                   <div class="uk-padding-small uk-padding-remove-vertical">
-                    <div *ngIf="stakeholder" class="uk-grid uk-grid-large uk-flex-middle uk-margin-medium-bottom" uk-grid>
-                      <div class="uk-width-expand">
-                        <div class="uk-grid uk-grid-small uk-flex-middle" uk-grid>
-                          <div class="uk-card uk-card-default uk-padding-small">
-                            <img *ngIf="stakeholder.logoUrl; else elseBlock" [src]="stakeholder | logoUrl" [alt]="stakeholder.name + ' logo'" class="uk-height-max-xsmall" style="max-width: 180px;">
-                            <ng-template #elseBlock>
-                              <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall" style="max-width: 180px;">
-                            </ng-template>
+                      <div *ngIf="stakeholder" class="uk-grid uk-grid-large uk-flex-middle uk-margin-medium-bottom"
+                           uk-grid>
+                          <div class="uk-width-expand">
+                              <div class="uk-grid uk-grid-small uk-flex-middle" uk-grid>
+                                  <div class="uk-card uk-card-default uk-padding-small">
+                                      <img *ngIf="stakeholder.logoUrl; else elseBlock" [src]="stakeholder | logoUrl"
+                                           [alt]="stakeholder.name + ' logo'" class="uk-height-max-xsmall"
+                                           style="max-width: 180px;">
+                                      <ng-template #elseBlock>
+                                          <img src="assets/common-assets/placeholder.png"
+                                               alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall"
+                                               style="max-width: 180px;">
+                                      </ng-template>
+                                  </div>
+                                  <div class="uk-width-expand uk-margin-small-left">
+                                      <div class="uk-text-small uk-flex uk-flex-middle uk-margin-small-bottom">
+                                          <icon [name]="'navigate_before'" [flex]="true" [ratio]="0.8"
+                                                class="uk-margin-xsmall-right"></icon>
+                                          <a routerLink=".">Back to
+                                              all {{ entities.funder }} {{ entities.stakeholders }}</a>
+                                      </div>
+                                      <h1 class="uk-h4 uk-margin-remove uk-text-truncate">{{ stakeholder.name }}</h1>
+                                  </div>
+                              </div>
                           </div>
-                          <div class="uk-width-expand uk-margin-small-left">
-                            <div class="uk-text-small uk-flex uk-flex-middle uk-margin-small-bottom">
-                              <icon [name]="'navigate_before'" [flex]="true" [ratio]="0.8" class="uk-margin-xsmall-right"></icon>
-                              <a routerLink=".">Back to all {{entities.funder}} {{entities.stakeholders}}</a>
-                            </div>
-                            <h1 class="uk-h5 uk-margin-remove uk-text-truncate">{{stakeholder.name}}</h1>
+                          <div class="uk-width-auto">
+                              <oa-indicator [stakeholder]="stakeholder"></oa-indicator>
                           </div>
-                        </div>
                       </div>
-                      <div class="uk-width-auto">
-                        <div class="uk-progress-semicircle open-access" [attr.percentage]="0" [style]="'--percentage:' + 0"></div>
-                        <div class="uk-flex uk-flex-middle uk-margin-small-top">
-                          <icon [name]="'open_access'" [flex]="true" class="open-access"></icon>
-                          <span class="uk-margin-xsmall-left">Open Access</span>
-                        </div>
-                      </div>
-                    </div>
-                    <h1 *ngIf="!stakeholder" class="uk-h4 uk-margin-small-bottom">{{entities.funders}}</h1>
+                      <h1 *ngIf="!stakeholder" class="uk-h3 uk-margin-small-bottom">Research Funding Organisations
+                          ({{ entities.funders }})</h1>
                   </div>
               </div>
               <div *ngIf="stakeholder" class="uk-banner-footer">
-                  <div class="uk-container uk-container-large">
+                  <div class="uk-container uk-container-large uk-flex uk-flex-between">
                       <ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
                           <li [class.uk-active]="!isSearch">
                               <a [routerLink]="['./', stakeholder.alias]" [relativeTo]="_route"
-                                 (click)="isSearch = false">{{entities.stakeholder}}</a>
+                                 (click)="isSearch = false">{{ entities.stakeholder }}</a>
                           </li>
                           <li [class.uk-active]="isSearch">
-                              <a [routerLink]="['./', stakeholder.alias, 'search']" [queryParams]="routerHelper.createQueryParams(['type','peerreviewed'], [quote('publications'), quote('true')])" 
-                                 [relativeTo]="_route">Browse {{openaireEntities.RESULTS}}</a>
+                              <a [routerLink]="['./', stakeholder.alias, 'search']"
+                                 [queryParams]="routerHelper.createQueryParams(['type','peerreviewed'], [quote('publications'), quote('true')])"
+                                 [relativeTo]="_route">Browse {{ openaireEntities.RESULTS }}</a>
                           </li>
                       </ul>
+                      <div *ngIf="!isMobile" class="uk-margin-large-right uk-flex uk-flex-middle">
+                          <a *ngIf="isManager" [routerLink]="adminLink" target="_blank"
+                             class="uk-button uk-flex uk-flex-middle uk-margin-small-right">
+                              Manage
+                          </a>
+                          <a *ngIf="sandboxLink" [href]="sandboxLink" target="_blank"
+                             class="uk-button uk-flex uk-flex-middle uk-margin-small-right">
+                              Sandbox
+                          </a>
+                      </div>
                   </div>
               </div>
           </div>
-          <div *ngIf="!this.alias || this.stakeholder" class="uk-margin-medium-top uk-margin-medium-bottom">
+          <div *ngIf="!this.alias || this.stakeholder">
               <router-outlet></router-outlet>
           </div>
       </div>
-      <role-verification *ngIf="stakeholder" [id]="stakeholder.alias" [name]="stakeholder.name" [type]="stakeholder.type" [service]="'irish'"></role-verification>
+      <role-verification *ngIf="stakeholder" [id]="stakeholder.alias" [name]="stakeholder.name"
+                         [type]="stakeholder.type" [service]="'irish'"
+                         [relativeTo]="null" [dashboard]="'National Open Access Monitor, Ireland'"></role-verification>
   `
 })
 export class RfoComponent extends StakeholderBaseComponent implements OnInit {
   stakeholder: Stakeholder;
   alias: string;
   isSearch: boolean = false;
+  isMobile: boolean = false;
   loading: boolean = false;
   openaireEntities = OpenaireEntities;
 
   constructor(private stakeholderService: StakeholderService,
+              private userManagementService: UserManagementService,
               private layoutService: LayoutService,
               private _customFilterService: CustomFilterService,
               protected _router: Router,
@@ -86,10 +110,11 @@ export class RfoComponent extends StakeholderBaseComponent implements OnInit {
               protected seoService: SEOService,
               protected _piwikService: PiwikService,
               protected _title: Title,
-              protected _meta: Meta) {
+              protected _meta: Meta,
+              private configurationService: ConfigurationService) {
     super();
     super.initRouterParams(this._route, event => {
-      this.isSearch = event.url.includes('search');
+      this.isSearch = event.url.includes('/search');
     });
 
   }
@@ -99,28 +124,35 @@ export class RfoComponent extends StakeholderBaseComponent implements OnInit {
     this.title = 'RFOs';
     this.description = 'RFOs';
     this.setMetadata();
+    this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
+      this.isMobile = isMobile;
+    }));
     this.params.subscribe(params => {
-      this._customFilterService.setCustomFilter(null);
       this.alias = params['stakeholder'];
       if (this.alias) {
-        this.loading = true;
-        this.subscriptions.push(this.stakeholderService.getStakeholder(this.alias, true).subscribe(stakeholder => {
-          this.stakeholder = stakeholder;
-          if (this.stakeholder && this.stakeholder.type === 'funder') {
-            LinksResolver.resetProperties();
-            LinksResolver.setSearchAndResultLanding("rfo/" + this.stakeholder.alias);
-            let value = this.stakeholder.index_id + "||" + this.stakeholder.index_name + "||" + this.stakeholder.index_shortName;
-            this._customFilterService.setCustomFilter(
-                [new SearchCustomFilter("National", "country", "IE", "Irish National Monitor", false),
-                  new SearchCustomFilter("RF0", "relfunder", value, this.stakeholder.index_name, true)
-                ]);
-            this.loading = false;
-          } else {
-            this.navigateToError();
-          }
-        }));
+        if(this.stakeholder?.alias !== this.alias) {
+          this.loading = true;
+          this._customFilterService.setCustomFilter(null);
+          this.subscriptions.push(this.stakeholderService.getStakeholder(this.alias, true).subscribe(stakeholder => {
+            this.stakeholder = stakeholder;
+            if (this.stakeholder && this.stakeholder.type === 'funder') {
+              this.setProperties(this.stakeholder.alias, this.stakeholder.type, this.configurationService);
+              LinksResolver.resetProperties();
+              LinksResolver.setSearchAndResultLanding("rfo/" + this.stakeholder.alias);
+              let value = this.stakeholder.index_id + "||" + this.stakeholder.index_name + "||" + this.stakeholder.index_shortName;
+              this._customFilterService.setCustomFilter(
+                  [new SearchCustomFilter("National", "country", "IE", "Irish National Monitor", false),
+                    new SearchCustomFilter("RF0", "relfunder", value, this.stakeholder.index_name, true)
+                  ]);
+              this.loading = false;
+            } else {
+              this.navigateToError();
+            }
+          }));
+        }
       } else {
         this.stakeholder = null;
+        this._customFilterService.setCustomFilter(null);
       }
     });
   }
@@ -128,5 +160,30 @@ export class RfoComponent extends StakeholderBaseComponent implements OnInit {
   ngOnDestroy() {
     super.ngOnDestroy();
     this.layoutService.setRootClass(null);
+    this.setProperties(Irish.irishAdminToolsCommunity, Irish.irishAdminToolsPortalType, this.configurationService);
+    LinksResolver.resetProperties();
+  }
+
+  get isManager() {
+    return Session.isPortalAdministrator(this.userManagementService.user) ||
+        Session.isCurator(this.stakeholder.type, this.userManagementService.user) ||
+        Session.isManager(this.stakeholder.type, this.stakeholder.alias, this.userManagementService.user);
+  }
+
+  get isMember() {
+    return this.isManager ||
+        Session.isMember(this.stakeholder.type, this.stakeholder.alias, this.userManagementService.user);
+  }
+
+  get adminLink() {
+    return "/admin/" + this.stakeholder.alias;
+  }
+
+  get sandboxLink() {
+    if(this.properties.environment !== 'beta' && this.isMember) {
+      return beta.domain + '/rfo/' + this.stakeholder.alias;
+    } else {
+      return null;
+    }
   }
 }

src/app/rfo/rfo.module.ts

@@ -9,6 +9,7 @@ import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.modu
 import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
 import {open_access} from "../openaireLibrary/utils/icons/icons";
 import {SandboxGuard} from "../shared/sandbox.guard";
+import {OaIndicatorModule} from "../shared/oa-indicator/oa-indicator.module";
 
 const routes: Route[] = [
   {
@@ -21,7 +22,7 @@ const routes: Route[] = [
 ];
 
 @NgModule({
-  imports: [CommonModule, RouterModule.forChild(routes), LoadingModule, RoleVerificationModule, IconsModule, LogoUrlPipeModule],
+  imports: [CommonModule, RouterModule.forChild(routes), LoadingModule, RoleVerificationModule, IconsModule, LogoUrlPipeModule, OaIndicatorModule],
   declarations: [RfoComponent],
   exports: [RfoComponent],
 })

src/app/rpo/rpo.component.ts

@@ -11,8 +11,11 @@ import {CustomFilterService} from "../openaireLibrary/shared/customFilter.servic
 import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
 import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
 import {OpenaireEntities} from "../openaireLibrary/utils/properties/searchFields";
-import {RouterHelper} from "../openaireLibrary/utils/routerHelper.class";
-import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
+import {ConfigurationService} from "../openaireLibrary/utils/configuration/configuration.service";
+import {Irish} from "../shared/irish";
+import {Role, Session} from "../openaireLibrary/login/utils/helper.class";
+import {properties as beta} from "../../environments/environment.beta";
+import {UserManagementService} from "../openaireLibrary/services/user-management.service";
 
 @Component({
   selector: 'rpo',
@@ -36,23 +39,19 @@ import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
                                 <icon [name]="'navigate_before'" [flex]="true" [ratio]="0.8" class="uk-margin-xsmall-right"></icon>
                                 <a routerLink=".">Back to all {{entities.organization}} {{entities.stakeholders}}</a>
                               </div>
-                              <h1 class="uk-h5 uk-margin-remove uk-text-truncate">{{stakeholder.name}}</h1>
+                              <h1 class="uk-h4 uk-margin-remove uk-text-truncate">{{stakeholder.name}}</h1>
                             </div>
                           </div>
                         </div>
-                        <div class="uk-width-auto">
-                          <div class="uk-progress-semicircle open-access" [attr.percentage]="0" [style]="'--percentage:' + 0"></div>
-                          <div class="uk-flex uk-flex-middle uk-margin-small-top">
-                            <icon [name]="'open_access'" [flex]="true" class="open-access"></icon>
-                            <span class="uk-margin-xsmall-left">Open Access</span>
+                          <div class="uk-width-auto">
+                              <oa-indicator [stakeholder]="stakeholder"></oa-indicator>
                           </div>
-                        </div>
                       </div>
-                      <h1 *ngIf="!stakeholder" class="uk-h4 uk-margin-small-bottom">{{entities.organizations}}</h1>
+                      <h1 *ngIf="!stakeholder" class="uk-h3 uk-margin-small-bottom">Research Performing Organisations ({{entities.organizations}})</h1>
                     </div>
                 </div>
                 <div *ngIf="stakeholder" class="uk-banner-footer">
-                    <div class="uk-container uk-container-large">
+                    <div class="uk-container uk-container-large uk-flex uk-flex-between">
                         <ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
                             <li [class.uk-active]="!isSearch">
                                 <a [routerLink]="['./', stakeholder.alias]" [relativeTo]="_route"
@@ -63,35 +62,47 @@ import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
                                    [relativeTo]="_route">Browse {{openaireEntities.RESULTS}}</a>
                             </li>
                         </ul>
+                        <div *ngIf="!isMobile" class="uk-margin-large-right uk-flex uk-flex-middle">
+                            <a *ngIf="isManager" [routerLink]="adminLink" target="_blank" class="uk-button uk-flex uk-flex-middle uk-margin-small-right">
+                                Manage
+                            </a>
+                            <a *ngIf="sandboxLink" [href]="sandboxLink" target="_blank" class="uk-button uk-flex uk-flex-middle uk-margin-small-right">
+                                Sandbox
+                            </a>
+                        </div>
                     </div>
                 </div>
             </div>
-            <div *ngIf="!this.alias || this.stakeholder" class="uk-margin-medium-top uk-margin-medium-bottom">
+            <div *ngIf="!this.alias || this.stakeholder">
                 <router-outlet></router-outlet>
             </div>
         </div>
-        <role-verification *ngIf="stakeholder" [id]="stakeholder.alias" [name]="stakeholder.name" [type]="stakeholder.type" [service]="'irish'"></role-verification>
+        <role-verification *ngIf="stakeholder" [id]="stakeholder.alias" [name]="stakeholder.name" [type]="stakeholder.type" [dashboard]="'National Open Access Monitor, Ireland'"
+                           [service]="'irish'" [relativeTo]="null"></role-verification>
   `
 })
 export class RpoComponent extends StakeholderBaseComponent implements OnInit {
   stakeholder: Stakeholder;
   alias: string;
+  isMobile: boolean = false;
   isSearch: boolean = false;
   loading: boolean = false;
   openaireEntities = OpenaireEntities;
 
   constructor(private stakeholderService: StakeholderService,
               private _customFilterService: CustomFilterService,
+              private userManagementService: UserManagementService,
               private layoutService: LayoutService,
               protected _router: Router,
               protected _route: ActivatedRoute,
               protected seoService: SEOService,
               protected _piwikService: PiwikService,
               protected _title: Title,
-              protected _meta: Meta) {
+              protected _meta: Meta,
+              private configurationService: ConfigurationService) {
     super();
     super.initRouterParams(this._route, event => {
-      this.isSearch = event.url.includes('search');
+      this.isSearch = event.url.includes('/search');
     });
 
   }
@@ -101,28 +112,36 @@ export class RpoComponent extends StakeholderBaseComponent implements OnInit {
     this.title = 'RPOs';
     this.description = 'RPOs';
     this.setMetadata();
+    this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
+      this.isMobile = isMobile;
+    }));
     this.params.subscribe(params => {
-      this._customFilterService.setCustomFilter(null);
       this.alias = params['stakeholder'];
       if (this.alias) {
-        this.loading = true;
-        this.subscriptions.push(this.stakeholderService.getStakeholder(this.alias, true).subscribe(stakeholder => {
-          this.stakeholder = stakeholder;
-          if (this.stakeholder && this.stakeholder.type === 'organization') {
-            LinksResolver.resetProperties();
-            LinksResolver.setSearchAndResultLanding("rpo/" + this.stakeholder.alias);
-            let value = this.stakeholder.index_id + "||" + this.stakeholder.index_name + "||" + this.stakeholder.index_shortName;
-            this._customFilterService.setCustomFilter(
-                [new SearchCustomFilter("National", "country", "IE", "Irish National Monitor", false),
-                  new SearchCustomFilter("RPO", "relorganizationid", this.stakeholder.index_id, this.stakeholder.index_name, true)
-                ]);
-            this.loading = false;
-          } else {
-            this.navigateToError();
-          }
-        }));
+        if(this.stakeholder?.alias !== this.alias) {
+          this.loading = true;
+          this._customFilterService.setCustomFilter(null);
+          this.subscriptions.push(this.stakeholderService.getStakeholder(this.alias, true).subscribe(stakeholder => {
+            this.stakeholder = stakeholder;
+            if (this.stakeholder && this.stakeholder.type === 'organization') {
+              this.setProperties(this.stakeholder.alias, this.stakeholder.type, this.configurationService);
+              LinksResolver.resetProperties();
+              LinksResolver.setSearchAndResultLanding("rpo/" + this.stakeholder.alias);
+              let value = this.stakeholder.index_id + "||" + this.stakeholder.index_name + "||" + this.stakeholder.index_shortName;
+              this._customFilterService.setCustomFilter(
+                  [new SearchCustomFilter("National", "country", "IE", "Irish National Monitor", false),
+                    new SearchCustomFilter("RPO", "relorganizationid", this.stakeholder.index_id, this.stakeholder.index_name, true)
+                  ]);
+              this.loading = false;
+            } else {
+              this.navigateToError();
+            }
+          }));
+        }
       } else {
         this.stakeholder = null;
+        this._customFilterService.setCustomFilter(null);
+
       }
     });
   }
@@ -130,6 +149,31 @@ export class RpoComponent extends StakeholderBaseComponent implements OnInit {
   ngOnDestroy() {
     super.ngOnDestroy();
     this.layoutService.setRootClass(null);
+    this.setProperties(Irish.irishAdminToolsCommunity, Irish.irishAdminToolsPortalType, this.configurationService);
+    LinksResolver.resetProperties();
+  }
+
+  get isManager() {
+    return Session.isPortalAdministrator(this.userManagementService.user) ||
+        Session.isCurator(this.stakeholder.type, this.userManagementService.user) ||
+        Session.isManager(this.stakeholder.type, this.stakeholder.alias, this.userManagementService.user);
+  }
+
+  get isMember() {
+    return this.isManager ||
+        Session.isMember(this.stakeholder.type, this.stakeholder.alias, this.userManagementService.user);
+  }
+
+  get adminLink() {
+    return "/admin/" + this.stakeholder.alias;
+  }
+
+  get sandboxLink() {
+    if(this.properties.environment !== 'beta' && this.isMember) {
+      return beta.domain + '/rpo/' + this.stakeholder.alias;
+    } else {
+      return null;
+    }
   }
 }
 

src/app/rpo/rpo.module.ts

@@ -9,6 +9,7 @@ import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.modu
 import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
 import {open_access} from "../openaireLibrary/utils/icons/icons";
 import {SandboxGuard} from "../shared/sandbox.guard";
+import {OaIndicatorModule} from "../shared/oa-indicator/oa-indicator.module";
 
 const routes: Route[] = [
   {
@@ -21,7 +22,7 @@ const routes: Route[] = [
 ];
 
 @NgModule({
-  imports: [CommonModule, RouterModule.forChild(routes), LoadingModule, RoleVerificationModule, IconsModule, LogoUrlPipeModule],
+  imports: [CommonModule, RouterModule.forChild(routes), LoadingModule, RoleVerificationModule, IconsModule, LogoUrlPipeModule, OaIndicatorModule],
   declarations: [RpoComponent],
   exports: [RpoComponent],
 })

src/app/search/landingPages/organization/organization.component.ts

@@ -2,7 +2,6 @@ import {Component} from '@angular/core';
 import {ActivatedRoute, Router} from "@angular/router";
 import {StakeholderService} from "../../../openaireLibrary/monitor/services/stakeholder.service";
 import {Subscriber} from "rxjs";
-import {ConfigurationService} from "../../../openaireLibrary/utils/configuration/configuration.service";
 
 @Component({
   selector: 'monitor-organization',

src/app/search/links-resolver.ts

@@ -57,12 +57,13 @@ export class LinksResolver {
     searchLinkToAdvancedOrganizations: properties.searchLinkToAdvancedOrganizations,
     errorLink: properties.errorLink
   };
-  
+
   public static setProperties(alias: string) {
     Object.keys(this.default).forEach(field => {
       properties[field] = "/" + alias + (<string>this.default[field]);
     });
   }
+
   public static setSearchAndResultLanding(alias: string) {
     properties.searchLinkToResult= "/" + alias + this.default.searchLinkToResult;
     properties.searchLinkToPublication= "/" + alias + this.default.searchLinkToPublication;
@@ -76,9 +77,8 @@ export class LinksResolver {
     properties.searchLinkToAdvancedOrps= "/" + alias + this.default.searchLinkToAdvancedOrps;
 
   }
+
   public static resetProperties() {
-    Object.keys(this.default).forEach(field => {
-      properties[field] = this.default[field];
-    });
+    this.setProperties('national/');
   }
 }

src/app/search/searchPages/simple/searchDataproviders.component.ts

@@ -6,22 +6,24 @@ import {CustomFilterService} from "../../../openaireLibrary/shared/customFilter.
 @Component({
   selector: 'monitor-search-dataproviders',
   template: `
-    <div class=" uk-flex uk-flex-center ">
-      <div>
-        <div class=" uk-flex uk-flex-right">
-          <a [routerLink]="properties.searchLinkToAdvancedDataProviders" [queryParams]="parameters">Advanced search</a>
-        </div>
-        <div search-input [(value)]="keyword" [placeholder]="'Search by name, description, subject...'"
-             [searchInputClass]="'inner background'" (searchEmitter)="search()" class="uk-width-xlarge@l uk-width-large@m"></div>
+      <div class="uk-flex uk-flex-center uk-margin-medium-bottom uk-margin-medium-top">
+          <div class="uk-width-1-1 uk-width-auto@s uk-padding uk-padding-remove-vertical">
+              <div class=" uk-flex uk-flex-right">
+                  <a [routerLink]="properties.searchLinkToAdvancedDataProviders" [queryParams]="parameters">Advanced
+                      search</a>
+              </div>
+              <div search-input [(value)]="keyword" [placeholder]="'Search by name, description, subject...'"
+                   [searchInputClass]="'inner background'" (searchEmitter)="search()"
+                   class="uk-width-xlarge@l uk-width-large@m uk-width-1-1"></div>
+          </div>
       </div>
-    </div>
-    <search-dataproviders *ngIf="customFilters"
-                          [customFilters]=customFilters
-                          [hasPrefix]="false"
-                          [includeOnlyResultsAndFilter]="true" [showBreadcrumb]="false"
-                          [showSwitchSearchLink]="false"
-                          [searchForm]="{dark: false, class: 'search-form'}">
-    </search-dataproviders>
+      <search-dataproviders *ngIf="customFilters"
+                            [customFilters]=customFilters
+                            [hasPrefix]="false"
+                            [includeOnlyResultsAndFilter]="true" [showBreadcrumb]="false"
+                            [showSwitchSearchLink]="false"
+                            [searchForm]="{dark: false, class: 'search-form'}">
+      </search-dataproviders>
   `
 })
 export class MonitorSearchDataprovidersComponent extends SearchBaseComponent{

src/app/search/searchPages/simple/searchOrganizations.component.ts

@@ -6,15 +6,17 @@ import {CustomFilterService} from "../../../openaireLibrary/shared/customFilter.
 @Component({
   selector: 'monitor-search-organizations',
   template: `
-    <div class=" uk-flex uk-flex-center ">
-      <div>
-        <div class=" uk-flex uk-flex-right">
-          <a [routerLink]="properties.searchLinkToAdvancedOrganizations" [queryParams]="parameters">Advanced search</a>
-        </div>
-        <div search-input [(value)]="keyword" [placeholder]="'Search by organization name...'"
-             [searchInputClass]="'inner background'" (searchEmitter)="search()" class="uk-width-xlarge@l uk-width-large@m"></div>
+      <div class="uk-flex uk-flex-center uk-margin-medium-bottom uk-margin-medium-top">
+          <div class="uk-width-1-1 uk-width-auto@s uk-padding uk-padding-remove-vertical">
+              <div class=" uk-flex uk-flex-right">
+                  <a [routerLink]="properties.searchLinkToAdvancedOrganizations" [queryParams]="parameters">Advanced
+                      search</a>
+              </div>
+              <div search-input [(value)]="keyword" [placeholder]="'Search by organization name...'"
+                   [searchInputClass]="'inner background'" (searchEmitter)="search()"
+                   class="uk-width-xlarge@l uk-width-large@m uk-width-1-1"></div>
+          </div>
       </div>
-    </div>
       <search-organizations *ngIf="customFilters" [customFilters]="customFilters"
                             [hasPrefix]="false"
                             [includeOnlyResultsAndFilter]="true" [showBreadcrumb]="false"

src/app/search/searchPages/simple/searchProjects.component.ts

@@ -6,21 +6,23 @@ import {CustomFilterService} from "../../../openaireLibrary/shared/customFilter.
 @Component({
   selector: 'monitor-search-projects',
   template: `
-    <div class=" uk-flex uk-flex-center ">
-      <div>
-        <div class=" uk-flex uk-flex-right">
-          <a [routerLink]="properties.searchLinkToAdvancedProjects" [queryParams]="parameters">Advanced search</a>
-        </div>
-        <div search-input [(value)]="keyword" [placeholder]="'Search by title, acronym, project code...'"
-             [searchInputClass]="'inner background'" (searchEmitter)="search()" class="uk-width-xlarge@l uk-width-large@m"></div>
+      <div class="uk-flex uk-flex-center uk-margin-medium-bottom uk-margin-medium-top">
+          <div class="uk-width-1-1 uk-width-auto@s uk-padding uk-padding-remove-vertical">
+              <div class=" uk-flex uk-flex-right">
+                  <a [routerLink]="properties.searchLinkToAdvancedProjects" [queryParams]="parameters">Advanced
+                      search</a>
+              </div>
+              <div search-input [(value)]="keyword" [placeholder]="'Search by title, acronym, project code...'"
+                   [searchInputClass]="'inner background'" (searchEmitter)="search()"
+                   class="uk-width-xlarge@l uk-width-large@m uk-width-1-1"></div>
+          </div>
       </div>
-    </div>
       <search-projects *ngIf="customFilters"
-                       [customFilters]="customFilters"  [hasPrefix]="false"
+                       [customFilters]="customFilters" [hasPrefix]="false"
                        [includeOnlyResultsAndFilter]="true" [showBreadcrumb]="false"
                        [showSwitchSearchLink]="false"
-                       [searchForm]="{dark: false, class: 'search-form'}" 
-                       >
+                       [searchForm]="{dark: false, class: 'search-form'}"
+      >
       </search-projects>
   `
   

src/app/search/searchPages/simple/searchResearchResults.component.ts

@@ -7,8 +7,8 @@ import {OpenaireEntities} from "../../../openaireLibrary/utils/properties/search
 @Component({
   selector: 'monitor-search-results',
   template: `
-    <div class=" uk-flex uk-flex-center uk-margin-medium-bottom">
-      <div>
+    <div class="uk-flex uk-flex-center uk-margin-medium-bottom uk-margin-medium-top">
+      <div class="uk-width-1-1 uk-width-auto@s uk-padding uk-padding-remove-vertical">
         <div class=" uk-flex uk-flex-right">
           <a [routerLink]="properties.searchLinkToAdvancedResults" [queryParams]="parameters"
             class="uk-margin-xsmall-bottom uk-margin-xsmall-right">Advanced search</a>

src/app/shared/browse-stakeholder-base.component.ts

@@ -1,116 +0,0 @@
-import {ChangeDetectorRef, Directive, OnInit} from "@angular/core";
-import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
-import {Stakeholder, StakeholderType} from "../openaireLibrary/monitor/entities/stakeholder";
-import {Option} from "../openaireLibrary/sharedComponents/input/input.component";
-import {FormBuilder, FormControl} from "@angular/forms";
-import {debounceTime, distinctUntilChanged} from "rxjs/operators";
-import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
-import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
-import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
-
-@Directive()
-export class BrowseStakeholderBaseComponent extends StakeholderBaseComponent implements OnInit {
-  stakeholderType: StakeholderType;
-  stakeholders: Stakeholder[] = [];
-  filteredStakeholders: Stakeholder[] = [];
-  showLoading: boolean = true;
-  isMobile: boolean = false;
-
-  gridView: boolean = true;
-  sortOptions: Option[] = [
-    {value: 'alphAsc', label: 'Alphabetically Asc. (A-Z)'},
-    {value: 'alphDsc', label: 'Alphabetically Dsc. (Z-A)'},
-    {value: 'oaDsc', label: '"Open Access %" Dsc.'}
-  ];
-  pageOptions: number[] = [10, 20, 30, 40];
-  sortBy: string = 'alphAsc';
-  currentPage: number = 1;
-  pageSize: number = 10;
-  parameters = {};
-  keywordControl: FormControl;
-
-  /* Services */
-  protected stakeholderService: StakeholderService;
-  protected layoutService: LayoutService;
-  protected cdr: ChangeDetectorRef;
-  protected fb: FormBuilder;
-
-  constructor() {
-    super();
-  }
-
-  ngOnInit() {
-    this.keywordControl = this.fb.control(this._route.snapshot.queryParams.keyword);
-    this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
-      this.isMobile = isMobile;
-      this.cdr.detectChanges();
-    }));
-    this.stakeholderType = this._route.snapshot.data.type;
-    if(!this.stakeholderType) {
-      this.navigateToError();
-    }
-    this.subscriptions.push(this.stakeholderService.getStakeholders(this.properties.monitorServiceAPIURL, this.stakeholderType).subscribe(stakeholders => {
-      this.stakeholders = stakeholders;
-      this.filteredStakeholders = stakeholders;
-      this.filteredStakeholders.sort((a, b) => a['name'].localeCompare(b['name']));
-      this.filtering(this.keywordControl.value);
-    }));
-    this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(200), distinctUntilChanged()).subscribe(value => {
-      this.filtering(value);
-      if(value?.length > 0) {
-        this.parameters['keyword'] = value;
-      } else {
-        delete this.parameters['keyword']
-      }
-      this._router.navigate([], {queryParams: this.parameters});
-    }));
-  }
-
-  private filtering(value) {
-    if(!value){
-      this.filteredStakeholders = this.stakeholders;
-    } else {
-      this.filteredStakeholders = this.stakeholders.filter(item => (item['name'] && item['name'].toLowerCase().includes(value.toLowerCase())) || (item['alias'] && item['alias'].toLowerCase().includes(value.toLowerCase())));
-    }
-    this.afterStakeholdersInitialized();
-    this.currentPage = 1;
-  }
-
-  sortByChanged() {
-    switch(this.sortBy) {
-      case 'alphAsc':
-        this.stakeholders = this.stakeholders.sort((a, b) => a['name'].localeCompare(b['name']));
-        break;
-      case 'alphDsc':
-        this.stakeholders = this.stakeholders.sort((a, b) => b['name'].localeCompare(a['name']));
-        break;
-      case 'oaDsc':
-        // TODO: dont have an OA percentage yet
-        // this.stakeholders = this.stakeholders.sort((a, b) => b['openAccessPercentage'] - a['openAccessPercentage']);
-        break;
-      default:
-        break;
-    }
-  }
-
-  sizeChanged($event) {
-    this.pageSize = $event;
-    this.currentPage = 1;
-    this.afterStakeholdersInitialized();
-  }
-
-  updateCurrentPage($event) {
-    this.currentPage = $event.value;
-    HelperFunctions.scrollToId('target');
-    this.afterStakeholdersInitialized();
-  }
-
-  get typeAsLabel() {
-    return this.stakeholderUtils.types.find(type => type.value === this.stakeholderType).label;
-  }
-  
-  afterStakeholdersInitialized() {
-    // this is a method that will be overriden from the components extending this base component, if needed
-    this.showLoading = false;
-  }
-}

src/app/shared/browse-stakeholders/browse-stakeholders.component.html

@@ -1,157 +1,191 @@
 <ng-container *ngIf="showLoading">
-  <div class="uk-container uk-container-large uk-section">
-    <loading></loading>
-  </div>
+    <div class="uk-container uk-container-large uk-section">
+        <loading></loading>
+    </div>
 </ng-container>
-<div *ngIf="!showLoading" class="uk-container uk-container-large">
-  <div class="uk-flex uk-flex-middle uk-flex-between">
-    <div class="uk-visible@m uk-width-small">
-    </div>
-    <div search-input *ngIf="keywordControl" [searchControl]="keywordControl" [searchInputClass]="'flat'" [iconPosition]="'left'"
-      placeholder="Search for {{typeAsLabel}} {{entities.stakeholders}}" [disabled]="stakeholders.length === 0" class="uk-width-xlarge@l uk-width-large@m uk-width-1-1">
-    </div>
-    <div [class.uk-disabled]="stakeholders.length === 0" class="uk-flex uk-flex-middle uk-flex-right uk-width-small">
-      <button (click)="gridView = true" [class.uk-button-primary]="gridView" [disabled]="stakeholders.length === 0"
-              class="uk-icon-button uk-button-default uk-border-rounded uk-icon-button-small">
-        <icon name="apps" [flex]="true" type="round" [ratio]="1.2"></icon>
-      </button>
-      <button (click)="gridView = false" [class.uk-button-primary]="!gridView" [disabled]="stakeholders.length === 0"
-              class="uk-icon-button uk-button-default uk-border-rounded uk-icon-button-small uk-margin-small-left">
-        <icon name="view_list" [flex]="true" type="round" [ratio]="1.2"></icon>
-      </button>
-    </div>
-  </div>
-  <div class="uk-flex uk-flex-middle uk-flex-between uk-margin-large-top">
-    <div class="uk-flex uk-flex-middle">
-      <div class="uk-width-small uk-margin-medium-right">
-        <div input
-          type="select" placeholder="Sort by" inputClass="border-bottom"
-          [options]="sortOptions" [(value)]="sortBy" (valueChange)="sortByChanged()">
+<div *ngIf="!showLoading" class="uk-container uk-container-large uk-section-small">
+    <div class="uk-flex uk-flex-middle uk-flex-between">
+        <div class="uk-visible@m uk-width-small">
         </div>
-      </div>
-      <div class="uk-width-xsmall">
-        <div input
-          type="select" placeholder="Results per page" inputClass="border-bottom"
-          [options]="pageOptions" [(value)]="pageSize" (valueChange)="sizeChanged($event)">
+        <div search-input *ngIf="keywordControl" [searchControl]="keywordControl" [searchInputClass]="'flat'"
+             [iconPosition]="'left'"
+             placeholder="Search for {{typeAsLabel}} {{entities.stakeholders}}" [disabled]="stakeholders.length === 0"
+             class="uk-width-xlarge@l uk-width-large@m uk-width-1-1">
         </div>
-      </div>
-    </div>
-    <div>
-      <paging-no-load *ngIf="filteredStakeholders.length > pageSize"
-        (pageChange)="updateCurrentPage($event)"
-        [currentPage]="currentPage" [size]="pageSize"
-        [totalResults]="filteredStakeholders.length">
-      </paging-no-load>
-    </div>
-  </div>
-  <div class="uk-margin-large-top" id="target">
-    <div *ngIf="!filteredStakeholders || filteredStakeholders?.length == 0" class="uk-flex uk-flex-center">
-      <div class="uk-alert uk-alert-primary uk-text-center uk-width-2-3@m uk-width-1-1">
-        No {{entities.stakeholders}} available
-      </div>
-    </div>
-    <!-- STAKEHOLDERS -->
-    <!-- Grid view -->
-    <ng-container *ngIf="gridView || isMobile; else elseBlock">
-      <div class="uk-grid" class="uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-1"
-        uk-grid uk-height-match="target: .top-info;">
-        <div *ngFor="let item of filteredStakeholders.slice((currentPage-1)*pageSize, currentPage*pageSize)">
-          <a routerLink="./{{item.alias}}" class="uk-link-reset">
-            <div class="uk-card uk-card-default uk-card-hover">
-              <div class="uk-padding-small top-info">
-                <!-- logo -->
-                <!-- remove max-width style, add something custom maybe?  -->
-                <div class="uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
-                  <img *ngIf="item.logoUrl; else elseBlock" [src]="item | logoUrl" [alt]="item.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 180px;">
-                  <ng-template #elseBlock>
-                    <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 180px;">
-                  </ng-template>
-                </div>
-                <!-- name -->
-                <div class="uk-text-center uk-text-bold uk-margin-top multi-line-ellipsis lines-2">
-                  <div [title]="item.name">
-                    {{item.name}}
-                  </div>
-                </div>
-              </div>
-              <div class="uk-card-footer uk-padding-small uk-background-muted">
-                <div class="uk-grid uk-grid-divider uk-flex-center uk-flex-middle uk-child-width-1-2@m" uk-grid>
-                  <div *ngIf="item.funderType">
-                    <div class="uk-text-xsmall">
-                      Type
-                    </div>
-                    <div class="uk-text-small uk-text-bold">
-                      {{getFunderTypeLabel(item.funderType)}}
-                    </div>
-                  </div>
-                  <div>
-                    <div class="uk-text-center uk-text-bold">
-                      <span class="uk-text-small">50</span>
-                      <span class="uk-text-xsmall">%</span>
-                    </div>
-                    <progress class="uk-progress open-access uk-margin-xsmall-top uk-margin-xsmall-bottom" [value]="50" max="100"></progress>
-                    <div class="uk-flex uk-flex-middle">
-                      <icon [name]="'open_access'" [flex]="true" [ratio]="0.8" class="open-access"></icon>
-                      <span class="uk-text-xsmall uk-margin-xsmall-left">Open Access</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+        <div *ngIf="!isMobile">
+            <div [class.uk-disabled]="stakeholders.length === 0"
+                 class="uk-flex uk-flex-middle uk-flex-right uk-width-small">
+                <button (click)="gridView = true" [class.uk-button-primary]="gridView"
+                        [disabled]="stakeholders.length === 0"
+                        class="uk-icon-button uk-button-default uk-border-rounded uk-icon-button-small">
+                    <icon name="apps" [flex]="true" type="round" [ratio]="1.2"></icon>
+                </button>
+                <button (click)="gridView = false" [class.uk-button-primary]="!gridView"
+                        [disabled]="stakeholders.length === 0"
+                        class="uk-icon-button uk-button-default uk-border-rounded uk-icon-button-small uk-margin-small-left">
+                    <icon name="view_list" [flex]="true" type="round" [ratio]="1.2"></icon>
+                </button>
             </div>
-          </a>
         </div>
-      </div>
-    </ng-container>
-    <!-- List view -->
-    <ng-template #elseBlock>
-      <div>
-        <table class="uk-table uk-table-striped uk-table-middle uk-table-responsive uk-table-hover">
-          <thead>
-            <tr>
-              <th>Logo</th>
-              <th>Name</th>
-              <th *ngIf="stakeholderType === 'funder'">Type</th>
-              <th class="uk-flex uk-flex-middle">
-                <icon [name]="'open_access'" [flex]="true" [ratio]="0.8" class="open-access"></icon>
-                <span class="uk-margin-xsmall-left">Open Access %</span>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr *ngFor="let item of filteredStakeholders.slice((currentPage-1)*pageSize, currentPage*pageSize)"
-              class="clickable" routerLink="./{{item.alias}}">
-              <td>
-                <!-- remove max-width style, add something custom maybe?  -->
-                <div class="uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
-                  <img *ngIf="item.logoUrl; else elseBlock" [src]="item | logoUrl" [alt]="item.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 140px;">
-                  <ng-template #elseBlock>
-                    <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 140px;">
-                  </ng-template>
+    </div>
+    <div class="uk-grid uk-flex-middle uk-flex-between@m uk-flex-center uk-margin-large-top" [id]="id" uk-grid>
+        <div class="uk-flex uk-flex-middle">
+            <div *ngIf="sortOptions?.length > 0" class="uk-width-small uk-margin-medium-right">
+                <div input
+                     type="select" placeholder="Sort by" inputClass="border-bottom"
+                     [options]="sortOptions" [(value)]="sortBy" (valueChange)="sortByChanged()">
                 </div>
-              </td>
-              <td>
-                <div class="uk-text-truncate uk-text-capitalize uk-text-italic uk-text-small uk-text-bold" [title]="item.name">
-                  {{item.name}}
+            </div>
+            <div class="uk-width-xsmall">
+                <div input
+                     type="select" placeholder="Results per page" inputClass="border-bottom"
+                     [options]="pageOptions" [(value)]="pageSize" (valueChange)="sizeChanged($event)">
                 </div>
-              </td>
-              <td *ngIf="stakeholderType === 'funder'">
-                <div *ngIf="item.funderType" class="uk-text-small uk-text-bold uk-text-capitalize">
-                  {{getFunderTypeLabel(item.funderType)}}
+            </div>
+        </div>
+        <div>
+            <paging-no-load *ngIf="filteredStakeholders.length > pageSize"
+                            (pageChange)="updateCurrentPage($event)"
+                            [currentPage]="currentPage" [size]="pageSize"
+                            [totalResults]="filteredStakeholders.length">
+            </paging-no-load>
+        </div>
+    </div>
+    <div class="uk-margin-large-top" id="target">
+        <div *ngIf="!filteredStakeholders || filteredStakeholders?.length == 0" class="uk-flex uk-flex-center">
+            <div class="uk-alert uk-alert-primary uk-text-center uk-width-2-3@m uk-width-1-1">
+                No {{ entities.stakeholders }} available
+            </div>
+        </div>
+        <!-- STAKEHOLDERS -->
+        <!-- Grid view -->
+        <ng-container *ngIf="gridView || isMobile; else elseBlock">
+            <div class="uk-grid" class="uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-1"
+                 uk-grid uk-height-match="target: .top-info;">
+                <div *ngFor="let item of filteredStakeholders.slice((currentPage-1)*pageSize, currentPage*pageSize)">
+                    <a [routerLink]="['./', item.alias]" class="uk-link-reset">
+                        <div class="uk-card uk-card-default uk-card-hover">
+                            <div class="uk-padding-small top-info">
+                                <!-- logo -->
+                                <!-- remove max-width style, add something custom maybe?  -->
+                                <div class="uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
+                                    <img *ngIf="item.logoUrl; else elseBlock" [src]="item | logoUrl"
+                                         [alt]="item.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply"
+                                         style="max-width: 180px;">
+                                    <ng-template #elseBlock>
+                                        <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo"
+                                             class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 180px;">
+                                    </ng-template>
+                                </div>
+                                <!-- name -->
+                                <div class="uk-text-center uk-text-bold uk-margin-top multi-line-ellipsis lines-2">
+                                    <div [title]="item.name">
+                                        {{ item.name }}
+                                    </div>
+                                </div>
+                                <div *ngIf="item.publications"
+                                     class="uk-margin-small-top uk-text-xsmall uk-text-center">
+                                    {{ openaireEntities.PUBLICATIONS }}: {{ item.publications | number }}
+                                </div>
+                            </div>
+                            <!-- when OA badges are re-introduced, the below if-statement will have to be moved on its correct div -->
+                            <div *ngIf="item.funderType || item.openAccess"
+                                 class="uk-card-footer uk-padding-small uk-background-muted">
+                                <div class="uk-grid uk-grid-small uk-grid-divider uk-flex-center uk-flex-middle uk-child-width-1-2@m"
+                                     uk-grid>
+                                    <div *ngIf="item.funderType">
+                                        <div class="uk-text-xsmall">
+                                            Type
+                                        </div>
+                                        <div class="uk-text-small uk-text-bold">
+                                            {{ getFunderTypeLabel(item.funderType) }}
+                                        </div>
+                                    </div>
+                                    <div *ngIf="item.openAccess">
+                                        <div class="uk-text-center uk-text-bold">
+                                            <span class="uk-text-small">{{ item.openAccess.toFixed(1) }}</span>
+                                            <span class="uk-text-xsmall">%</span>
+                                        </div>
+                                        <progress
+                                                class="uk-progress open-access uk-margin-xsmall-top uk-margin-xsmall-bottom"
+                                                [value]="item.openAccess" max="100"></progress>
+                                        <div class="uk-flex uk-text-center uk-flex-middle" [attr.uk-tooltip]="'Open Access with Licence (' + year + ')'">
+                                            <icon [name]="'open_access'" [flex]="true" [ratio]="0.8"
+                                                  class="open-access"></icon>
+                                            <span class="uk-text-xsmall uk-margin-xsmall-left">Open Access ({{year}})</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </a>
                 </div>
-              </td>
-              <td>
-                <div class="uk-width-xsmall uk-margin-left">
-                  <div class="uk-text-center uk-text-bold">
-                    <span class="uk-text-small">50</span>
-                    <span class="uk-text-xsmall">%</span>
-                  </div>
-                  <progress class="uk-progress open-access uk-margin-xsmall-top uk-margin-xsmall-bottom" [value]="50" max="100"></progress>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </ng-template>
-  </div>
+            </div>
+        </ng-container>
+        <!-- List view -->
+        <ng-template #elseBlock>
+            <div>
+                <table class="uk-table uk-table-striped uk-table-middle uk-table-responsive uk-table-hover">
+                    <thead>
+                    <tr>
+                        <th>Logo</th>
+                        <th>Name</th>
+                        <th *ngIf="stakeholderType === 'funder'">Type</th>
+                        <th *ngIf="hasPublications"># of Publications</th>
+                        <th *ngIf="hasOpenAccess" class="uk-flex uk-flex-middle">
+                            <icon [name]="'open_access'" [flex]="true" [ratio]="0.8" class="open-access"></icon>
+                            <span class="uk-margin-xsmall-left">Open Access with Licence ({{year}})</span>
+                        </th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr *ngFor="let item of filteredStakeholders.slice((currentPage-1)*pageSize, currentPage*pageSize)"
+                        class="clickable" [routerLink]="['./', item.alias]">
+                        <td>
+                            <div class="uk-flex uk-flex-middle uk-height-xsmall uk-margin-left">
+                                <img *ngIf="item.logoUrl; else elseBlock" [src]="item | logoUrl"
+                                     [alt]="item.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply"
+                                     style="max-width: 140px;">
+                                <ng-template #elseBlock>
+                                    <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo"
+                                         class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 140px;">
+                                </ng-template>
+                            </div>
+                        </td>
+                        <td>
+                            <div class="uk-text-truncate uk-text-capitalize uk-text-italic uk-text-small uk-text-bold uk-width-large"
+                                 [title]="item.name">
+                                {{ item.name }}
+                            </div>
+                        </td>
+                        <td *ngIf="stakeholderType === 'funder'">
+                            <div *ngIf="item.funderType" class="uk-text-small uk-text-bold uk-text-capitalize">
+                                {{ getFunderTypeLabel(item.funderType) }}
+                            </div>
+                        </td>
+                        <td *ngIf="hasPublications">
+                            <div *ngIf="item.publications > 0"
+                                 class="uk-text-truncate uk-text-capitalize uk-text-italic uk-text-small uk-text-bold"
+                                 [title]="item.name">
+                                {{ item.publications | number }}
+                            </div>
+                            <div *ngIf="!item.publications">--</div>
+                        </td>
+                        <td *ngIf="hasOpenAccess">
+                            <div *ngIf="item.openAccess" class="uk-width-xsmall uk-margin-left">
+                                <div class="uk-text-center uk-text-bold">
+                                    <span class="uk-text-small">{{item.openAccess.toFixed(1)}}</span>
+                                    <span class="uk-text-xsmall">%</span>
+                                </div>
+                                <progress class="uk-progress open-access uk-margin-xsmall-top uk-margin-xsmall-bottom"
+                                          [value]="item.openAccess" max="100"></progress>
+                            </div>
+                            <div *ngIf="!item.openAccess">--</div>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </ng-template>
+    </div>
 </div>

src/app/shared/browse-stakeholders/browse-stakeholders.component.ts

@@ -1,22 +1,73 @@
 import {ChangeDetectorRef, Component} from "@angular/core";
 import {ActivatedRoute, Router} from "@angular/router";
-import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeholder.service";
 import {LayoutService} from "src/app/openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
 import {FormBuilder} from "@angular/forms";
-import {BrowseStakeholderBaseComponent} from "../browse-stakeholder-base.component";
+import {IrishMonitorService} from "../irish-monitor.service";
+import {StakeholderExtended} from "../irish";
+import {Option} from "../../openaireLibrary/sharedComponents/input/input.component";
+import {
+  BrowseStakeholderBaseComponent
+} from "../../openaireLibrary/monitor/browse-stakeholder/browse-stakeholder-base.component";
 
 @Component({
   selector: 'browse-stakeholder',
   templateUrl: 'browse-stakeholders.component.html'
 })
-export class BrowseStakeholdersComponent extends BrowseStakeholderBaseComponent {
+export class BrowseStakeholdersComponent extends BrowseStakeholderBaseComponent<StakeholderExtended> {
+  sortOptions: Option[] = [
+    {value: null, label: 'Number of Publications'},
+    {value: 'openAccess', label: 'Open Access'},
+    {value: 'alphAsc', label: 'Alphabetically Asc. (A-Z)'},
+    {value: 'alphDsc', label: 'Alphabetically Dsc. (Z-A)'},
+  ];
 
   constructor(protected _route: ActivatedRoute,
               protected _router: Router,
-              protected stakeholderService: StakeholderService,
+              protected irishMonitorService: IrishMonitorService,
               protected layoutService: LayoutService,
               protected cdr: ChangeDetectorRef,
               protected fb: FormBuilder) {
     super();
   }
+
+  init() {
+    this.subscriptions.push(this.irishMonitorService.getStakeholders(this.stakeholderType).subscribe(stakeholders => {
+      this.stakeholders = stakeholders;
+      this.filteredStakeholders = stakeholders;
+      this.hasPublications = this.stakeholders.length > 0 && this.stakeholders.filter(stakeholder => stakeholder.publications > 0).length > 0;
+      this.hasOpenAccess = this.stakeholders.length > 0 && this.stakeholders.filter(stakeholder => stakeholder.openAccess > 0).length > 0;
+      if(!this.hasPublications) {
+        this.sortOptions = this.sortOptions.filter(option => !!option.value);
+        if(!this.hasOpenAccess) {
+          this.sortOptions = this.sortOptions.filter(option => option.value === 'openAccess');
+          this.sortBy = 'alphAsc';
+        } else {
+          this.sortBy = 'openAccess';
+        }
+      }
+      this.sortByChanged();
+      this.filtering(this.keywordControl.value);
+    }));
+  }
+
+  sortByChanged() {
+    switch(this.sortBy) {
+      case 'alphAsc':
+        this.stakeholders = this.stakeholders.sort((a, b) => a['name'].localeCompare(b['name']));
+        break;
+      case 'alphDsc':
+        this.stakeholders = this.stakeholders.sort((a, b) => b['name'].localeCompare(a['name']));
+        break;
+      case 'openAccess':
+        this.stakeholders = this.stakeholders.sort((a, b) => b.openAccess - a.openAccess);
+        break;
+      default:
+        this.stakeholders = this.stakeholders.sort((a, b) => b.publications - a.publications);
+        break;
+    }
+  }
+
+  get year() {
+    return (new Date().getFullYear() - 1).toString();
+  }
 }

src/app/shared/help-pop-up/help-pop-up.component.html

@@ -0,0 +1,36 @@
+<div id="help-pop-up">
+  <button class="uk-button uk-button-primary uk-box-shadow-default uk-box-shadow-default-hover uk-flex uk-flex-middle" (click)="helpPopUpClicked = true">
+    <icon *ngIf="!showDrop" name="help_outline" [flex]="true"></icon>
+    <icon *ngIf="showDrop" name="close" [flex]="true"></icon>
+    <span class="uk-margin-small-left">Help</span>
+  </button>
+  <div #drop id="pop-up" class="uk-drop" uk-drop="mode: click; pos: top-right; offset: 20">
+    <div *ngIf="helpPopUpClicked" class="uk-card uk-card-default uk-card-body uk-box-shadow-default">
+      <div class="uk-flex uk-flex-top uk-margin-medium-bottom">
+        <icon name="ondemand_video" flex="true" customClass="uk-text-primary"></icon>
+        <div class="uk-margin-small-left">
+          <p class="uk-text-bold uk-margin-small-bottom">Basic interactivity functions</p>
+          <a class="uk-link-reset" (click)="openGuideModal()">
+            <img src="assets/irish-assets/interactive_functions_preview.png" alt="Basic interactive functions" loading="lazy">
+          </a>
+        </div>
+      </div>
+      <a routerLink="/methodology/terminology" target="_blank" class="uk-link-reset">
+        <div class="uk-flex uk-flex-top uk-margin-medium-bottom">
+          <icon name="info" flex="true" customClass="uk-text-primary"></icon>
+          <div class="uk-margin-small-left">
+            <p class="uk-text-bold uk-margin-xsmall-bottom">Terminology and construction</p>
+            <span class="uk-text-small uk-text-meta">Do you have questions on our terminology?</span>
+          </div>
+        </div>
+      </a>
+      <contact [page]="false"></contact>
+    </div>
+  </div>
+</div>
+
+<modal-alert #guideModal [large]="true">
+  <div>
+    <img src="assets/irish-assets/interactive_functions.gif" alt="Basic interactive functions">
+  </div>
+</modal-alert>

src/app/shared/help-pop-up/help-pop-up.component.less

@@ -0,0 +1,15 @@
+@import (reference) "~src/assets/openaire-theme/less/_import-variables";
+
+#help-pop-up {
+	position: fixed;
+	bottom: 5vh;
+	right: 5vw;
+	z-index: @global-z-index - 20;
+
+	.uk-drop {
+		max-height: 550px;
+    	height: 385px;
+		max-width: 80vw;
+		width: 400px;
+	}
+}

src/app/shared/help-pop-up/help-pop-up.component.ts

@@ -0,0 +1,39 @@
+import {Component, ElementRef, OnInit, ViewChild} from "@angular/core";
+import {AlertModal} from "../../openaireLibrary/utils/modal/alert";
+
+declare var UIkit;
+
+@Component({
+  selector: 'help-pop-up',
+  templateUrl: 'help-pop-up.component.html',
+  styleUrls: ['help-pop-up.component.less']
+})
+export class HelpPopUpComponent implements OnInit {
+  private subscriptions: any[] = [];
+  isClient: boolean = false;
+  helpPopUpClicked: boolean = false;
+  showDrop: boolean = false;
+  @ViewChild('drop') drop: ElementRef;
+  @ViewChild('guideModal', { static: true }) guideModal: AlertModal;
+
+  ngOnInit() {
+    this.isClient = typeof document !== 'undefined';
+    if(this.isClient) {
+      this.subscriptions.push(UIkit.util.on(document, 'show', '#pop-up', (event) => {
+        this.showDrop = true;
+      }));
+      this.subscriptions.push(UIkit.util.on(document, 'hide', '#pop-up', (event) => {
+        this.showDrop = false;
+      }));
+    }
+  }
+
+  openGuideModal() {
+    this.guideModal.alertMessage = false;
+    this.guideModal.alertHeader = false;
+    this.guideModal.alertFooter = false;
+    this.guideModal.cancelButton = false;
+    this.guideModal.okButton = false;
+    this.guideModal.open();
+  }
+}

src/app/shared/help-pop-up/help-pop-up.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {AppRoutingModule} from '../../app-routing.module';
+import {IconsModule} from '../../openaireLibrary/utils/icons/icons.module';
+import {HelpPopUpComponent} from './help-pop-up.component';
+import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
+import {ContactModule} from '../../contact/contact.module';
+
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, AppRoutingModule, IconsModule, ContactModule, AlertModalModule
+  ],
+  declarations: [
+    HelpPopUpComponent
+  ],
+  providers:[],
+  exports: [
+    HelpPopUpComponent
+  ]
+})
+export class HelpPopUpModule {
+}

src/app/shared/irish-monitor.service.ts

@@ -0,0 +1,35 @@
+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {StakeholderExtended} from "./irish";
+import {properties} from "../../environments/environment";
+import {Stakeholder, StakeholderType} from "../openaireLibrary/monitor/entities/stakeholder";
+import {CustomOptions} from "../openaireLibrary/services/servicesUtils/customOptions.class";
+import {catchError, map} from "rxjs/operators";
+import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
+import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class IrishMonitorService {
+
+
+  constructor(private http: HttpClient,
+              private stakeholderService: StakeholderService) {
+  }
+
+  public getStakeholder(id: string): Observable<StakeholderExtended> {
+    return this.http.get<StakeholderExtended>(properties.monitorServiceAPIURL + 'extended/' + id, CustomOptions.registryOptions()).pipe(map(stakeholder => {
+      return HelperFunctions.copy(Stakeholder.checkIsUpload(stakeholder));
+    }));
+  }
+
+  public getStakeholders(type: StakeholderType): Observable<StakeholderExtended[]> {
+    return this.http.get<StakeholderExtended[]>(properties.monitorServiceAPIURL + 'extended?type=' + type, CustomOptions.registryOptions()).pipe(catchError(err => {
+      return this.stakeholderService.getStakeholders(type, null);
+    }), map(stakeholders => {
+      return HelperFunctions.copy(Stakeholder.checkIsUpload(stakeholders));
+    }));
+  }
+}

src/app/shared/irish.ts

@@ -2,44 +2,229 @@ import {Portal} from "../openaireLibrary/utils/entities/adminTool/portal";
 import {StakeholderConfiguration} from "../openaireLibrary/monitor-admin/utils/indicator-utils";
 import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
 import {Role} from "../openaireLibrary/login/utils/helper.class";
+import {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
+import {LinksResolver} from "../search/links-resolver";
+import {BelongsTo} from "../openaireLibrary/utils/entities/resultLandingInfo";
+import {properties} from "../../environments/environment";
+import {OpenaireEntities} from "../openaireLibrary/utils/properties/searchFields";
 
 export class Irish {
+  public static irishAdminToolsPortalType = "country";
+  public static irishAdminToolsCommunity = "irish";
   public static METADATA_PREFIX = '';
 
-  public portal: Portal = Portal.getMockCommunityInfo("noami", "Noami",['service'],['/search/advanced/services', '/search/find/services']);
+  public portal: Portal = Portal.getMockCommunityInfo("noami", "Noami", ['service'], ['/search/advanced/services', '/search/find/services']);
 
   constructor() {
+    LinksResolver.resetProperties();
+
+    Role.ROLES.manager = 'primary dashboard manager';
+    Role.ROLES.member = 'manager';
+
     StakeholderConfiguration.ENTITIES.stakeholder = 'Monitor';
-    StakeholderConfiguration.ENTITIES.stakeholders  = 'Monitors';
-    StakeholderConfiguration.ENTITIES.funder  = 'RFO';
-    StakeholderConfiguration.ENTITIES.funders  = 'RFOs';
+    StakeholderConfiguration.ENTITIES.stakeholders = 'Monitors';
+    StakeholderConfiguration.ENTITIES.funder = 'RFO';
+    StakeholderConfiguration.ENTITIES.funders = 'RFOs';
     StakeholderConfiguration.ENTITIES.organization = 'RPO';
     StakeholderConfiguration.ENTITIES.organizations = 'RPOs';
     StakeholderConfiguration.ENTITIES.datasource = 'Repository';
     StakeholderConfiguration.ENTITIES.datasources = 'Repositories';
+    StakeholderConfiguration.ENTITIES.datasource = 'Repository';
+    StakeholderConfiguration.ENTITIES.researcher = 'Researcher';
+    StakeholderConfiguration.ENTITIES.researchers = 'Researchers';
+
+    StakeholderConfiguration.STAKEHOLDER_CATEGORIES = [
+      {name: 'All', plural: 'All', value: 'all'},
+      {name: 'Template', plural: 'Templates', value: 'templates'},
+      {name: 'Monitor', plural: 'Monitors', value: 'standalone'},
+    ];
 
     StakeholderConfiguration.TYPES = [
       {value: 'funder', label: StakeholderConfiguration.ENTITIES.funder},
       {value: 'organization', label: StakeholderConfiguration.ENTITIES.organization},
       {value: 'country', label: StakeholderConfiguration.ENTITIES.country},
-      {value: 'datasource', label: StakeholderConfiguration.ENTITIES.datasource}
+      {value: 'datasource', label: StakeholderConfiguration.ENTITIES.datasource},
+      {value: 'researcher', label: StakeholderConfiguration.ENTITIES.researcher}
     ];
 
     StakeholderConfiguration.FUNDER_TYPES = [
-        {value: null, label: 'None'},
-        {value: 'private', label: 'Private'},
-        {value: 'government', label: 'Government'}
+      {value: null, label: 'None'},
+      {value: 'private', label: 'Private'},
+      {value: 'government', label: 'Government'}
     ];
 
     StakeholderConfiguration.VISIBILITIES = [
       {icon: 'earth', value: "PUBLIC", label: 'Public'},
     ];
 
-    StakeholderConfiguration.CACHE_INDICATORS = false;
+    StakeholderConfiguration.CACHE_INDICATORS = true;
 
     LayoutService.HEADER_HEIGHT = '60px';
 
     Role.GROUP = 'irish.';
+
+    /** OA Indicator */
+    Irish.initializeOAIndicators();
+
+    /* Landing belongs to*/
+    BelongsTo.result = {
+      fields: [
+        {path: ['countries'], value: 'Ireland'},
+        {path: ['organizations', 'country'], value: 'Ireland'},
+        {path: ['fundedByProjects', 'funderJurisdiction'], value: 'IE'}
+      ],
+      message: 'This ((result)) is not specific to Ireland. For more details, please visit ' +
+          '<a href="https://' + (properties.environment !== 'production' ? 'beta.' : '') + 'explore.openaire.eu/search/result?((type_id))=((id))" target="_blank">OpenAIRE Explore.</a>'
+    };
+    BelongsTo.project = {
+      fields: [
+        {path: ['organizations', 'country'], value: 'Ireland'},
+        {path: ['funding', 'funderJurisdiction'], value: 'IE'}
+      ],
+      message: 'This ' + OpenaireEntities.PROJECT + ' is not specific to Ireland. For more details, please visit ' +
+          '<a href="https://' + (properties.environment !== 'production' ? 'beta.' : '') + 'explore.openaire.eu/search/project?projectId=((id))" target="_blank">OpenAIRE Explore.</a>'
+    };
+    BelongsTo.organization = {
+      fields: [
+        {path: ['country'], value: 'Ireland'}
+      ],
+      message: 'This ' + OpenaireEntities.ORGANIZATION + ' is not specific to Ireland. For more details, please visit ' +
+          '<a href="https://' + (properties.environment !== 'production' ? 'beta.' : '') + 'explore.openaire.eu/search/organization?organizationId=((id))" target="_blank">OpenAIRE Explore.</a>'
+    };
+    BelongsTo.datasource = {
+      fields: [
+        {path: ['countries'], value: 'Ireland'}
+      ],
+      message: 'This ' + OpenaireEntities.DATASOURCE + ' is not specific to Ireland. For more details, please visit ' +
+          '<a href="https://' + (properties.environment !== 'production' ? 'beta.' : '') + 'explore.openaire.eu/search/dataprovider?datasourceId=((id))" target="_blank">OpenAIRE Explore.</a>'
+    };
   }
 
+  public static initializeOAIndicators(): void {
+    StakeholderConfiguration.openAccess.set('country', {
+      numerator: {
+        "type": null,
+        "format": "NUMBER",
+        "source": "stats-tool",
+        "url": "raw?json=",
+        "jsonPath": ["data", "0", "0", "0"],
+        "chartObject": "{\"verbose\":false,\"series\":[{\"query\":{\"parameters\":[],\"select\":[{\"field\":\"publication\",\"aggregate\":\"count\"}],\"filters\":[{\"groupFilters\":[{\"field\":\"publication.indi_result_oa_with_license.oa_with_license\",\"type\":\"=\",\"values\":[\"1\"]},{\"field\":\"publication.result_refereed.refereed\",\"type\":\"=\",\"values\":[\"peerReviewed\"]}],\"op\":\"AND\"}],\"entity\":\"publication\",\"profile\":\"ie_monitor\",\"limit\":\"30\"}}]}",
+        "parameters": {},
+        "filters": {},
+        "filtersApplied": 0
+      },
+      denominator: {
+        "type": null,
+        "format": "NUMBER",
+        "source": "stats-tool",
+        "url": "raw?json=",
+        "jsonPath": ["data", "0", "0", "0"],
+        "chartObject": "{\"verbose\":false,\"series\":[{\"query\":{\"parameters\":[],\"select\":[{\"field\":\"publication\",\"aggregate\":\"count\"}],\"filters\":[{\"groupFilters\":[{\"field\":\"publication.result_refereed.refereed\",\"type\":\"=\",\"values\":[\"peerReviewed\"]}],\"op\":\"AND\"}],\"entity\":\"publication\",\"profile\":\"ie_monitor\",\"limit\":\"30\"}}]}",
+        "parameters": {},
+        "filters": {},
+        "filtersApplied": 0
+      }
+    });
+    StakeholderConfiguration.openAccess.set('organization', {
+      numerator: {
+        "type": null,
+        "format": "NUMBER",
+        "source": "stats-tool",
+        "url": "raw?json=",
+        "jsonPath": ["data", "0", "0", "0"],
+        "chartObject": "{\"verbose\":false,\"series\":[{\"query\":{\"parameters\":[],\"select\":[{\"field\":\"publication\",\"aggregate\":\"count\"}],\"filters\":[{\"groupFilters\":[{\"field\":\"publication.organization.id\",\"type\":\"=\",\"values\":[\"((__index_id__))\"]},{\"field\":\"publication.result_refereed.refereed\",\"type\":\"=\",\"values\":[\"peerReviewed\"]},{\"field\":\"publication.indi_result_oa_with_license.oa_with_license\",\"type\":\"=\",\"values\":[\"1\"]}],\"op\":\"AND\"}],\"entity\":\"publication\",\"profile\":\"((__profile__))\",\"limit\":\"30\"}}]}",
+        "parameters": {},
+        "filters": {},
+        "filtersApplied": 0
+      },
+      denominator: {
+        "type": null,
+        "format": "NUMBER",
+        "source": "stats-tool",
+        "url": "raw?json=",
+        "jsonPath": ["data", "0", "0", "0"],
+        "chartObject": "{\"verbose\":false,\"series\":[{\"query\":{\"parameters\":[],\"select\":[{\"field\":\"publication\",\"aggregate\":\"count\"}],\"filters\":[{\"groupFilters\":[{\"field\":\"publication.organization.id\",\"type\":\"=\",\"values\":[\"((__index_id__))\"]},{\"field\":\"publication.result_refereed.refereed\",\"type\":\"=\",\"values\":[\"peerReviewed\"]}],\"op\":\"AND\"}],\"entity\":\"publication\",\"profile\":\"((__profile__))\",\"limit\":\"30\"}}]}",
+        "parameters": {},
+        "filters": {},
+        "filtersApplied": 0
+      }
+    });
+    StakeholderConfiguration.openAccess.set('funder', {
+      numerator: {
+        "type": null,
+        "format": "NUMBER",
+        "source": "stats-tool",
+        "url": "raw?json=",
+        "jsonPath": ["data", "0", "0", "0"],
+        "chartObject": "{\"verbose\":false,\"series\":[{\"query\":{\"parameters\":[],\"select\":[{\"field\":\"publication\",\"aggregate\":\"count\"}],\"filters\":[{\"groupFilters\":[{\"field\":\"publication.project.funder.id\",\"type\":\"=\",\"values\":[\"((__index_id__))\"]},{\"field\":\"publication.indi_result_oa_with_license.oa_with_license\",\"type\":\"=\",\"values\":[\"1\"]}],\"op\":\"AND\"}],\"entity\":\"publication\",\"profile\":\"((__profile__))\",\"limit\":\"30\"}}]}",
+        "parameters": {},
+        "filters": {},
+        "filtersApplied": 0
+      },
+      denominator: {
+        "type": null,
+        "format": "NUMBER",
+        "source": "stats-tool",
+        "url": "raw?json=",
+        "jsonPath": ["data", "0", "0", "0"],
+        "chartObject": "{\"verbose\":false,\"series\":[{\"query\":{\"parameters\":[],\"select\":[{\"field\":\"publication\",\"aggregate\":\"count\"}],\"filters\":[{\"groupFilters\":[{\"field\":\"publication.project.funder.id\",\"type\":\"=\",\"values\":[\"((__index_id__))\"]},{\"field\":\"publication.result_refereed.refereed\",\"type\":\"=\",\"values\":[\"peerReviewed\"]}],\"op\":\"AND\"}],\"entity\":\"publication\",\"profile\":\"((__profile__))\",\"limit\":\"30\"}}]}",
+        "parameters": {},
+        "filters": {},
+        "filtersApplied": 0
+      }
+    });
+    StakeholderConfiguration.openAccess.set('researcher', {
+      numerator: {
+        "type": null,
+        "format": "NUMBER",
+        "source": "stats-tool",
+        "url": "raw?json=",
+        "jsonPath": ["data", "0", "0", "0"],
+        "chartObject": "{\"verbose\":false,\"series\":[{\"query\":{\"parameters\":[],\"select\":[{\"field\":\"publication\",\"aggregate\":\"count\"}],\"filters\":[{\"groupFilters\":[{\"field\":\"publication.result_orcid.orcid\",\"type\":\"=\",\"values\":[\"((__index_id__))\"]},{\"field\":\"publication.result_refereed.refereed\",\"type\":\"=\",\"values\":[\"peerReviewed\"]},{\"field\":\"publication.indi_result_oa_with_license.oa_with_license\",\"type\":\"=\",\"values\":[\"1\"]}],\"op\":\"AND\"}],\"entity\":\"publication\",\"profile\":\"((__profile__))\",\"limit\":\"30\"}}]}",
+        "parameters": {"statsProfile": "openaire_stats"},
+        "filters": {},
+        "filtersApplied": 0
+      },
+      denominator: {
+        "type": null,
+        "format": "NUMBER",
+        "source": "stats-tool",
+        "url": "raw?json=",
+        "jsonPath": ["data", "0", "0", "0"],
+        "chartObject": "{\"verbose\":false,\"series\":[{\"query\":{\"parameters\":[],\"select\":[{\"field\":\"publication\",\"aggregate\":\"count\"}],\"filters\":[{\"groupFilters\":[{\"field\":\"publication.result_orcid.orcid\",\"type\":\"=\",\"values\":[\"((__index_id__))\"]},{\"field\":\"publication.result_refereed.refereed\",\"type\":\"=\",\"values\":[\"peerReviewed\"]}],\"op\":\"AND\"}],\"entity\":\"publication\",\"profile\":\"((__profile__))\",\"limit\":\"30\"}}]}",
+        "parameters": {"statsProfile": "openaire_stats"},
+        "filters": {},
+        "filtersApplied": 0
+      }
+    });
+    StakeholderConfiguration.openAccess.set('datasource', {
+      numerator: {
+        "type": null,
+        "format": "NUMBER",
+        "source": "stats-tool",
+        "url": "raw?json=",
+        "jsonPath": ["data", "0", "0", "0"],
+        "chartObject": "{\"verbose\":false,\"series\":[{\"query\":{\"parameters\":[],\"select\":[{\"field\":\"publication\",\"aggregate\":\"count\"}],\"filters\":[{\"groupFilters\":[{\"field\":\"publication.datasource.id\",\"type\":\"=\",\"values\":[\"((__index_id__))\"]},{\"field\":\"publication.result_refereed.refereed\",\"type\":\"=\",\"values\":[\"peerReviewed\"]},{\"field\":\"publication.indi_result_oa_with_license.oa_with_license\",\"type\":\"=\",\"values\":[\"1\"]}],\"op\":\"AND\"}],\"entity\":\"publication\",\"profile\":\"((__profile__))\",\"limit\":\"30\"}}]}",
+        "parameters": {},
+        "filters": {},
+        "filtersApplied": 0
+      },
+      denominator: {
+        "type": null,
+        "format": "NUMBER",
+        "source": "stats-tool",
+        "url": "raw?json=",
+        "jsonPath": ["data", "0", "0", "0"],
+        "chartObject": "{\"verbose\":false,\"series\":[{\"query\":{\"parameters\":[],\"select\":[{\"field\":\"publication\",\"aggregate\":\"count\"}],\"filters\":[{\"groupFilters\":[{\"field\":\"publication.datasource.id\",\"type\":\"=\",\"values\":[\"((__index_id__))\"]},{\"field\":\"publication.result_refereed.refereed\",\"type\":\"=\",\"values\":[\"peerReviewed\"]}],\"op\":\"AND\"}],\"entity\":\"publication\",\"profile\":\"((__profile__))\",\"limit\":\"30\"}}]}",
+        "parameters": {},
+        "filters": {},
+        "filtersApplied": 0
+      }
+    });
+  }
+}
+
+export class StakeholderExtended extends Stakeholder {
+  publications: number;
+  openAccess: number;
 }

src/app/shared/monitor/monitor.component.html

@@ -1,5 +1,12 @@
 <div page-content [border]="isMobile">
     <div class="uk-margin-top" actions>
+        <div class="uk-margin-bottom uk-flex uk-flex-middle">
+            <div class="uk-width-expand">
+                <ng-container *ngTemplateOutlet="selected_filters_pills"></ng-container>
+            </div>
+            <a *ngIf="countSelectedFilters() > 1" class="uk-text-small uk-margin-small-left" (click)="clearAll()"> Clear
+                All </a>
+        </div>
         <div *ngIf="activeCategory && countSubCategoriesToShow(activeCategory) > 0" [class.uk-margin-bottom]="isMobile">
             <slider-tabs *ngIf="stakeholder && !loading && activeTopic" [border]="!isMobile" [type]="'dynamic'">
                 <ng-template ngFor [ngForOf]="activeCategory.subCategories" let-subCategory>
@@ -13,178 +20,216 @@
         </div>
     </div>
     <div inner>
-        <div *ngIf="!activeSubCategory" class="message">
-            No {{entities.stakeholder}} yet.
+        <loading *ngIf="loading" class="uk-margin-top"></loading>
+        <div *ngIf="!activeSubCategory && !loading" class="message">
+            No {{ entities.stakeholder }} yet.
         </div>
-        <div *ngIf="activeSubCategory" class="uk-section">
-            <ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
-                <div *ngIf="!isMobile" class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom" uk-grid uk-height-match="target: .uk-card">
-                    <h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h5>
-                    <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
-                        <div *ngIf="hasPermission(indicator.visibility)"
-                             [ngClass]="getNumberClassBySize(indicator.width)">
-                            <div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
-                                 [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
-                                <div *ngIf="!indicator.overlay">
-                                    <div class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
-                                    <div class="number uk-text-small uk-text-bold">
-                                      <span *ngIf="numberResults.get(i + '-' + j)"
-                                            [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
-                                      <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
+        <div *ngIf="activeSubCategory" class="uk-section-small">
+            <div *ngIf="activeSubCategory.description" [innerHTML]="activeSubCategory.description"
+                 class="uk-margin-medium-bottom">
+            </div>
+            <div [class.uk-margin-large-bottom]="activeSubCategory.numbers.length > 0 && !tabs">
+                <ng-container *ngFor="let number of activeSubCategory.numbers; let i = index;">
+                    <div *ngIf="!isMobile" class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom" uk-grid
+                         uk-height-match="target: .uk-card">
+                        <h5 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{ number.title }}</h5>
+                        <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
+                            <div *ngIf="hasPermission(indicator.visibility)"
+                                 [ngClass]="getNumberClassBySize(indicator.width)">
+                                <div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"
+                                     [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
+                                    <div *ngIf="!indicator.overlay">
+                                        <div class="uk-text-small uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{ indicator.name }}</div>
+                                        <div class="number uk-text-small uk-text-bold">
+                                  <span *ngIf="numberResults.get(i + '-' + j + '-0')"
+                                        [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j + '-0') | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j + '-0') | numberPercentage: stakeholder.locale))"></span>
+                                            <span *ngIf="!numberResults.get(i + '-' + j + '-0')">--</span>
+                                        </div>
+                                        <div *ngIf="indicator.description || indicator.additionalDescription"
+                                             class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right uk-visible@m">
+                                            <a class="uk-display-inline-block uk-button uk-button-link"
+                                               uk-tooltip="Note"
+                                               (click)="changeOverlay($event, indicator, 'description')">
+                                        <span class="uk-flex uk-flex-middle">
+                                          <icon name="analytics" type="outlined" [flex]="true"></icon>
+                                        </span>
+                                            </a>
+                                        </div>
                                     </div>
-                                    <div *ngIf="indicator.description || indicator.additionalDescription"
-                                         class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right uk-visible@m">
-                                        <a class="uk-display-inline-block uk-button uk-button-link" uk-tooltip="Note"
-                                           (click)="toggleOverlay($event, indicator, 'desc')">
-                                            <span class="uk-flex uk-flex-middle">
-                                              <icon name="analytics" type="outlined" [flex]="true"></icon>
-                                            </span>
-                                        </a>
-                                    </div>
-                                </div>
-                                <div *ngIf="indicator.overlay && (indicator.description || indicator.additionalDescription)" click-outside-or-esc class="uk-overflow-auto" (clickOutside)="closeOverlay($event, indicator, 'desc')">
-                                    <div class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right">
-                                        <a class="uk-display-inline-block uk-button uk-button-link"
-                                           (click)="toggleOverlay($event, indicator, 'desc')">
-                                            <span class="uk-flex uk-flex-middle">
-                                              <icon name="close" type="outlined" [flex]="true"></icon>
-                                            </span>
-                                        </a>
-                                    </div>
-                                    <div class="uk-margin-small-top uk-margin-right">
-                                        <p *ngIf="indicator.description">
-                                            {{indicator.description}}
-                                        </p>
-                                        <p *ngIf="indicator.additionalDescription">
-                                            {{indicator.additionalDescription}}
-                                        </p>
+                                    <div *ngIf="indicator.overlay && (indicator.description || indicator.additionalDescription)"
+                                         click-outside-or-esc class="uk-overflow-auto"
+                                         (clickOutside)="closeOverlay($event, indicator)">
+                                        <div class="uk-position-top-right uk-text-center uk-margin-small-top uk-margin-small-right">
+                                            <a class="uk-display-inline-block uk-button uk-button-link"
+                                               (click)="changeOverlay($event, indicator, false)">
+                                        <span class="uk-flex uk-flex-middle">
+                                          <icon name="close" type="outlined" [flex]="true"></icon>
+                                        </span>
+                                            </a>
+                                        </div>
+                                        <div class="uk-margin-small-top uk-margin-right">
+                                            <p *ngIf="indicator.description">
+                                                {{ indicator.description }}
+                                            </p>
+                                            <p *ngIf="indicator.additionalDescription">
+                                                {{ indicator.additionalDescription }}
+                                            </p>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
+                        </ng-template>
+                    </div>
+                    <div *ngIf="isMobile">
+                        <h6 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{ number.title }}</h6>
+                        <div class="uk-card uk-card-default uk-padding-small number-card">
+                            <div class="uk-grid uk-grid-small uk-child-width-1-1" uk-grid>
+                                <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
+                                    <div *ngIf="hasPermission(indicator.visibility)"
+                                         [ngClass]="getNumberClassBySize(indicator.width)">
+                                        <div [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
+                                            <div *ngIf="!indicator.overlay">
+                                                <div
+                                                        class="uk-text-xsmall uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{ indicator.name }}
+                                                </div>
+                                                <div class="number uk-text-small uk-text-bold">
+                      <span *ngIf="numberResults.get(i + '-' + j + '-0')"
+                            [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j + '-0') | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j + '-0') | numberPercentage: stakeholder.locale))"></span>
+                                                    <span *ngIf="!numberResults.get(i + '-' + j + '-0')">--</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </ng-template>
+                            </div>
                         </div>
-                    </ng-template>
-                </div>
-                <div *ngIf="isMobile">
-                    <h6 *ngIf="number.title" class="uk-width-1-1 uk-margin-bottom">{{number.title}}</h6>
-                    <div class="uk-card uk-card-default uk-padding-small number-card">
-                        <div class="uk-grid uk-grid-small uk-child-width-1-1" uk-grid>
-                            <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
-                                <div *ngIf="hasPermission(indicator.visibility)" [ngClass]="getNumberClassBySize(indicator.width)">
-                                    <div [class.semiFiltered]="indicator.indicatorPaths[0].filtersApplied < countSelectedFilters()">
-                                        <div *ngIf="!indicator.overlay">
-                                            <div
-                                                    class="uk-text-xsmall uk-text-truncate uk-margin-xsmall-bottom uk-margin-right">{{indicator.name}}</div>
-                                            <div class="number uk-text-small uk-text-bold">
-                          <span *ngIf="numberResults.get(i + '-' + j)"
-                                [innerHTML]="(indicator.indicatorPaths[0].format == 'NUMBER'?(numberResults.get(i + '-' + j) | numberRound: 2:1:stakeholder.locale):(numberResults.get(i + '-' + j) | numberPercentage: stakeholder.locale))"></span>
-                                                <span *ngIf="!numberResults.get(i + '-' + j)">--</span>
+                    </div>
+                </ng-container>
+            </div>
+            <div [class.section-container]="tabs">
+                <ul *ngIf="tabs" class="tabs">
+                    <li *ngFor="let tab of activeSubCategory.charts; let i = index;"
+                        [class.uk-active]="i === activeChartSectionIndex"
+                        (click)="changeSection(i)" class="uk-text-truncate" [attr.uk-tooltip]="getSectionTitle(tab)">
+                        {{ getSectionTitle(tab) }}
+                    </li>
+                </ul>
+                <div *ngIf="chart"
+                     class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid
+                     uk-height-match="target: .uk-card">
+                    <h5 *ngIf="chart.title && !isMobile && !tabs"
+                        class="uk-width-1-1 uk-margin-bottom">{{ getSectionTitle(chart) }}</h5>
+                    <div *ngIf="getSectionDescription(chart)"
+                         class="uk-width-1-1 uk-margin-bottom">{{ getSectionDescription(chart) }}
+                    </div>
+                    <h6 *ngIf="chart.title && isMobile && !tabs" class="uk-width-1-1">{{ getSectionTitle(chart) }}</h6>
+                    <ng-container *ngFor="let indicator of chart.indicators; let j=index">
+                        <div *ngIf="hasPermission(indicator.visibility)"
+                             [ngClass]="getChartClassBySize(indicator.width)">
+                            <div class="uk-card uk-card-default uk-position-relative"
+                                 [class.semiFiltered]="getActiveIndicatorPath(indicator).filtersApplied < countSelectedFilters()">
+                                <div class="uk-card-body uk-margin-small-bottom">
+                                    <!-- Main content-->
+                                    <div>
+                                        <h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom">
+                                            {{ indicator.name + " " }}
+                                        </h6>
+                                        <iframe [class.uk-blend-multiply]="!isFullscreen"
+                                                *ngIf=" !properties.disableFrameLoad && getActiveIndicatorPath(indicator).source !== 'image'"
+                                                [src]="getActiveIndicatorPath(indicator).safeResourceUrl"
+                                                class="uk-width-1-1" allowfullscreen="true"
+                                                mozallowfullscreen="true"
+                                                [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
+                                        <div *ngIf="properties.disableFrameLoad && getActiveIndicatorPath(indicator)?.source !=='image'">
+                                            <img class="uk-width-1-1 uk-blend-multiply"
+                                                 [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
+                                                 src="assets/chart-placeholder.png">
+                                        </div>
+                                        <img *ngIf="getActiveIndicatorPath(indicator).source === 'image'"
+                                             [src]="getActiveIndicatorPath(indicator).url"
+                                             class="uk-width-1-1 uk-blend-multiply"
+                                             [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
+                                    </div>
+                                    <!-- Tabs -->
+                                    <slider-tabs [type]="'dynamic'" [flexPosition]="'right'"
+                                                 (activeEmitter)="indicator.activePath = $event"
+                                                 tabsClass="uk-subnav uk-subnav-pill uk-subnav-small"
+                                                 containerClass="uk-margin-top uk-margin-bottom" [border]="false">
+                                        <slider-tab
+                                                *ngFor="let indicatorPath of indicator.indicatorPaths; let i=index"
+                                                [tabTitle]="indicatorPath.parameters.tab ? indicatorPath.parameters.tab : indicatorPath.parameters.title"
+                                                [invisible]="indicator.indicatorPaths.length < 2"
+                                                [tabId]="i" [active]="getActivePathIndex(indicator) == i">
+                                        </slider-tab>
+                                    </slider-tabs>
+                                    <div class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m">
+                                        <a *ngIf="indicator.description || indicator.additionalDescription"
+                                           class="uk-display-inline-block uk-button uk-button-link uk-margin-right"
+                                           (click)="changeOverlay($event, indicator, 'description')">
+                                          <span class="uk-flex uk-flex-middle">
+                                            <icon name="analytics" type="outlined" [flex]="true"></icon>
+                                            <span class="uk-margin-xsmall-left">Note</span>
+                                          </span>
+                                        </a>
+                                        <a class="uk-display-inline-block uk-button uk-button-link"
+                                           (click)="changeOverlay($event, indicator, 'embed')">
+                                            <span class="uk-flex uk-flex-middle">
+                                              <icon name="code" type="outlined" [flex]="true"></icon>
+                                              <span class="uk-margin-xsmall-left">Embed</span>
+                                            </span>
+                                        </a>
+                                    </div>
+                                    <div *ngIf="indicator.overlay"
+                                         class="indicator-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
+                                        <div *ngIf="indicator.overlay == 'description'" class="inner"
+                                             click-outside-or-esc
+                                             (clickOutside)="closeOverlay($event, indicator)">
+                                            <div class="uk-padding-small">
+                                                <div class="uk-flex uk-flex-right">
+                                                    <button class="uk-close uk-icon"
+                                                            (click)="changeOverlay($event, indicator, false)">
+                                                        <icon name="close" ratio="1"></icon>
+                                                    </button>
+                                                </div>
+                                                <div class="uk-padding-small uk-padding-remove-horizontal">
+                                                    <p *ngIf="indicator.description">
+                                                        {{ indicator.description }}
+                                                    </p>
+                                                    <p *ngIf="indicator.additionalDescription">
+                                                        {{ indicator.additionalDescription }}
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div *ngIf="indicator.overlay === 'embed'" class="inner" click-outside-or-esc
+                                             (clickOutside)="closeOverlay($event, indicator)">
+                                            <div class="uk-padding-small">
+                                                <div class="uk-flex uk-flex-right">
+                                                    <button class="uk-close uk-icon"
+                                                            (click)="changeOverlay($event, indicator, false)">
+                                                        <icon name="close" ratio="1"></icon>
+                                                    </button>
+                                                </div>
+                                                <div class="clipboard-wrapper uk-margin-top uk-margin-bottom">
+                                                    <pre id="embed_content_id" class="uk-padding-small"><code>&lt;iframe width="500" height="500" <br> src="{{ getActiveIndicatorPath(indicator).safeResourceUrl.changingThisBreaksApplicationSecurity }}
+                                                        "<br> allowfullscreen="true" mozallowfullscreen="true"&gt;<br>&lt;/iframe&gt;</code></pre>
+                                                </div>
+                                                <div class="uk-flex uk-flex-right">
+                                                    <a class="uk-link-reset copy clipboard_btn"
+                                                       data-clipboard-target="#embed_content_id" title="Copy code">
+                                                        <icon [flex]="true" name="content_copy"></icon>
+                                                    </a>
+                                                </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                            </ng-template>
-                        </div>
-                    </div>
-                </div>
-            </ng-container>
-            <ng-container *ngFor="let chart of activeSubCategory.charts; let i = index;">
-                <div class="uk-grid uk-grid-small uk-grid-match uk-margin-medium-bottom uk-flex uk-flex-middle" uk-grid
-                     uk-height-match="target: .uk-card">
-                    <h5 *ngIf="chart.title && !isMobile" class="uk-width-1-1 uk-margin-bottom">{{chart.title}}</h5>
-                    <h6 *ngIf="chart.title && isMobile" class="uk-width-1-1">{{chart.title}}</h6>
-                    <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
-                        <div *ngIf="hasPermission(indicator.visibility) && chartsActiveType.get(i + '-' + j)"
-                             [ngClass]="getChartClassBySize(indicator.width)">
-                            <div class="uk-card uk-card-default uk-position-relative"
-                                 [class.semiFiltered]="chartsActiveType.get(i + '-' + j).filtersApplied < countSelectedFilters()">
-                                <div class="uk-card-body uk-text-center uk-margin-small-bottom">
-                                    <h6 class="uk-margin-bottom chartTitle uk-flex uk-flex-bottom">
-                                        {{indicator.name + " "}}
-                                    </h6>
-                                    <div *ngIf="indicator.indicatorPaths.length > 1" class="uk-button-group">
-                                        <button *ngFor="let indicatorPath of indicator.indicatorPaths;"
-                                                class="uk-button"
-                                                (click)="setActiveChart(i, j, indicatorPath.type)"
-                                                [class.uk-button-secondary]="chartsActiveType.get(i + '-' + j).url === indicatorPath.url">
-                                            {{indicatorPath.type}}
-                                        </button>
-                                    </div>
-                                    <iframe [class.uk-blend-multiply]="!isFullscreen"
-                                            *ngIf=" !properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'"
-                                            [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
-                                            class="uk-width-1-1" allowfullscreen="true" mozallowfullscreen="true"
-                                            [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"></iframe>
-                                    <div *ngIf="properties.disableFrameLoad && chartsActiveType.get(i + '-' + j).source !== 'image'">
-                                        <img class="uk-width-1-1 uk-blend-multiply"
-                                             [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')"
-                                             src="assets/chart-placeholder.png">
-                                    </div>
-                                    <img *ngIf="chartsActiveType.get(i + '-' + j).source === 'image'"
-                                         [src]="chartsActiveType.get(i + '-' + j).safeResourceUrl"
-                                         class="uk-width-1-1 uk-blend-multiply"
-                                         [ngClass]="'uk-height-' + (indicator.height?indicator.height.toLowerCase():'medium')">
-                                </div>
-                                <div class="uk-position-bottom-left uk-margin-left uk-margin-small-bottom uk-visible@m">
-                                  <a *ngIf="indicator.description || indicator.additionalDescription" 
-                                    class="uk-display-inline-block uk-button uk-button-link"
-                                    (click)="toggleOverlay($event, indicator, 'desc')">
-                                    <span class="uk-flex uk-flex-middle">
-                                      <icon name="analytics" type="outlined" [flex]="true"></icon>
-                                      <span class="uk-margin-small-left">Note</span>
-                                    </span>
-                                  </a>
-                                  <a class="uk-display-inline-block uk-button uk-button-link"
-                                    (click)="toggleOverlay($event, indicator, 'embed')">
-                                    <span class="uk-flex uk-flex-middle">
-                                      <icon name="code" type="outlined" [flex]="true"></icon>
-                                      <span class="uk-margin-small-left">Embed</span>
-                                    </span>
-                                  </a>
-                                </div>
-                                <div *ngIf="indicator.overlay" class="indicator-overlay uk-card uk-card-default uk-flex uk-flex-middle uk-flex-center">
-                                  <div *ngIf="descriptionOverlay" class="inner" click-outside-or-esc
-                                    (clickOutside)="closeOverlay($event, indicator, 'desc')">
-                                    <div class="uk-padding-small">
-                                      <div class="uk-flex uk-flex-right">
-                                        <button class="uk-close uk-icon" (click)="toggleOverlay($event, indicator, 'desc')">
-                                            <icon name="close" ratio="1"></icon>
-                                        </button>
-                                      </div>
-                                      <div class="uk-padding-small uk-padding-remove-horizontal">
-                                        <p *ngIf="indicator.description">
-                                            {{indicator.description}}
-                                        </p>
-                                        <p *ngIf="indicator.additionalDescription">
-                                            {{indicator.additionalDescription}}
-                                        </p>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <div *ngIf="embedOverlay" class="inner" click-outside-or-esc
-                                    (clickOutside)="closeOverlay($event, indicator, 'embed')">
-                                    <div class="uk-padding-small">
-                                      <div class="uk-flex uk-flex-right">
-                                        <button class="uk-close uk-icon" (click)="toggleOverlay($event, indicator, 'embed')">
-                                          <icon name="close" ratio="1"></icon>
-                                        </button>
-                                      </div>
-                                      <div class="clipboard-wrapper uk-margin-top uk-margin-bottom">
-                                        <pre id="embed_content_id" class="uk-padding-small"><code>&lt;iframe width="500" height="500" <br> src="{{chartsActiveType.get(i + '-' + j).safeResourceUrl.changingThisBreaksApplicationSecurity}}" <br> allowfullscreen="true" mozallowfullscreen="true"&gt;<br>&lt;/iframe&gt;</code></pre>
-                                      </div>
-                                      <div class="uk-flex uk-flex-right">
-                                        <a class="uk-link-reset copy clipboard_btn" data-clipboard-target="#embed_content_id" title="Copy code">
-                                          <icon [flex]="true" name="content_copy"></icon>
-                                        </a>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
                             </div>
                         </div>
                         <div class="printGap uk-hidden"></div>
-                    </ng-template>
+                    </ng-container>
                 </div>
-            </ng-container>
+            </div>
         </div>
     </div>
 </div>
@@ -193,13 +238,9 @@
     <icon name="filters" ratio="1.5" visuallyHidden="Filters" gradient="filters_icon"></icon>
     <span [class.uk-hidden]="countSelectedFilters() === 0"
           class="uk-offcanvas-count uk-flex uk-flex-middle uk-flex-center">
-    {{countSelectedFilters()}}
+    {{ countSelectedFilters() }}
   </span>
 </a>
-<a *ngIf="stakeholder" routerLink="/contact-us" id="feedback_switcher_toggle"
-   class="uk-offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-link-reset" uk-tooltip="Give us feedback">
-    <icon name="email" ratio="1.5" [flex]="true" customClass="uk-text-background" visuallyHidden="feedback"></icon>
-</a>
 <div *ngIf="stakeholder" id="style_switcher" class="uk-offcanvas"
      uk-offcanvas="flip:true; overlay: true">
     <div class="uk-offcanvas-bar">
@@ -211,38 +252,45 @@
         <div>
             <div class="uk-flex uk-flex-middle uk-margin-bottom">
                 <h4 class="uk-margin-remove-bottom">Filters</h4>
-                <a *ngIf="countSelectedFilters() > 1" class="uk-text-small uk-margin-left" (click)="clearAll()"> Clear All </a>
+                <a *ngIf="countSelectedFilters() > 1" class="uk-text-small uk-margin-left" (click)="clearAll()"> Clear
+                    All </a>
             </div>
-            <ng-container *ngTemplateOutlet="selected_filters_pills"></ng-container>
-            <ul class="uk-list uk-list-xlarge uk-list-divider  uk-margin-top">
-                <li>
-                    <range-filter #rangeFilter [filter]="periodFilter" yearMin="2000" [yearMax]="currentYear"
-                                  [mandatoryRange]="true"
-                                  (onFilterChange)="filter()"></range-filter>
-                </li>
-                <ng-container *ngFor="let filter of filters ">
-                    <li *ngIf="filter.values.length >0">
-                        <a *ngIf="filter.filterId == 'fos'" class="uk-float-right" href="https://explore.openaire.eu/fields-of-science" target="_blank" uk-tooltip="title:More information about Fields of Science"><span uk-icon="info"></span></a>
-                        <search-filter [filter]="filter" [showResultCount]=false
-                                       (onFilterChange)="filterChanged($event)"></search-filter>
+            <div>
+                <ng-container *ngTemplateOutlet="selected_filters_pills"></ng-container>
+                <ul class="uk-list uk-list-xlarge uk-list-divider  uk-margin-top">
+                    <li>
+                        <range-filter #rangeFilter [filter]="periodFilter" [yearMin]="minYear" [yearMax]="maxYear"
+                                      [mandatoryRange]="true"
+                                      (onFilterChange)="filter()"></range-filter>
                     </li>
-                </ng-container>
-            </ul>
-            <i *ngIf="user || countSelectedFilters() > 0 " class="uk-margin-medium-top uk-text-small uk-display-block">
-                <sup>*</sup> If your filter selection cannot be applied to a chart, that chart will appear grayed-out.
-            </i>
+                    <ng-container *ngFor="let filter of filters ">
+                        <li *ngIf="filter.values.length >0">
+                            <a *ngIf="filter.filterId == 'fos'" class="uk-float-right"
+                               href="https://explore.openaire.eu/fields-of-science" target="_blank"
+                               uk-tooltip="title:More information about Fields of Science"><span uk-icon="info"></span></a>
+                            <search-filter [filter]="filter" [showResultCount]=false
+                                           (onFilterChange)="filterChanged($event)"></search-filter>
+                        </li>
+                    </ng-container>
+                </ul>
+                <i class="uk-margin-medium-top uk-text-small uk-display-block"><sup>*</sup> Publicly-funded information has been curated for IE only.</i>
+                <i class="uk-margin-top uk-text-small uk-display-block">
+                    <sup>*</sup> If your filter selection cannot be applied to a chart, that chart will appear
+                    grayed-out.
+                </i>
+            </div>
         </div>
     </div>
 </div>
 <ng-template #selected_filters_pills>
     <div class="uk-slider filters-slider" uk-slider="finite: true">
         <div [class.uk-invisible]="list.children.length === 0" class="uk-position-relative">
-            <div class="uk-slider-container" style="height: 40px">
+            <div class="uk-slider-container" style="height: 30px">
                 <ul #list class="uk-slider-items uk-grid uk-grid-small uk-margin-small-right uk-flex-nowrap">
                     <li *ngIf="periodFilter.selectedFromAndToValues.length > 0">
-                        <span class="uk-label uk-label-primary uk-flex uk-flex-middle">
+                        <span class="uk-label uk-label-small uk-label-secondary uk-flex uk-flex-middle">
                           <span
-                              class="uk-margin-small-right uk-width-expand uk-text-truncate">{{periodFilter.selectedFromAndToValues}}</span>
+                                  class="uk-margin-small-right uk-width-expand uk-text-truncate">{{ periodFilter.selectedFromAndToValues }}</span>
                           <button [class.uk-disabled]="loading" (click)="clearPeriodFilter()" class="uk-close uk-icon"
                                   [disabled]="loading">
                             <icon name="close" flex="true" ratio="0.7"></icon>
@@ -254,13 +302,24 @@
                             <ng-container *ngFor="let value of filter.values; let i = index;">
                                 <ng-container *ngIf="value.selected">
                                     <li>
-                    <span class="uk-label uk-label-primary uk-flex uk-flex-middle">
-                      <span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{value.name}}</span>
-                      <button [class.uk-disabled]="loading" (click)="clearFilterValue(filter, value)"
-                              class="uk-close uk-icon" [disabled]="loading">
-                        <icon name="close" flex="true" ratio="0.7"></icon>
-                      </button>
-                    </span>
+                                        <span class="uk-label uk-label-small uk-label-secondary uk-flex uk-flex-middle">
+                                          <span class="uk-margin-small-right uk-width-expand uk-text-truncate">
+
+                                          <ng-container
+                                                  *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
+                                               {{ filter.title }}:
+                                              {{ (value.name == 'true' || value.name == 'Yes') ? 'Yes' : 'No' }}
+                                            </ng-container>
+                                            <ng-template #noboolean>
+                                            {{ value.name }}
+                                            </ng-template>
+                                            </span>
+                                          <button [class.uk-disabled]="loading"
+                                                  (click)="clearFilterValue(filter, value)"
+                                                  class="uk-close uk-icon" [disabled]="loading">
+                                            <icon name="close" flex="true" ratio="0.7"></icon>
+                                          </button>
+                                        </span>
                                     </li>
                                 </ng-container>
                             </ng-container>

src/app/shared/monitor/monitor.component.ts

@@ -7,20 +7,22 @@ import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/si
 import {StatisticsService} from "../../openaireLibrary/monitor-admin/utils/services/statistics.service";
 import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeholder.service";
 import {UserManagementService} from "../../openaireLibrary/services/user-management.service";
-import {IndicatorPath, Visibility} from "../../openaireLibrary/monitor/entities/stakeholder";
+import {IndicatorPath, Section, Visibility} from "../../openaireLibrary/monitor/entities/stakeholder";
 import {ActivatedRoute, Router} from "@angular/router";
 import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
 import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
 import {SearchResearchResultsService} from "../../openaireLibrary/services/searchResearchResults.service";
 import {CustomFilterService} from "../../openaireLibrary/shared/customFilter.service";
-import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
-import {Filter} from "../../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class";
+import {Dates, StringUtils} from "../../openaireLibrary/utils/string-utils.class";
+import {Filter, Value} from "../../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class";
+import {SearchFields} from "../../openaireLibrary/utils/properties/searchFields";
 
 @Component({
   selector: 'monitor',
   templateUrl: 'monitor.component.html'
 })
 export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent {
+  activeChartSectionIndex: number = 0;
 
   constructor(protected _route: ActivatedRoute,
               protected _router: Router,
@@ -41,75 +43,120 @@ export class MonitorComponent extends MonitorIndicatorStakeholderBaseComponent {
 
   ngOnInit() {
     super.ngOnInit();
+    this.minYear = Dates.yearMin;
+    this.maxYear = Dates.yearMax;
     this.requireLogin = false;
     this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
       this.user = user;
-      this.subscriptions.push(this._route.params.subscribe(params => {
-        this.loading = true;
-        this.activeTopic = null;
-        this.activeCategory = null;
-        this.activeSubCategory = null;
-        this.numberResults = new Map<string, number>();
-        this.chartsActiveType = new Map<string, IndicatorPath>();
-        this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
-          if (stakeholder) {
-            this.stakeholder = stakeholder;
-
-            this.subscriptions.push(this._route.queryParams.subscribe(queryParams => {
-              this.handleQueryParams(queryParams, params);
-              this.subscriptions.push(this.customFilterService.getCustomFilterAsObservable().subscribe(filters => {
-                if(filters) {
-                  let customFilterParams = "";
-                  for (let customFilter of filters) {
-                    if (customFilter.isHiddenFilter) {
-                      customFilterParams += "&fq=" + StringUtils.URIEncode(customFilter.queryFieldName + " exact " + StringUtils.quote((customFilter.valueId)));
-                    }
-                  }
-                  this.subscriptions.push(this.searchResearchResultsService.advancedSearchResults("publication", null, 1, 0, null, this.properties,
-                    "&refine=true&fields=fos&type=publications", ["fos"], customFilterParams).subscribe(res => {
-                    this.filters = this.postProcessingFosFilters(res[2]);
-                    this.title = this.stakeholder.name;
-                    this.description = this.stakeholder.name;
-                    this.setMetadata();
-                    this.setView(params);
-                  }));
-
+      this.subscriptions.push(this.stakeholderService.getStakeholderAsObservable().subscribe(stakeholder => {
+        if (stakeholder) {
+          this.loading = true;
+          this.stakeholder = stakeholder;
+          this.subscriptions.push(this.customFilterService.getCustomFilterAsObservable().subscribe(filters => {
+            if (filters) {
+              let customFilterParams = "";
+              for (let customFilter of filters) {
+                if (customFilter.isHiddenFilter) {
+                  customFilterParams += "&fq=" + StringUtils.URIEncode(customFilter.queryFieldName + " exact " + StringUtils.quote((customFilter.valueId)));
                 }
+              }
+              this.subscriptions.push(this.searchResearchResultsService.advancedSearchResults("publication", null, 1, 0, null, this.properties,
+                "&refine=true&fields=fos&type=publications", ["fos"], customFilterParams).subscribe(res => {
+                this.init(res[2]);
+              }, error =>{
+                  this.init(null)
               }));
-
-            }));
-          // } else {
-            // this.navigateToError();
-          }
-        }));
+            }
+          }));
+        }
+      }));
+    }));
+  }
+  init(fos){
+    this.filters = this.postProcessingFosFilters(fos);
+    this.title = this.stakeholder.name;
+    this.description = this.stakeholder.name;
+    this.subscriptions.push(this._route.params.subscribe(params => {
+      this.loading = true;
+      this.activeTopic = null;
+      this.activeCategory = null;
+      this.activeSubCategory = null;
+      this.numberResults = new Map<string, number>();
+      this.subscriptions.push(this._route.queryParams.subscribe(queryParams => {
+        this.handleQueryParams(queryParams, params);
+        this.setMetadata();
       }));
     }));
   }
-
   hasPermission(visibility: Visibility): boolean {
     return true;
   }
-  logIn() {
-    this.userManagementService.login();
+
+  protected setIndicators() {
+    this.activeChartSectionIndex = 0;
+    super.setIndicators();
   }
 
   postProcessingFosFilters(refineFilters:Filter[]){
     let filters:Filter[] = [];
-    for(let filter of refineFilters){
-      if(filter.filterId == "fos"){
-        let fos: Filter ={...filter};
-        fos.values = [];
-        for(let value of filter.values){
-          let code = value.id.split(" ")[0];
-          if(code.length <= 4){
-            fos.values.push(value);
+    if(refineFilters) {
+      for (let filter of refineFilters) {
+        if (filter.filterId == "fos") {
+          let fos: Filter = {...filter};
+          fos.values = [];
+          for (let value of filter.values) {
+            let code = value.id.split(" ")[0];
+            if (code.length <= 4) {
+              fos.values.push(value);
+            }
           }
+          fos.countAllValues = fos.values.length;
+          filters.push(fos);
+        } else {
+          filters.push(filter);
         }
-        filters.push(fos);
-      }else{
-        filters.push(filter);
       }
     }
+    let publiclyFunded:Filter = new Filter();
+    publiclyFunded.title =  "Publicly funded";
+
+    publiclyFunded.type = "triplet";
+    publiclyFunded.filterId =  "publiclyfunded";
+  let searchFields: SearchFields = new SearchFields();
+    let data = searchFields.RESULT_STATIC_FIELD_VALUES['publiclyfunded'];
+    for(let i=0; i<data.length; i++) {
+      var value:Value = new Value();
+      value.name = data[i].name;
+      value.number = 0
+      value.id = data[i].id;
+      //if(RefineResultsUtils.includeValue(value)){
+      publiclyFunded.values.push(value);
+      }
+
+    publiclyFunded.type = "triplet";
+
+    filters.push(publiclyFunded)
     return filters;
   }
+
+  get tabs() {
+    return this.activeSubCategory.charts.length > 1;
+  }
+
+  get chart(): Section {
+    return this.activeSubCategory.charts[this.activeChartSectionIndex];
+  }
+
+  changeSection(index: number) {
+    this.activeChartSectionIndex = index;
+    this.cdr.detectChanges();
+  }
+
+  getSectionTitle(section: Section) {
+    return section?.title?section.title.split('::')[0]:null;
+  }
+
+  getSectionDescription(section: Section) {
+    return section?.title?section.title.split('::')[1]:null;
+  }
 }

src/app/shared/monitor/monitor.module.ts

@@ -12,6 +12,7 @@ import {SearchFilterModule} from "../../openaireLibrary/searchPages/searchUtils/
 import {IconsService} from "../../openaireLibrary/utils/icons/icons.service";
 import {filters} from "../../openaireLibrary/utils/icons/icons";
 import {SliderUtilsModule} from "../../openaireLibrary/sharedComponents/slider-utils/slider-utils.module";
+import {LoadingModule} from "../../openaireLibrary/utils/loading/loading.module";
 
 @NgModule({
   imports: [CommonModule, RouterModule.forChild([
@@ -19,9 +20,8 @@ import {SliderUtilsModule} from "../../openaireLibrary/sharedComponents/slider-u
     {path: ':topic/', component: MonitorComponent},
     {path: ':topic/:category', component: MonitorComponent},
     {path: ':topic/:category/:subCategory', component: MonitorComponent}
-  ]), PageContentModule, SliderTabsModule, NumberRoundModule, IconsModule, ClickModule, RangeFilterModule, SearchFilterModule, SliderUtilsModule],
+  ]), PageContentModule, SliderTabsModule, NumberRoundModule, IconsModule, ClickModule, RangeFilterModule, SearchFilterModule, SliderUtilsModule, LoadingModule],
   declarations: [MonitorComponent],
-  exports: [MonitorComponent]
 })
 export class MonitorModule {
   constructor(private iconsService: IconsService) {

src/app/shared/oa-indicator/oa-indicator.component.ts

@@ -0,0 +1,82 @@
+import {Component, Input, OnInit} from "@angular/core";
+import {Stakeholder} from "../../openaireLibrary/monitor/entities/stakeholder";
+import {StatisticsService} from "../../openaireLibrary/monitor-admin/utils/services/statistics.service";
+import {IndicatorStakeholderBaseComponent} from "../../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
+import {zip} from "rxjs";
+import {OAIndicator} from "../../openaireLibrary/monitor-admin/utils/indicator-utils";
+import {IrishMonitorService} from "../irish-monitor.service";
+
+@Component({
+  selector: "oa-indicator",
+  template: `
+      <ng-container *ngIf="percentage > 0">
+          <div class="uk-flex uk-flex-column uk-flex-middle">
+              <div class="uk-progress-semicircle open-access" [attr.percentage]="percentage.toFixed(1)"
+                   [style]="'--percentage:' + percentage.toFixed(1)"></div>
+              <div class="uk-flex uk-flex-middle uk-margin-small-top">
+                  <icon class="open-access" [name]="'open_access'" [flex]="true"></icon>
+                  <span class="uk-margin-xsmall-left uk-text-small">Open Access with Licence ({{year}})</span>
+              </div>
+          </div>
+          
+      </ng-container>
+  `
+})
+export class OaIndicatorComponent extends IndicatorStakeholderBaseComponent implements OnInit {
+  @Input()
+  public stakeholder: Stakeholder;
+  public percentage: number = 0;
+
+  constructor(private statisticsService: StatisticsService,
+              private irishMonitorService: IrishMonitorService) {
+    super();
+  }
+
+  ngOnInit(): void {
+    if(this.stakeholder) {
+      this.subscriptions.push(this.irishMonitorService.getStakeholder(this.stakeholder._id).subscribe(stakeholder => {
+        this.percentage = stakeholder.openAccess;
+        if(!this.percentage) {
+          this.initPercentage();
+        }
+      }));
+    }
+  }
+
+  public initPercentage(): void {
+    let OAIndicator: OAIndicator = this.stakeholderUtils.openAccess.get(this.stakeholder.type);
+    if(OAIndicator) {
+      this.subscriptions.push(zip(
+          this.statisticsService.getNumbers(this.indicatorUtils.getSourceType(OAIndicator.numerator.source), this.indicatorUtils.getFullUrlWithFilters(this.stakeholder, OAIndicator.numerator, null, this.year, this.year)),
+          this.statisticsService.getNumbers(this.indicatorUtils.getSourceType(OAIndicator.denominator.source), this.indicatorUtils.getFullUrlWithFilters(this.stakeholder, OAIndicator.denominator, null, this.year, this.year))).subscribe(res => {
+        let numerator = this.calculate(res[0], OAIndicator.numerator.jsonPath);
+        let denominator = this.calculate(res[1], OAIndicator.denominator.jsonPath);
+        if (denominator > 0) {
+          this.percentage = (numerator * 100 / denominator);
+        }
+      }));
+    }
+  }
+
+  get year() {
+    return (new Date().getFullYear() - 1).toString();
+  }
+
+  public calculate(response: any, jsonPath: string[]) {
+    let result = JSON.parse(JSON.stringify(response));
+    jsonPath.forEach(path => {
+      if (result) {
+        result = result[path];
+      }
+    });
+    if (typeof result === 'string' || typeof result === 'number') {
+      result = Number(result);
+      if (result === Number.NaN) {
+        result = 0;
+      }
+    } else {
+      result = 0;
+    }
+    return result;
+  }
+}

src/app/shared/oa-indicator/oa-indicator.module.ts

@@ -0,0 +1,11 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {OaIndicatorComponent} from "./oa-indicator.component";
+import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
+
+@NgModule({
+  declarations: [OaIndicatorComponent],
+  imports: [CommonModule, IconsModule],
+  exports: [OaIndicatorComponent]
+})
+export class OaIndicatorModule {}

src/app/shared/researcher-base.component.ts

@@ -4,6 +4,7 @@ import {SearchOrcidService} from "../openaireLibrary/claims/claim-utils/service/
 import {SearchResearchResultsService} from "../openaireLibrary/services/searchResearchResults.service";
 import {properties} from "../../environments/environment";
 import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
+import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
 
 interface Resolver {
   success?: Function;
@@ -11,7 +12,7 @@ interface Resolver {
 }
 
 @Directive()
-export class ResearcherBaseComponent extends BaseComponent {
+export class ResearcherBaseComponent extends  StakeholderBaseComponent {
   author: any;
   authorId: string;
   orcid: Resolver;
@@ -37,7 +38,7 @@ export class ResearcherBaseComponent extends BaseComponent {
   }
 
   getResultsForAuthor(){
-    this.param = '(authorid="' + StringUtils.URIEncode(this.author.id) + '") and (country exact "IE")';
+    this.param = '(authorid="' + StringUtils.URIEncode(this.author.id) + '")';
     this.subscriptions.push(this._searchResearchResultsService.numOfResearchOutcomes(this.param, properties, null).subscribe(res => {
       if(this.results?.success) {
         this.results?.success(res);

src/app/shared/sandbox.guard.ts

@@ -1,16 +1,70 @@
 import {AdminDashboardGuard} from "../openaireLibrary/monitor-admin/utils/adminDashboard.guard";
 import {Injectable} from "@angular/core";
-import {ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree} from "@angular/router";
-import {Observable} from "rxjs";
+import {ActivatedRouteSnapshot, Router, RouterStateSnapshot, UrlTree} from "@angular/router";
+import {Observable, zip} from "rxjs";
 import {properties} from "../../environments/environment";
+import {LoginErrorCodes} from "../openaireLibrary/login/utils/guardHelper.class";
+import {map, take, tap} from "rxjs/operators";
+import {Session} from "../openaireLibrary/login/utils/helper.class";
+import {UserManagementService} from "../openaireLibrary/services/user-management.service";
+import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
 
 @Injectable({
   providedIn: 'root'
 })
-export class SandboxGuard extends AdminDashboardGuard {
+export class SandboxGuard {
+
+  constructor(private userManagementService: UserManagementService,
+              private stakeholderService: StakeholderService,
+              private router: Router) {
+  }
 
   canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
-    return true;
-    //return properties.environment != 'beta' || super.canActivateChild(childRoute, state);
+    let sandbox = properties.environment === 'beta';
+    if (childRoute.data['researcher'] && childRoute.params.stakeholder && sandbox) {
+      return this.checkResearcher(state.url, childRoute.params.stakeholder);
+    } else {
+      let alias = childRoute.params.stakeholder;
+      let route = childRoute;
+      while (!alias && route) {
+        alias = route.data.stakeholder;
+        route = route.parent;
+      }
+      return !sandbox || this.check(state.url, alias);
+    }
+  }
+
+  checkResearcher(path: string, alias: string) {
+    let errorCode = LoginErrorCodes.NOT_LOGIN;
+    return this.userManagementService.getUserInfo().pipe(map(user => {
+      if (user) {
+        errorCode = LoginErrorCodes.NOT_ADMIN;
+      }
+      return user && (Session.isPortalAdministrator(user) ||
+          Session.isCurator('researcher', user) || user?.orcid === alias);
+    }), tap(authorized => {
+      if (!authorized) {
+        this.router.navigate(['/user-info'], {queryParams: {'errorCode': errorCode, 'redirectUrl': path}});
+      }
+    }));
+  }
+
+  check(path: string, alias: string): Observable<boolean> | boolean {
+    let errorCode = LoginErrorCodes.NOT_LOGIN;
+    return zip(
+        this.userManagementService.getUserInfo(), this.stakeholderService.getStakeholder(alias)
+    ).pipe(take(1), map(res => {
+      if (res[0]) {
+        errorCode = LoginErrorCodes.NOT_ADMIN;
+      }
+      return res[0] && res[1] && (Session.isPortalAdministrator(res[0]) ||
+          Session.isCurator(res[1].type, res[0]) ||
+          Session.isManager(res[1].type, res[1].alias, res[0]) ||
+          Session.isMember(res[1].type, res[1].alias, res[0]))
+    }), tap(authorized => {
+      if (!authorized) {
+        this.router.navigate(['/user-info'], {queryParams: {'errorCode': errorCode, 'redirectUrl': path}});
+      }
+    }));
   }
 }

src/app/shared/searchFields.irish.ts

@@ -2,29 +2,33 @@ import {SearchFieldsBase} from "src/app/openaireLibrary/utils/properties/searchF
 import {properties} from "src/environments/environment";
 
 export class SearchFields extends SearchFieldsBase {
-  public RESULT_STATIC_FIELDS = ["resultbestaccessright", "type",
+  public RESULT_STATIC_FIELDS = ["resultbestaccessright", "haslicense", "type",
     "peerreviewed", "isgreen", "isindiamondjournal", "publiclyfunded"];
 
   public RESULT_REFINE_FIELDS = [
     "instancetypename",
     "openaccesscolor",
-    properties.environment!='production'?"foslabel":'fos',
+    'fos',
+    "country",
     "relfunder", "relfundinglevel0_id", "relfundinglevel1_id", "relfundinglevel2_id",
     "relproject", "resulthostingdatasource", "community"];
 
   RESULT_FIELDS_ORDERED = [
     {type: "refine", title: "", values: ["type"]},
     {type: "refine", title: "", values: ["instancetypename", "peerreviewed"]},
-    {type: "refine", title: "", values: ["resultbestaccessright"]},
-    {type: "refine", title: "OA Routes", values: ["isgreen", "openaccesscolor", "isindiamondjournal"]},
+    {type: "refine", title: "", values: ["resultbestaccessright", "haslicense"]},
+    {type: "refine", title: "Access Routes", values: ["isgreen", "openaccesscolor", "isindiamondjournal"]},
     {type: "range", title: "", values: ["resultacceptanceyear", "resultacceptanceyear"]},
     {type: "refine", title: "", values: [
-        properties.environment!='production'?"foslabel":'fos', "publiclyfunded", "relfunder",
+        'fos', "publiclyfunded", "country", "relfunder",
         "relfundinglevel0_id", "relfundinglevel1_id", "relfundinglevel2_id",
         "relproject", "resulthostingdatasource", "community"
       ]}
   ];
 
+  ORGANIZATION_REFINE_FIELDS: string[] = [];
+  ORGANIZATION_ADVANCED_FIELDS: string[] = ["q", "organizationlegalname", "organizationlegalshortname", "pid"];
+
   public static getParameterOrder(fieldId: string, params): number {
     let fields = [];
     let searchFields = new SearchFields();

src/app/upload-dois/upload-dois.component.html

@@ -5,7 +5,8 @@
         <div class="uk-grid uk-flex-middle" uk-grid>
           <div class="uk-width-expand">
             <h1 class="uk-h4 uk-margin-small-bottom">Upload DOIs</h1>
-            <div class="uk-margin-bottom">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</div>
+            <div class="uk-margin-bottom">Upload a CSV file containing up to 1000 of Digital Object Identifiers (DOIs) to obtain a detailed report, featuring access modes, titles, and duplication checks.
+              </div>
           </div>
           <div *ngIf="filesToUpload && !loading" class="uk-width-xlarge@l uk-width-large@m uk-width-1-1 uk-margin-small-bottom">
             <div class="uk-flex uk-flex-right">