diff --git a/src/settings/DevicesPage.jsx b/src/settings/DevicesPage.jsx
index 831736e42e..218a7c5190 100644
--- a/src/settings/DevicesPage.jsx
+++ b/src/settings/DevicesPage.jsx
@@ -14,8 +14,9 @@ import CollectionActions from './components/CollectionActions';
import TableShimmer from '../common/components/TableShimmer';
import SearchHeader, { filterByKeyword } from './components/SearchHeader';
import { formatTime } from '../common/util/formatter';
-import { useDeviceReadonly } from '../common/util/permissions';
+import { useAdministrator, useDeviceReadonly } from '../common/util/permissions';
import useSettingsStyles from './common/useSettingsStyles';
+import DeviceUsersValue from './components/DeviceUsersValue';
const DevicesPage = () => {
const classes = useSettingsStyles();
@@ -24,6 +25,7 @@ const DevicesPage = () => {
const groups = useSelector((state) => state.groups.items);
+ const admin = useAdministrator();
const deviceReadonly = useDeviceReadonly();
const [timestamp, setTimestamp] = useState(Date.now());
@@ -69,6 +71,7 @@ const DevicesPage = () => {
{t('deviceModel')}
{t('deviceContact')}
{t('userExpirationTime')}
+ {admin && {t('settingsUsers')}}
@@ -82,6 +85,7 @@ const DevicesPage = () => {
{item.model}
{item.contact}
{formatTime(item.expirationTime, 'date')}
+ {admin && }
{
/>
- )) : ()}
+ )) : ()}
-
+
diff --git a/src/settings/components/DeviceUsersValue.jsx b/src/settings/components/DeviceUsersValue.jsx
new file mode 100644
index 0000000000..9fc87247d4
--- /dev/null
+++ b/src/settings/components/DeviceUsersValue.jsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { Link } from '@mui/material';
+import { useCatch } from '../../reactHelper';
+import { useTranslation } from '../../common/components/LocalizationProvider';
+
+const DeviceUsersValue = ({ deviceId }) => {
+ const t = useTranslation();
+
+ const [users, setUsers] = useState();
+
+ const loadUsers = useCatch(async () => {
+ const query = new URLSearchParams({ deviceId });
+ const response = await fetch(`/api/users?${query.toString()}`);
+ if (response.ok) {
+ setUsers(await response.json());
+ } else {
+ throw Error(await response.text());
+ }
+ });
+
+ if (users) {
+ return users.map((user) => user.name).join(', ');
+ }
+ return ({t('reportShow')});
+};
+
+export default DeviceUsersValue;