Migrate to material react table

package.json

@@ -85,7 +85,7 @@
     "@jellyfin/sdk": "0.0.0-unstable.202408270502",
     "@mui/icons-material": "5.15.19",
     "@mui/material": "5.15.19",
-    "@mui/x-data-grid": "7.6.1",
+    "@mui/x-date-pickers": "7.14.0",
     "@react-hook/resize-observer": "2.0.2",
     "@tanstack/react-query": "5.51.24",
     "@tanstack/react-query-devtools": "5.51.24",
@@ -112,6 +112,7 @@
     "lodash-es": "4.17.21",
     "markdown-it": "14.1.0",
     "material-design-icons-iconfont": "6.7.0",
+    "material-react-table": "2.13.1",
     "native-promise-only": "0.8.1",
     "pdfjs-dist": "3.11.174",
     "react": "18.3.1",

src/hooks/useLogEntries.tsx → src/apps/dashboard/features/activity/api/useLogEntries.ts

@@ -1,18 +1,20 @@
 import type { ActivityLogApiGetLogEntriesRequest } from '@jellyfin/sdk/lib/generated-client';
 import type { AxiosRequestConfig } from 'axios';
+import type { Api } from '@jellyfin/sdk';
 import { getActivityLogApi } from '@jellyfin/sdk/lib/utils/api/activity-log-api';
 import { useQuery } from '@tanstack/react-query';
 
-import { JellyfinApiContext, useApi } from './useApi';
+import { useApi } from 'hooks/useApi';
 
-const fetchGetLogEntries = async (
-    currentApi: JellyfinApiContext,
-    requestParams: ActivityLogApiGetLogEntriesRequest,
+const fetchLogEntries = async (
+    api?: Api,
+    requestParams?: ActivityLogApiGetLogEntriesRequest,
     options?: AxiosRequestConfig
 ) => {
-    const { api } = currentApi;
-
-    if (!api) return;
+    if (!api) {
+        console.warn('[fetchLogEntries] No API instance available');
+        return;
+    }
 
     const response = await getActivityLogApi(api).getLogEntries(requestParams, {
         signal: options?.signal
@@ -24,10 +26,11 @@ const fetchGetLogEntries = async (
 export const useLogEntires = (
     requestParams: ActivityLogApiGetLogEntriesRequest
 ) => {
-    const currentApi = useApi();
+    const { api } = useApi();
     return useQuery({
         queryKey: ['LogEntries', requestParams],
         queryFn: ({ signal }) =>
-            fetchGetLogEntries(currentApi, requestParams, { signal })
+            fetchLogEntries(api, requestParams, { signal }),
+        enabled: !!api
     });
 };

src/apps/dashboard/features/activity/components/ActionsCell.tsx

@@ -0,0 +1,22 @@
+import IconButton from '@mui/material/IconButton/IconButton';
+import PermMedia from '@mui/icons-material/PermMedia';
+import React, { type FC } from 'react';
+import { Link } from 'react-router-dom';
+
+import type { ActivityLogEntryCell } from 'apps/dashboard/features/activity/types/ActivityLogEntryCell';
+import globalize from 'lib/globalize';
+
+const ActionsCell: FC<ActivityLogEntryCell> = ({ row }) => (
+    row.original.ItemId ? (
+        <IconButton
+            size='large'
+            title={globalize.translate('LabelMediaDetails')}
+            component={Link}
+            to={`/details?id=${row.original.ItemId}`}
+        >
+            <PermMedia fontSize='inherit' />
+        </IconButton>
+    ) : undefined
+);
+
+export default ActionsCell;

src/apps/dashboard/features/activity/components/LogLevelCell.tsx

@@ -0,0 +1,14 @@
+import type { LogLevel } from '@jellyfin/sdk/lib/generated-client/models/log-level';
+import React, { type FC } from 'react';
+
+import { ActivityLogEntryCell } from '../types/ActivityLogEntryCell';
+import LogLevelChip from './LogLevelChip';
+
+const LogLevelCell: FC<ActivityLogEntryCell> = ({ cell }) => {
+    const level = cell.getValue<LogLevel | undefined>();
+    return level ? (
+        <LogLevelChip level={level} />
+    ) : undefined;
+};
+
+export default LogLevelCell;

src/apps/dashboard/components/activityTable/OverviewCell.tsx → src/apps/dashboard/features/activity/components/OverviewCell.tsx

@@ -1,12 +1,14 @@
-import type { ActivityLogEntry } from '@jellyfin/sdk/lib/generated-client/models/activity-log-entry';
 import Info from '@mui/icons-material/Info';
 import Box from '@mui/material/Box';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import React, { FC, useCallback, useState } from 'react';
+import React, { type FC, useCallback, useState } from 'react';
 
-const OverviewCell: FC<ActivityLogEntry> = ({ Overview, ShortOverview }) => {
+import type { ActivityLogEntryCell } from '../types/ActivityLogEntryCell';
+
+const OverviewCell: FC<ActivityLogEntryCell> = ({ row }) => {
+    const { ShortOverview, Overview } = row.original;
     const displayValue = ShortOverview ?? Overview;
     const [ open, setOpen ] = useState(false);
 

src/apps/dashboard/features/activity/components/UserAvatarButton.tsx

@@ -0,0 +1,27 @@
+import type { UserDto } from '@jellyfin/sdk/lib/generated-client/models/user-dto';
+import IconButton from '@mui/material/IconButton/IconButton';
+import React, { type FC } from 'react';
+import { Link } from 'react-router-dom';
+
+import UserAvatar from 'components/UserAvatar';
+
+interface UserAvatarButtonProps {
+    user?: UserDto
+}
+
+const UserAvatarButton: FC<UserAvatarButtonProps> = ({ user }) => (
+    user?.Id ? (
+        <IconButton
+            size='large'
+            color='inherit'
+            sx={{ padding: 0 }}
+            title={user.Name || undefined}
+            component={Link}
+            to={`/dashboard/users/profile?userId=${user.Id}`}
+        >
+            <UserAvatar user={user} />
+        </IconButton>
+    ) : undefined
+);
+
+export default UserAvatarButton;

src/apps/dashboard/features/activity/types/ActivityLogEntryCell.ts

@@ -0,0 +1,7 @@
+import type { ActivityLogEntry } from '@jellyfin/sdk/lib/generated-client/models/activity-log-entry';
+import type { MRT_Cell, MRT_Row } from 'material-react-table';
+
+export interface ActivityLogEntryCell {
+    cell: MRT_Cell<ActivityLogEntry>
+    row: MRT_Row<ActivityLogEntry>
+}