adapt counter page

src/components/Container/Page.vue

@@ -4,13 +4,15 @@ import ModalManager from '@/components/Modal/ModalManager.vue';
 
 import PkpAnnouncer from '@/components/Announcer/Announcer.vue';
 import ReviewerSubmissionPage from '@/pages/reviewerSubmission/ReviewerSubmissionPage.vue';
+import CounterReportsPage from '@/pages/counter/CounterReportsPage.vue';
 
 export default {
 	name: 'Page',
 	components: {
 		PkpAnnouncer,
 		ModalManager,
 		ReviewerSubmissionPage,
+		CounterReportsPage,
 	},
 	extends: Container,
 	data() {

src/pages/counter/CounterReportsPage.vue

@@ -0,0 +1,31 @@
+<template>
+	<h1 class="app__pageHeading">
+		{{ title }}
+	</h1>
+	<p v-html="description" />
+	<Notification
+		v-if="usageNotPossible"
+		type="warning"
+		class="pkpNotification--backendPage__header"
+	>
+		{{ t('manager.statistics.counterR5Reports.usageNotPossible') }}
+	</Notification>
+	<Panel>
+		<PanelSection>
+			<CounterReportsListPanel v-bind="counterReportsListPanel" @set="set" />
+		</PanelSection>
+	</Panel>
+</template>
+
+<script setup>
+import Panel from '@/components/Panel/Panel.vue';
+import PanelSection from '@/components/Panel/PanelSection.vue';
+import CounterReportsListPanel from '@/components/ListPanel/counter/CounterReportsListPanel.vue';
+
+defineProps({
+	counterReportsListPanel: {type: Array, required: true},
+	usageNotPossible: {type: Boolean, required: true},
+	title: {type: String, required: true},
+	description: {type: String, required: true},
+});
+</script>