@eeacms/volto-marine-policy 3.0.2 → 3.0.4

package/CHANGELOG.md

@@ -4,6 +4,44 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [3.0.4](https://github.com/eea/volto-marine-policy/compare/3.0.3...3.0.4) - 30 June 2026
+
+#### :rocket: New Features
+
+- feat(NISListingView): restrict edit/remove buttons to assigned items [laszlocseh - [`4844b47`](https://github.com/eea/volto-marine-policy/commit/4844b47335908c105551c7a2ca652af86e43a491)]
+- feat(NISListingView): add remove functionality and error handling [laszlocseh - [`1121c97`](https://github.com/eea/volto-marine-policy/commit/1121c97f4a6de99994325624edf705a810933958)]
+- feat: added button to NISListingView to add nis records [laszlocseh - [`709763c`](https://github.com/eea/volto-marine-policy/commit/709763c37e8add6cbfb22931005ac2fee5d32e18)]
+
+#### :bug: Bug Fixes
+
+- fix(theme/NISListingView): prevent download button from rendering when duplicates exist [laszlocseh - [`ae0b788`](https://github.com/eea/volto-marine-policy/commit/ae0b7886535e6e0bf0f36dc2a567e3319be94568)]
+- fix(NISListingView): add currentUserId to useEffect dependency [laszlocseh - [`b9bf4d6`](https://github.com/eea/volto-marine-policy/commit/b9bf4d66cb0d1cbdbaa587ed28460154a2f792ac)]
+- fix(theme/NISListingView): dynamically adjust API path based on current route [laszlocseh - [`6d1d1f5`](https://github.com/eea/volto-marine-policy/commit/6d1d1f58fbe4155833b753990f03940434cbc068)]
+- fix: use POST method and handle errors in duplicate check API call [laszlocseh - [`7a0c62c`](https://github.com/eea/volto-marine-policy/commit/7a0c62c1ef4fda3152ed52a44243c8a4cd638fa7)]
+- fix: NISListingView check for duplicates [laszlocseh - [`52ef865`](https://github.com/eea/volto-marine-policy/commit/52ef865978ce19eefa598b70bd1ccee05152169a)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`a733b08`](https://github.com/eea/volto-marine-policy/commit/a733b081f6080ffaa6abddc8f343fba0cbe19ab6)]
+- style: disable eslint no-alert rule [laszlocseh - [`44d0f90`](https://github.com/eea/volto-marine-policy/commit/44d0f901bd80d32c9448791cb4afce8bbb3ffde1)]
+- style: Automated code fix [eea-jenkins - [`0ff6b42`](https://github.com/eea/volto-marine-policy/commit/0ff6b42b5e2d2997feaa67bf9ce25fc2d933074d)]
+- style: Automated code fix [eea-jenkins - [`af3a4b6`](https://github.com/eea/volto-marine-policy/commit/af3a4b6f33c455089ac55198fa561a43747c07cc)]
+- chore(deps): bump axios from 0.30.0 to 0.32.0 [dependabot[bot] - [`2b6a39b`](https://github.com/eea/volto-marine-policy/commit/2b6a39b4d9bddb01c57e5cb58efe5c08664aa6bc)]
+
+#### :hammer_and_wrench: Others
+
+- test: update NISListingView tests to use props instead of mock selectors [laszlocseh - [`42498c0`](https://github.com/eea/volto-marine-policy/commit/42498c006e5a1ad6dcb23ad2fd25c9c1de1280bc)]
+### [3.0.3](https://github.com/eea/volto-marine-policy/compare/3.0.2...3.0.3) - 12 June 2026
+
+#### :rocket: New Features
+
+- feat: added button to show NIS duplicates [laszlocseh - [`591927c`](https://github.com/eea/volto-marine-policy/commit/591927ca76c693d8d33d7b9ab8bdedc10368c0f2)]
+- feat: added button to copy a NIS listing item [laszlocseh - [`588a5fe`](https://github.com/eea/volto-marine-policy/commit/588a5fe1409292a5df742590d615e230dc09ebd9)]
+
+#### :hammer_and_wrench: Others
+
+- test: fix NISListingView.test.jsx [laszlocseh - [`0ba486d`](https://github.com/eea/volto-marine-policy/commit/0ba486d1058bc71fe73ef53e628fd7c5423688ae)]
+- test: added NISListingView.test.jsx [laszlocseh - [`4c54331`](https://github.com/eea/volto-marine-policy/commit/4c54331dd40f178dfd88dcc0d73d1eb96d2834e6)]
 ### [3.0.2](https://github.com/eea/volto-marine-policy/compare/3.0.1...3.0.2) - 10 June 2026
 
 #### :rocket: Dependency updates
@@ -64,8 +102,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :house: Internal changes
 
 - style: Automated code fix [eea-jenkins - [`0421290`](https://github.com/eea/volto-marine-policy/commit/0421290d7fdd9fdd0b6d483b53c424a0747137b3)]
-- chore: [JENKINSFILE] add package version in sonarqube [valentinab25 - [`fb1d0f0`](https://github.com/eea/volto-marine-policy/commit/fb1d0f083474b3a14b0ec36a329c7efc7499dd3d)]
-- chore: [JENKINSFILE] use sonarqube branches [EEA Jenkins - [`40d0b36`](https://github.com/eea/volto-marine-policy/commit/40d0b368836d32544b46ae7c7b070ffb71989b55)]
 
 #### :hammer_and_wrench: Others
 

package/RELEASE.md

@@ -2,24 +2,24 @@
 
 ### Automatic release using Jenkins
 
-*  The automatic release is started by creating a [Pull Request](../../compare/master...develop) from `develop` to `master`. The pull request status checks correlated to the branch and PR Jenkins jobs need to be processed successfully. 1 review from a github user with rights is mandatory.
-* It runs on every commit on `master` branch, which is protected from direct commits, only allowing pull request merge commits.
-* The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the Readme.md badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
-* Automated release scripts are located in the `eeacms/gitflow` docker image, specifically [js-release.sh](https://github.com/eea/eea.docker.gitflow/blob/master/src/js-release.sh) script. It  uses the `release-it` tool.
-* As long as a PR request is open from develop to master, the PR Jenkins job will automatically re-create the CHANGELOG.md and package.json files to be production-ready.
-* The version format must be MAJOR.MINOR.PATCH. By default, next release is set to next minor version (with patch 0).
-* You can manually change the version in `package.json`.  The new version must not be already present in the tags/releases of the repository, otherwise it will be automatically increased by the script. Any changes to the version will trigger a `CHANGELOG.md` re-generation.
-* Automated commits and commits with [JENKINS] or [YARN] in the commit log are excluded from `CHANGELOG.md` file.
+- The automatic release is started by creating a [Pull Request](../../compare/master...develop) from `develop` to `master`. The pull request status checks correlated to the branch and PR Jenkins jobs need to be processed successfully. 1 review from a github user with rights is mandatory.
+- It runs on every commit on `master` branch, which is protected from direct commits, only allowing pull request merge commits.
+- The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the Readme.md badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
+- Automated release scripts are located in the `eeacms/gitflow` docker image, specifically [js-release.sh](https://github.com/eea/eea.docker.gitflow/blob/master/src/js-release.sh) script. It uses the `release-it` tool.
+- As long as a PR request is open from develop to master, the PR Jenkins job will automatically re-create the CHANGELOG.md and package.json files to be production-ready.
+- The version format must be MAJOR.MINOR.PATCH. By default, next release is set to next minor version (with patch 0).
+- You can manually change the version in `package.json`. The new version must not be already present in the tags/releases of the repository, otherwise it will be automatically increased by the script. Any changes to the version will trigger a `CHANGELOG.md` re-generation.
+- Automated commits and commits with [JENKINS] or [YARN] in the commit log are excluded from `CHANGELOG.md` file.
 
 ### Manual release from the develop branch ( beta release )
 
 #### Installation and configuration of release-it
 
-You need to first install the [release-it](https://github.com/release-it/release-it)  client.
+You need to first install the [release-it](https://github.com/release-it/release-it) client.
 
-   ```
-   npm install -g release-it
-   ```
+```
+npm install -g release-it
+```
 
 Release-it uses the configuration written in the [`.release-it.json`](./.release-it.json) file located in the root of the repository.
 
@@ -32,15 +32,15 @@ Release-it is a tool that automates 4 important steps in the release process:
 
 To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens)
 
-   ```
-   export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
-   ```
+```
+export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
+```
 
- To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
+To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
 
-   ```
-   echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
-   ```
+```
+echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
+```
 
 #### Using release-it tool
 
@@ -71,4 +71,3 @@ Generic command, does not automatically add the `beta` to version, but you can s
 > Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.
 
 > Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-marine-policy",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "@eeacms/volto-marine-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -41,7 +41,7 @@
     "@eeacms/volto-metadata-block": "*",
     "@eeacms/volto-openlayers-map": "2.0.1",
     "@eeacms/volto-workflow-progress": "*",
-    "axios": "0.30.0",
+    "axios": "0.32.0",
     "d3-array": "^2.12.1",
     "jquery": "3.6.0",
     "razzle-plugin-scss": "^4.2.18",

package/src/components/theme/NISListingView/NISListingView.jsx

@@ -3,11 +3,12 @@ import ProgressWorkflow from '@eeacms/volto-marine-policy/components/theme/Progr
 import qs from 'query-string';
 import PropTypes from 'prop-types';
 import './style.less';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { Checkbox } from 'semantic-ui-react';
 import { Button, Select, Dimmer, Loader } from 'semantic-ui-react';
 import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import jwtDecode from 'jwt-decode';
 
 function normalizeQueryOperators(query) {
   return query.map((q) => {
@@ -63,6 +64,21 @@ async function getCurrentSearchItems() {
   }
 }
 
+function normalizeItemPath(itemId) {
+  if (!itemId) return '';
+  let path = itemId.replace(/^https?:\/\/[^/]+/, '');
+  try {
+    const apiURL = new URL(window.env.apiPath);
+    const prefix = apiURL.pathname;
+    if (prefix && prefix !== '/' && path.startsWith(prefix)) {
+      path = path.slice(prefix.length) || '/';
+    }
+  } catch (e) {
+    // apiPath might be relative; ignore
+  }
+  return path;
+}
+
 function formatAssignedTo(assignedTo) {
   if (!assignedTo) return '';
   // Fix Python-style unicode escape sequences (\UXXXXXXXX -> actual char)
@@ -74,13 +90,27 @@ function formatAssignedTo(assignedTo) {
   return result;
 }
 
+function isAssignedToMe(item, currentUserId) {
+  if (!currentUserId || !item.nis_assigned_to) return false;
+  const match = item.nis_assigned_to.match(/\(([^)]+)\)\s*$/);
+  return match ? match[1] === currentUserId : false;
+}
+
 const NISListingView = ({ items, isEditMode }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [selectedItems, setSelectedItems] = useState([]);
   const [itemsTotal, setItemsTotal] = useState(0);
+  const [duplicateIds, setDuplicateIds] = useState(null);
+  const [duplicateGroups, setDuplicateGroups] = useState([]);
+  const [duplicatesLoading, setDuplicatesLoading] = useState(false);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [locationTick, setLocationTick] = useState(0);
+
   const [users, setUsers] = useState([]);
   const [assignee, setAssignee] = useState(null);
   const actions = useSelector((state) => state.actions.actions);
+  const token = useSelector((state) => state.userSession.token);
+  const currentUserId = token ? jwtDecode(token).sub : '';
   const canEditPage = actions?.object?.some((action) => action.id === 'edit');
 
   const toggleSelection = (id) => {
@@ -109,7 +139,10 @@ const NISListingView = ({ items, isEditMode }) => {
   const onBulkAssign = async (ids, assignee) => {
     setIsLoading(true);
     await fetch(
-      `${window.env.apiPath}/++api++/@bulk-assign${window.location.search}`,
+      `${window.env.apiPath}/++api++${window.location.pathname.replace(
+        '/marine',
+        '',
+      )}/@bulk-assign${window.location.search}`,
       {
         method: 'POST',
         headers: {
@@ -128,6 +161,117 @@ const NISListingView = ({ items, isEditMode }) => {
     window.location.reload();
   };
 
+  const handleCopy = async (item) => {
+    setErrorMessage(null);
+    setIsLoading(true);
+    try {
+      const res = await fetch(
+        `${window.env.apiPath}/++api++${item['@id'].replace(
+          /^\/marine/,
+          '',
+        )}/@copy-nis-record`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+          },
+          credentials: 'include',
+        },
+      );
+      if (res.ok) {
+        window.location.reload();
+      } else {
+        setErrorMessage('Something went wrong. The copy was not successful.');
+        setIsLoading(false);
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error('Copy failed:', err);
+      setErrorMessage('Something went wrong. The copy was not successful.');
+      setIsLoading(false);
+    }
+  };
+
+  const handleRemove = async (item) => {
+    // eslint-disable-next-line no-alert
+    if (!window.confirm('Are you sure you want to remove this item?')) {
+      return;
+    }
+    setErrorMessage(null);
+    try {
+      const res = await fetch(
+        `${window.env.apiPath}/++api++${item['@id'].replace(/^\/marine/, '')}`,
+        {
+          method: 'DELETE',
+          credentials: 'include',
+          headers: { Accept: 'application/json' },
+        },
+      );
+      if (res.ok) {
+        window.location.reload();
+      } else {
+        setErrorMessage('Something went wrong. The item could not be removed.');
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error('Remove failed:', err);
+      setErrorMessage('Something went wrong. The item could not be removed.');
+    }
+  };
+
+  useEffect(() => {
+    const trigger = () => setLocationTick((t) => t + 1);
+    window.addEventListener('popstate', trigger);
+    const origPush = window.history.pushState;
+    const origReplace = window.history.replaceState;
+    window.history.pushState = function (...a) {
+      origPush.apply(this, a);
+      trigger();
+    };
+    window.history.replaceState = function (...a) {
+      origReplace.apply(this, a);
+      trigger();
+    };
+    return () => {
+      window.removeEventListener('popstate', trigger);
+      window.history.pushState = origPush;
+      window.history.replaceState = origReplace;
+    };
+  }, []);
+
+  useEffect(() => {
+    const parsed = qs.parse(window.location.search);
+    if (parsed['check-duplicates']) {
+      setDuplicatesLoading(true);
+      fetch(
+        `${window.env.apiPath}/++api++${window.location.pathname.replace(
+          '/marine',
+          '',
+        )}/@check-nis-duplicates`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+          },
+          credentials: 'include',
+          body: JSON.stringify({ search: window.location.search }),
+        },
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          setDuplicateIds(new Set(data.duplicate_ids.map(normalizeItemPath)));
+          setDuplicateGroups(data.groups || []);
+        })
+        .catch((err) => {
+          // eslint-disable-next-line no-console
+          console.error('Check duplicates failed:', err);
+        })
+        .finally(() => setDuplicatesLoading(false));
+    }
+  }, [locationTick]);
+
   useEffect(() => {
     const fetchUsers = async () => {
       const res = await fetch(
@@ -153,6 +297,108 @@ const NISListingView = ({ items, isEditMode }) => {
     fetchUsers();
   }, []);
 
+  const duplicateTableRows = useMemo(() => {
+    if (!duplicateIds) return items;
+
+    const rows = [];
+    duplicateGroups.forEach((group, gIdx) => {
+      (group.items || []).forEach((item) => {
+        rows.push(
+          <tr key={item['@id']}>
+            <td>{item.nis_species_name_original}</td>
+            <td>{item.nis_species_name_accepted}</td>
+            <td>{item.nis_scientificname_accepted}</td>
+            <td>{item.nis_region}</td>
+            <td>{item.nis_subregion}</td>
+            <td>{item.nis_country}</td>
+            <td>{item.nis_status}</td>
+            <td>{item.nis_group}</td>
+            <td>{item.nis_year}</td>
+            <td>
+              <div className="assigned-to-container">
+                <div>{formatAssignedTo(item.nis_assigned_to)}</div>
+                {canEditPage && (
+                  <Checkbox
+                    checked={selectedItems.includes(item['@id'])}
+                    onChange={() => toggleSelection(item['@id'])}
+                  />
+                )}
+              </div>
+            </td>
+            <td>
+              <div className="workflow-actions">
+                <div className="action-buttons">
+                  <UniversalLink
+                    className="ui button secondary mini"
+                    href={item['@id']}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    View
+                  </UniversalLink>
+                  {isAssignedToMe(item, currentUserId) && (
+                    <UniversalLink
+                      className="ui button primary mini"
+                      href={`${item['@id']}/edit`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Edit
+                    </UniversalLink>
+                  )}
+                  {isAssignedToMe(item, currentUserId) && (
+                    <Button
+                      className="tertiary mini"
+                      onClick={() => handleCopy(item)}
+                    >
+                      Copy
+                    </Button>
+                  )}
+                  {isAssignedToMe(item, currentUserId) && (
+                    <Button
+                      className="negative mini"
+                      onClick={() => handleRemove(item)}
+                    >
+                      Remove
+                    </Button>
+                  )}
+                </div>
+                <div className="workflow-progress">
+                  <ProgressWorkflow
+                    content={item}
+                    pathname={item['@id']}
+                    token={123}
+                  />
+                </div>
+              </div>
+            </td>
+          </tr>,
+        );
+      });
+      if (gIdx < duplicateGroups.length - 1) {
+        rows.push(
+          <tr key={`sep-${gIdx}`}>
+            <td
+              colSpan="11"
+              style={{
+                borderBottom: '2px solid #999',
+                padding: 0,
+              }}
+            />
+          </tr>,
+        );
+      }
+    });
+    return rows;
+  }, [
+    duplicateIds,
+    duplicateGroups,
+    items,
+    canEditPage,
+    selectedItems,
+    currentUserId,
+  ]);
+
   return (
     <>
       {isLoading && (
@@ -160,8 +406,28 @@ const NISListingView = ({ items, isEditMode }) => {
           <Loader>Assigning...</Loader>
         </Dimmer>
       )}
-      {canEditPage && (
+      {canEditPage && !duplicateIds && (
         <div className="download-button-wrapper">
+          <UniversalLink
+            className="ui button primary download-as-xls"
+            href={`${window.location.pathname}/add?type=non_indigenous_species`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <i className="ri-add-line"></i>Add NIS record
+          </UniversalLink>
+          <Button
+            className="primary"
+            size="small"
+            onClick={() => {
+              const parsed = qs.parse(window.location.search);
+              parsed['check-duplicates'] = '1';
+              window.location.search = qs.stringify(parsed);
+            }}
+          >
+            <i className="ri-file-copy-line"></i>
+            Check duplicates
+          </Button>
           <Button
             className="primary"
             size="small"
@@ -169,23 +435,71 @@ const NISListingView = ({ items, isEditMode }) => {
           >
             <i className="ri-user-add-line"></i>Assign search results
           </Button>
-          <div>
-            <a
-              href={`/marine/++api++${window.location.pathname.replace(
-                '/marine',
-                '',
-              )}/nis-export${window.location.search}`}
-              title="Download"
-              target="_blank"
-              rel="noopener"
-              className="ui button primary download-as-xls"
-            >
-              <i className="ri-file-download-line"></i>
-              Download search results
-            </a>
-          </div>
+          <a
+            href={`/marine/++api++${window.location.pathname.replace(
+              '/marine',
+              '',
+            )}/nis-export${window.location.search}`}
+            title="Download"
+            target="_blank"
+            rel="noopener"
+            className="ui button primary download-as-xls"
+          >
+            <i className="ri-file-download-line"></i>
+            Download search results
+          </a>
+        </div>
+      )}
+      {errorMessage && (
+        <div
+          style={{
+            background: '#f8d7da',
+            border: '1px solid #f5c6cb',
+            color: '#721c24',
+            padding: '10px 15px',
+            marginBottom: '15px',
+            borderRadius: '4px',
+          }}
+        >
+          {errorMessage}
+        </div>
+      )}
+      {duplicateIds && (
+        <div
+          style={{
+            background: '#fff3cd',
+            border: '1px solid #ffc107',
+            padding: '10px 15px',
+            marginBottom: '15px',
+            borderRadius: '4px',
+          }}
+        >
+          Showing{' '}
+          {duplicateGroups.reduce(
+            (sum, g) => sum + (g.items ? g.items.length : 0),
+            0,
+          )}{' '}
+          duplicate records across {duplicateGroups.length} groups
+          <a
+            href={(() => {
+              const p = qs.parse(window.location.search);
+              delete p['check-duplicates'];
+              const q = qs.stringify(p);
+              return `${window.location.pathname}${q ? '?' + q : ''}`;
+            })()}
+            style={{ marginLeft: '10px', fontSize: '0.9em' }}
+          >
+            Clear
+          </a>
         </div>
       )}
+      {duplicateIds && (
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `.listing-pagination,.pagination-wrapper,nav[aria-label="Pagination Navigation"],.ui.pagination{display:none!important}`,
+          }}
+        />
+      )}
       <table className="ui table">
         <thead>
           <tr>
@@ -197,59 +511,93 @@ const NISListingView = ({ items, isEditMode }) => {
             <th>Country</th>
             <th>Status</th>
             <th>Group</th>
+            <th>Year</th>
             <th>Assigned to</th>
             <th></th>
           </tr>
         </thead>
         <tbody>
-          {items.map((item, index) => (
-            <tr key={item['@id']}>
-              <td>{item.nis_species_name_original}</td>
-              <td>{item.nis_species_name_accepted}</td>
-              <td>{item.nis_scientificname_accepted}</td>
-              <td>{item.nis_region}</td>
-              <td>{item.nis_subregion}</td>
-              <td>{item.nis_country}</td>
-              <td>{item.nis_status}</td>
-              <td>{item.nis_group}</td>
-              <td>
-                <div className="assigned-to-container">
-                  <div>{formatAssignedTo(item.nis_assigned_to)}</div>
-                  {canEditPage && (
-                    <Checkbox
-                      checked={selectedItems.includes(item['@id'])}
-                      onChange={() => toggleSelection(item['@id'])}
-                    />
-                  )}
-                </div>
+          {duplicateIds ? (
+            duplicateTableRows
+          ) : duplicatesLoading ? (
+            <tr>
+              <td colSpan="11" style={{ textAlign: 'center', padding: '20px' }}>
+                <Loader active inline />
               </td>
-              <td>
-                <div className="workflow-actions">
-                  <div className="action-buttons">
-                    <UniversalLink
-                      className="ui button secondary mini"
-                      href={`${item['@id']}`}
-                    >
-                      View
-                    </UniversalLink>
-                    <UniversalLink
-                      className="ui button primary mini"
-                      href={`${item['@id']}/edit`}
-                    >
-                      Edit
-                    </UniversalLink>
+            </tr>
+          ) : (
+            items.map((item) => (
+              <tr key={item['@id']}>
+                <td>{item.nis_species_name_original}</td>
+                <td>{item.nis_species_name_accepted}</td>
+                <td>{item.nis_scientificname_accepted}</td>
+                <td>{item.nis_region}</td>
+                <td>{item.nis_subregion}</td>
+                <td>{item.nis_country}</td>
+                <td>{item.nis_status}</td>
+                <td>{item.nis_group}</td>
+                <td>{item.nis_year}</td>
+                <td>
+                  <div className="assigned-to-container">
+                    <div>{formatAssignedTo(item.nis_assigned_to)}</div>
+                    {canEditPage && (
+                      <Checkbox
+                        checked={selectedItems.includes(item['@id'])}
+                        onChange={() => toggleSelection(item['@id'])}
+                      />
+                    )}
                   </div>
-                  <div className="workflow-progress">
-                    <ProgressWorkflow
-                      content={item}
-                      pathname={item['@id']}
-                      token={123}
-                    />
+                </td>
+                <td>
+                  <div className="workflow-actions">
+                    <div className="action-buttons">
+                      <UniversalLink
+                        className="ui button secondary mini"
+                        href={`${item['@id']}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        View
+                      </UniversalLink>
+                      {isAssignedToMe(item, currentUserId) && (
+                        <UniversalLink
+                          className="ui button primary mini"
+                          href={`${item['@id']}/edit`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
+                          Edit
+                        </UniversalLink>
+                      )}
+                      {isAssignedToMe(item, currentUserId) && (
+                        <Button
+                          className="tertiary mini"
+                          onClick={() => handleCopy(item)}
+                        >
+                          Copy
+                        </Button>
+                      )}
+                      {isAssignedToMe(item, currentUserId) && (
+                        <Button
+                          className="negative mini"
+                          onClick={() => handleRemove(item)}
+                        >
+                          Remove
+                        </Button>
+                      )}
+                    </div>
+                    <div className="workflow-progress">
+                      <ProgressWorkflow
+                        content={item}
+                        pathname={item['@id']}
+                        token={123}
+                      />
+                    </div>
                   </div>
-                </div>
-              </td>
-            </tr>
-          ))}
+                </td>
+              </tr>
+            ))
+          )}
         </tbody>
       </table>
       {selectedItems.length > 0 && (

package/src/components/theme/NISListingView/NISListingView.test.jsx

@@ -0,0 +1,464 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+import NISListingView from './NISListingView';
+
+jest.mock('react-redux', () => ({
+  __esModule: true,
+  ...jest.requireActual('react-redux'),
+}));
+
+jest.mock(
+  '@plone/volto/components/manage/UniversalLink/UniversalLink',
+  () =>
+    function MockUniversalLink({ href, children, className }) {
+      return (
+        <a href={href} className={className}>
+          {children}
+        </a>
+      );
+    },
+);
+
+jest.mock(
+  '@eeacms/volto-marine-policy/components/theme/ProgressWorkflow/ProgressWorkflow',
+  () => ({
+    __esModule: true,
+    default: () => <div data-testid="progress-workflow" />,
+  }),
+);
+
+const mockStore = configureStore();
+
+function buildItems(count = 3) {
+  return Array.from({ length: count }, (_, i) => ({
+    '@id': `/marine/item-${i + 1}`,
+    nis_species_name_original: `Species ${i + 1}`,
+    nis_species_name_accepted: `Species ${i + 1} accepted`,
+    nis_scientificname_accepted: `Scientificus acceptus ${i + 1}`,
+    nis_region: 'Europe',
+    nis_subregion: 'Western Europe',
+    nis_country: 'France',
+    nis_status: 'Established',
+    nis_group: 'Fish',
+    nis_year: 2020 + i,
+    nis_assigned_to: `User ${i + 1} (user${i + 1})`,
+  }));
+}
+
+function renderComponent(props = {}) {
+  const {
+    items = buildItems(),
+    actions = { object: [{ id: 'edit' }] },
+    token = null,
+    ...rest
+  } = props;
+  const store = mockStore({
+    intl: { locale: 'en', messages: {} },
+    actions: { actions },
+    userSession: { token },
+  });
+  return render(
+    <Provider store={store}>
+      <NISListingView items={items} {...rest} />
+    </Provider>,
+  );
+}
+
+describe('NISListingView', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        json: () => Promise.resolve({ items: [] }),
+        ok: true,
+      }),
+    );
+
+    delete window.location;
+    window.location = {
+      href: 'http://localhost:3000/marine/test-path',
+      pathname: '/marine/test-path',
+      search: '',
+      reload: jest.fn(),
+    };
+
+    window.env = { apiPath: 'http://localhost:8080/Plone' };
+
+    global.fetch.mockImplementation((url) => {
+      if (typeof url === 'string' && url.includes('nis_experts_vocabulary')) {
+        return Promise.resolve({
+          json: () =>
+            Promise.resolve({
+              items: [
+                { token: 'jdoe', title: 'John Doe (jdoe)' },
+                { token: 'asmith', title: 'Alice Smith (asmith)' },
+              ],
+            }),
+        });
+      }
+      if (typeof url === 'string' && url.includes('check-nis-duplicates')) {
+        return Promise.resolve({
+          json: () =>
+            Promise.resolve({
+              duplicate_ids: [],
+              groups: [],
+            }),
+        });
+      }
+      return Promise.resolve({
+        json: () => Promise.resolve({}),
+        ok: true,
+      });
+    });
+  });
+
+  describe('table rendering', () => {
+    it('renders all column headers', async () => {
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Species name original')).toBeInTheDocument();
+      });
+      expect(screen.getByText('Species name accepted')).toBeInTheDocument();
+      expect(screen.getByText('Scientific name accepted')).toBeInTheDocument();
+      expect(screen.getByText('Region')).toBeInTheDocument();
+      expect(screen.getByText('Subregion')).toBeInTheDocument();
+      expect(screen.getByText('Country')).toBeInTheDocument();
+      expect(screen.getByText('Status')).toBeInTheDocument();
+      expect(screen.getByText('Group')).toBeInTheDocument();
+      expect(screen.getByText('Year')).toBeInTheDocument();
+      expect(screen.getByText('Assigned to')).toBeInTheDocument();
+    });
+
+    it('renders one row per item', async () => {
+      renderComponent({ items: buildItems(3) });
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      const rows = screen.getAllByRole('row');
+      expect(rows).toHaveLength(4);
+    });
+
+    it('renders item data in correct columns', async () => {
+      const items = [
+        {
+          '@id': '/marine/item-x',
+          nis_species_name_original: 'Alienus maximus original',
+          nis_species_name_accepted: 'Alienus maximus (Linnaeus)',
+          nis_scientificname_accepted: 'Alienus maximus scientific',
+          nis_region: 'Asia',
+          nis_subregion: 'South Asia',
+          nis_country: 'India',
+          nis_status: 'Invasive',
+          nis_group: 'Plant',
+          nis_year: 2023,
+          nis_assigned_to: 'Jane Expert (jexpert)',
+        },
+      ];
+      renderComponent({ items });
+      await waitFor(() => {
+        expect(
+          screen.getByText('Alienus maximus original'),
+        ).toBeInTheDocument();
+      });
+      expect(
+        screen.getByText('Alienus maximus (Linnaeus)'),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText('Alienus maximus scientific'),
+      ).toBeInTheDocument();
+      expect(screen.getByText('Asia')).toBeInTheDocument();
+      expect(screen.getByText('South Asia')).toBeInTheDocument();
+      expect(screen.getByText('India')).toBeInTheDocument();
+      expect(screen.getByText('Invasive')).toBeInTheDocument();
+      expect(screen.getByText('Plant')).toBeInTheDocument();
+      expect(screen.getByText('2023')).toBeInTheDocument();
+    });
+
+    it('renders an empty table body when items is empty', async () => {
+      renderComponent({ items: [] });
+      await waitFor(() => {
+        expect(screen.getByText('Species name original')).toBeInTheDocument();
+      });
+      const rows = screen.getAllByRole('row');
+      expect(rows).toHaveLength(1);
+    });
+  });
+
+  describe('formatAssignedTo — rendered output', () => {
+    it('strips the (userid) suffix from assigned_to', async () => {
+      const items = [
+        {
+          ...buildItems(1)[0],
+          nis_assigned_to: 'Jane Expert (jexpert)',
+        },
+      ];
+      renderComponent({ items });
+      await waitFor(() => {
+        expect(screen.getByText('Jane Expert')).toBeInTheDocument();
+      });
+      expect(screen.queryByText('Jane Expert (jexpert)')).toBeNull();
+    });
+
+    it('decodes Python \\U escape sequences in assigned_to', async () => {
+      const items = [
+        {
+          ...buildItems(1)[0],
+          nis_assigned_to:
+            '\\U000000d6sterreich User (\\U000000d6sterreichUser)',
+        },
+      ];
+      renderComponent({ items });
+      await waitFor(() => {
+        expect(screen.getByText('Österreich User')).toBeInTheDocument();
+      });
+    });
+
+    it('shows empty string when assigned_to is null', async () => {
+      const items = [
+        {
+          ...buildItems(1)[0],
+          nis_assigned_to: null,
+        },
+      ];
+      renderComponent({ items });
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      const containers = document.querySelectorAll('.assigned-to-container');
+      expect(containers.length).toBeGreaterThan(0);
+      expect(containers[0].firstChild.textContent).toBe('');
+    });
+  });
+
+  describe('admin controls — canEditPage', () => {
+    it('shows assign, download, and check-duplicates buttons when user can edit', async () => {
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Assign search results')).toBeInTheDocument();
+      });
+      expect(screen.getByText('Add NIS record')).toBeInTheDocument();
+      expect(screen.getByText('Download search results')).toBeInTheDocument();
+      expect(screen.getByText('Check duplicates')).toBeInTheDocument();
+    });
+
+    it('hides admin controls when user cannot edit', async () => {
+      renderComponent({ actions: { object: [] } });
+      await waitFor(() => {
+        expect(screen.getByText('Species name original')).toBeInTheDocument();
+      });
+      expect(
+        screen.queryByText('Assign search results'),
+      ).not.toBeInTheDocument();
+      expect(
+        screen.queryByText('Download search results'),
+      ).not.toBeInTheDocument();
+      expect(screen.queryByText('Check duplicates')).not.toBeInTheDocument();
+    });
+
+    it('hides checkboxes and Copy button when user cannot edit', async () => {
+      renderComponent({ actions: { object: [] } });
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      expect(document.querySelector('.ui.checkbox')).toBeNull();
+      expect(screen.queryByText('Copy')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('duplicate checking', () => {
+    beforeEach(() => {
+      window.location.search = '?check-duplicates=1';
+    });
+
+    function mockDuplicateFetch(duplicateIds, groups) {
+      global.fetch.mockImplementation((url) => {
+        if (typeof url === 'string' && url.includes('nis_experts_vocabulary')) {
+          return Promise.resolve({
+            json: () =>
+              Promise.resolve({
+                items: [{ token: 'jdoe', title: 'John Doe (jdoe)' }],
+              }),
+          });
+        }
+        if (typeof url === 'string' && url.includes('check-nis-duplicates')) {
+          return Promise.resolve({
+            json: () =>
+              Promise.resolve({
+                duplicate_ids: duplicateIds,
+                groups: groups,
+              }),
+          });
+        }
+        return Promise.resolve({
+          json: () => Promise.resolve({}),
+          ok: true,
+        });
+      });
+    }
+
+    function makeGroup(itemNumber) {
+      const itemId = `/marine/item-${itemNumber}`;
+      const itemData = {
+        '@id': itemId,
+        review_state: 'draft',
+        nis_species_name_original: `Species ${itemNumber}`,
+        nis_species_name_accepted: `Species ${itemNumber} accepted`,
+        nis_scientificname_accepted: `Scientificus acceptus ${itemNumber}`,
+        nis_region: 'Europe',
+        nis_subregion: 'Western Europe',
+        nis_country: 'France',
+        nis_status: 'Established',
+        nis_group: 'Fish',
+        nis_year: 2020 + itemNumber,
+        nis_assigned_to: `User ${itemNumber} (user${itemNumber})`,
+      };
+      return {
+        species_name_original: `Species ${itemNumber}`,
+        species_name_accepted: `Species ${itemNumber} accepted`,
+        scientificname_accepted: `Scientificus acceptus ${itemNumber}`,
+        region: 'Europe',
+        subregion: 'Western Europe',
+        country: 'France',
+        year: 2020 + itemNumber,
+        items: [itemData],
+      };
+    }
+
+    it('shows the duplicate info banner when check-duplicates param is set', async () => {
+      mockDuplicateFetch(
+        ['/marine/item-1', '/marine/item-3'],
+        [makeGroup(1), makeGroup(3)],
+      );
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText(/duplicate records/)).toBeInTheDocument();
+      });
+      expect(screen.getByText(/2 duplicate records/)).toBeInTheDocument();
+      expect(screen.getByText(/2 groups/)).toBeInTheDocument();
+    });
+
+    it('filters table to show only duplicate items', async () => {
+      mockDuplicateFetch(
+        ['/marine/item-1', '/marine/item-3'],
+        [makeGroup(1), makeGroup(3)],
+      );
+      const items = buildItems(5);
+      renderComponent({ items });
+      await waitFor(() => {
+        expect(screen.getByText(/duplicate records/)).toBeInTheDocument();
+      });
+      expect(screen.getByText('Species 1')).toBeInTheDocument();
+      expect(screen.getByText('Species 3')).toBeInTheDocument();
+      expect(screen.queryByText('Species 2')).toBeNull();
+      expect(screen.queryByText('Species 4')).toBeNull();
+      expect(screen.queryByText('Species 5')).toBeNull();
+    });
+
+    it('renders a Clear link that removes check-duplicates from URL', async () => {
+      mockDuplicateFetch([], []);
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Clear')).toBeInTheDocument();
+      });
+      const clearLink = screen.getByText('Clear');
+      expect(clearLink.tagName).toBe('A');
+      expect(clearLink.getAttribute('href')).not.toContain('check-duplicates');
+    });
+  });
+
+  describe('item selection', () => {
+    it('toggles checkbox selection', async () => {
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      const checkboxes = document.querySelectorAll('.ui.checkbox input');
+      expect(checkboxes.length).toBeGreaterThan(0);
+      fireEvent.click(checkboxes[0]);
+      // Selection panel should appear after clicking a checkbox
+      await waitFor(() => {
+        expect(screen.getByText(/Assign 1 selected item/)).toBeInTheDocument();
+      });
+    });
+
+    it('removes selection when checkbox is unchecked', async () => {
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      const checkboxes = document.querySelectorAll('.ui.checkbox input');
+      fireEvent.click(checkboxes[0]);
+      await waitFor(() => {
+        expect(screen.getByText(/Assign 1 selected item/)).toBeInTheDocument();
+      });
+      fireEvent.click(checkboxes[0]);
+      await waitFor(() => {
+        expect(
+          screen.queryByText(/Assign 1 selected item/),
+        ).not.toBeInTheDocument();
+      });
+    });
+
+    it('updates count when selecting multiple items', async () => {
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      const checkboxes = document.querySelectorAll('.ui.checkbox input');
+      fireEvent.click(checkboxes[0]);
+      fireEvent.click(checkboxes[1]);
+      await waitFor(() => {
+        expect(screen.getByText(/Assign 2 selected items/)).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('bulk assign panel', () => {
+    it('shows Cancel and Assign buttons after selection', async () => {
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      const checkboxes = document.querySelectorAll('.ui.checkbox input');
+      fireEvent.click(checkboxes[0]);
+      await waitFor(() => {
+        expect(screen.getByText('Cancel')).toBeInTheDocument();
+      });
+      expect(screen.getByText('Assign')).toBeInTheDocument();
+    });
+
+    it('Assign button is disabled when no assignee is selected', async () => {
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      const checkboxes = document.querySelectorAll('.ui.checkbox input');
+      fireEvent.click(checkboxes[0]);
+      await waitFor(() => {
+        expect(screen.getByText('Assign')).toBeInTheDocument();
+      });
+      const assignButton = screen.getByText('Assign').closest('button');
+      expect(assignButton).toBeDisabled();
+    });
+
+    it('Cancel button clears selection', async () => {
+      renderComponent();
+      await waitFor(() => {
+        expect(screen.getByText('Species 1')).toBeInTheDocument();
+      });
+      const checkboxes = document.querySelectorAll('.ui.checkbox input');
+      fireEvent.click(checkboxes[0]);
+      await waitFor(() => {
+        expect(screen.getByText('Cancel')).toBeInTheDocument();
+      });
+      fireEvent.click(screen.getByText('Cancel'));
+      await waitFor(() => {
+        expect(screen.queryByText('Cancel')).not.toBeInTheDocument();
+      });
+    });
+  });
+});