diff --git a/src/apps/dashboard/routes/devices/index.tsx b/src/apps/dashboard/routes/devices/index.tsx index 7600e51b46..c0ec1e96b9 100644 --- a/src/apps/dashboard/routes/devices/index.tsx +++ b/src/apps/dashboard/routes/devices/index.tsx @@ -5,6 +5,8 @@ import Box from '@mui/material/Box/Box'; import Button from '@mui/material/Button/Button'; import IconButton from '@mui/material/IconButton/IconButton'; import Tooltip from '@mui/material/Tooltip/Tooltip'; +import format from 'date-fns/format'; +import parseISO from 'date-fns/parseISO'; import { type MRT_ColumnDef, useMaterialReactTable } from 'material-react-table'; import React, { useCallback, useMemo, useState } from 'react'; @@ -17,9 +19,9 @@ import DeviceNameCell from 'apps/dashboard/features/devices/components/DeviceNam import type { DeviceInfoCell } from 'apps/dashboard/features/devices/types/deviceInfoCell'; import ConfirmDialog from 'components/ConfirmDialog'; import { useApi } from 'hooks/useApi'; +import { useLocale } from 'hooks/useLocale'; import { type UsersRecords, useUsersDetails } from 'hooks/useUsers'; import globalize from 'lib/globalize'; -import { parseISO8601Date, toLocaleString } from 'scripts/datetime'; const getUserCell = (users: UsersRecords) => function UserCell({ renderedCellValue, row }: DeviceInfoCell) { return ( @@ -36,6 +38,7 @@ const getUserCell = (users: UsersRecords) => function UserCell({ renderedCellVal export const Component = () => { const { api } = useApi(); const { data: devices, isLoading: isDevicesLoading } = useDevices({}); + const { dateFnsLocale } = useLocale(); const { usersById: users, names: userNames, isLoading: isUsersLoading } = useUsersDetails(); const [ isDeleteConfirmOpen, setIsDeleteConfirmOpen ] = useState(false); @@ -99,10 +102,10 @@ export const Component = () => { const columns = useMemo[]>(() => [ { id: 'DateLastActivity', - accessorFn: row => parseISO8601Date(row.DateLastActivity), - header: globalize.translate('LabelTime'), + accessorFn: row => row.DateLastActivity ? parseISO(row.DateLastActivity) : undefined, + header: globalize.translate('LastActive'), size: 160, - Cell: ({ cell }) => toLocaleString(cell.getValue()), + Cell: ({ cell }) => format(cell.getValue(), 'Ppp', { locale: dateFnsLocale }), filterVariant: 'datetime-range', enableEditing: false }, diff --git a/src/strings/en-us.json b/src/strings/en-us.json index 8770151ff2..bff1f768cc 100644 --- a/src/strings/en-us.json +++ b/src/strings/en-us.json @@ -1007,6 +1007,7 @@ "LanNetworksHelp": "Comma separated list of IP addresses or IP/netmask entries for networks that will be considered on local network when enforcing bandwidth restrictions. If set, all other IP addresses will be considered to be on the external network and will be subject to the external bandwidth restrictions. If left blank, only the server's subnet is considered to be on the local network.", "Large": "Large", "Larger": "Larger", + "LastActive": "Last active", "LastSeen": "Last activity {0}", "LatestFromLibrary": "Recently Added in {0}", "LearnHowYouCanContribute": "Learn how you can contribute.",