diff --git a/src/components/Form/mocks/form-counter-report.js b/src/components/Form/mocks/form-counter-report.js
new file mode 100644
index 000000000..b2940a875
--- /dev/null
+++ b/src/components/Form/mocks/form-counter-report.js
@@ -0,0 +1,91 @@
+import Form from './form';
+import FieldTextTitle from './field-text-title';
+
+export default {
+ ...Form,
+ id: 'example',
+ action: 'https://example.org/example',
+ fields: [
+ {
+ ...FieldTextTitle,
+ value: {
+ en: '',
+ fr_CA: '',
+ ar: '',
+ },
+ groupId: 'default',
+ },
+ {
+ name: 'descriptionShort',
+ component: 'field-rich-textarea',
+ label: 'Short Description',
+ isMultilingual: true,
+ plugins: 'paste,link,noneditable',
+ toolbar: 'bold italic superscript subscript | link',
+ value: {
+ en: '',
+ fr_CA: '',
+ ar: '',
+ },
+ groupId: 'default',
+ },
+ {
+ name: 'description',
+ component: 'field-rich-textarea',
+ label: 'Description',
+ isMultilingual: true,
+ size: 'large',
+ plugins: 'paste,link,noneditable',
+ toolbar: 'bold italic superscript subscript | link',
+ value: {
+ en: '',
+ fr_CA: '',
+ ar: '',
+ },
+ groupId: 'default',
+ },
+ {
+ name: 'dateExpire',
+ component: 'field-text',
+ inputType: 'text',
+ label: 'Expiry Date',
+ description:
+ 'The announcement will be displayed to readers until this date. Leave blank if the announcement should be displayed indefinitely.',
+ value: '',
+ groupId: 'default',
+ },
+ {
+ name: 'sendEmail',
+ component: 'field-options',
+ label: 'Send Email',
+ description: '',
+ type: 'checkbox',
+ value: false,
+ options: [
+ {
+ value: true,
+ label:
+ 'Yes, I would like an email about this announcement to be sent to all registered users.',
+ },
+ ],
+ groupId: 'default',
+ },
+ ],
+ groups: [
+ {
+ id: 'default',
+ pageId: 'default',
+ },
+ ],
+ supportedFormLocales: [
+ ...Form.supportedFormLocales,
+ {
+ key: 'fr_CA',
+ label: 'Français (Canada)',
+ },
+ {
+ key: 'ar',
+ label: 'عربى',
+ },
+ ],
+};
diff --git a/src/components/ListPanel/counter/CounterReportsEditModal.vue b/src/components/ListPanel/counter/CounterReportsEditModal.vue
new file mode 100644
index 000000000..1addee7ed
--- /dev/null
+++ b/src/components/ListPanel/counter/CounterReportsEditModal.vue
@@ -0,0 +1,26 @@
+
+
+
+ {{ title }}
+
+
+ emit('updateForm', ...args)"
+ @success="(...args) => emit('formSuccess', ...args)"
+ />
+
+
+
+
+
diff --git a/src/components/ListPanel/counter/CounterReportsListPanel.mdx b/src/components/ListPanel/counter/CounterReportsListPanel.mdx
new file mode 100644
index 000000000..8abe19e8d
--- /dev/null
+++ b/src/components/ListPanel/counter/CounterReportsListPanel.mdx
@@ -0,0 +1,14 @@
+import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
+
+import * as CounterReportsListPanelStories from './CounterReportsListPanel.stories.js';
+
+
+
+# CounterReportsListPanel
+
+## Usage
+
+Use this component to get COUNTER R5 TSV reports.
+
+
+
diff --git a/src/components/ListPanel/counter/CounterReportsListPanel.stories.js b/src/components/ListPanel/counter/CounterReportsListPanel.stories.js
new file mode 100644
index 000000000..03d1dbdda
--- /dev/null
+++ b/src/components/ListPanel/counter/CounterReportsListPanel.stories.js
@@ -0,0 +1,50 @@
+import CounterReportsListPanel from './CounterReportsListPanel.vue';
+
+import CounterReportMock from '@/mocks/counterReport';
+import FormCounterReportMock from '@/components/Form/mocks/form-counter-report';
+
+export default {
+ title: 'ListPanel/CounterReportsListPanel',
+ component: CounterReportsListPanel,
+};
+
+const counterReports = [
+ {
+ ...CounterReportMock,
+ Report_ID: 'PR',
+ begin_date: '2022-02-03',
+ end_date: '2024-07-17',
+ customer_id: 0,
+ metric_type: {
+ 0: 'Total_Item_Investigations',
+ 1: 'Unique_Item_Investigations',
+ 2: 'Total_Item_Requests',
+ 3: 'Unique_Item_Requests',
+ },
+ },
+];
+
+export const Base = {
+ render: (args) => ({
+ components: {CounterReportsListPanel},
+ setup() {
+ return {args};
+ },
+ template: `
+
+ `,
+ }),
+
+ args: {
+ form: {...FormCounterReportMock},
+ items: [...counterReports],
+ itemsMax: counterReports.length,
+ title: 'Counter R5 Reports',
+ id: 'previewCounterReportsListPanel',
+ apiUrl: '',
+ editCounterReportLabel: 'Edit',
+ usagePossible: true,
+ },
+};
diff --git a/src/mocks/counterReport.js b/src/mocks/counterReport.js
new file mode 100644
index 000000000..0d941809c
--- /dev/null
+++ b/src/mocks/counterReport.js
@@ -0,0 +1,12 @@
+export default {
+ Report_ID: 'PR',
+ begin_date: '2022-02-03',
+ end_date: '2024-07-17',
+ customer_id: 0,
+ metric_type: {
+ 0: 'Total_Item_Investigations',
+ 1: 'Unique_Item_Investigations',
+ 2: 'Total_Item_Requests',
+ 3: 'Unique_Item_Requests',
+ },
+};