Rewrite devices dashboard page in react

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

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

src/apps/dashboard/components/table/DateTimeCell.tsx

@@ -0,0 +1,17 @@
+import format from 'date-fns/format';
+import type { MRT_Cell, MRT_RowData } from 'material-react-table';
+import { FC } from 'react';
+
+import { useLocale } from 'hooks/useLocale';
+
+interface CellProps {
+    cell: MRT_Cell<MRT_RowData>
+}
+
+const DateTimeCell: FC<CellProps> = ({ cell }) => {
+    const { dateFnsLocale } = useLocale();
+
+    return format(cell.getValue<Date>(), 'Pp', { locale: dateFnsLocale });
+};
+
+export default DateTimeCell;

src/apps/dashboard/components/table/TablePage.tsx

@@ -0,0 +1,63 @@
+import Box from '@mui/material/Box/Box';
+import Typography from '@mui/material/Typography/Typography';
+import { type MRT_RowData, type MRT_TableInstance, MaterialReactTable } from 'material-react-table';
+import React from 'react';
+
+import Page, { type PageProps } from 'components/Page';
+
+interface TablePageProps<T extends MRT_RowData> extends PageProps {
+    title: string
+    table: MRT_TableInstance<T>
+}
+
+export const DEFAULT_TABLE_OPTIONS = {
+    // Enable custom features
+    enableColumnPinning: true,
+    enableColumnResizing: true,
+
+    // Sticky header/footer
+    enableStickyFooter: true,
+    enableStickyHeader: true,
+    muiTableContainerProps: {
+        sx: {
+            maxHeight: 'calc(100% - 7rem)' // 2 x 3.5rem for header and footer
+        }
+    }
+};
+
+const TablePage = <T extends MRT_RowData>({
+    title,
+    table,
+    children,
+    ...pageProps
+}: TablePageProps<T>) => {
+    return (
+        <Page
+            title={title}
+            {...pageProps}
+        >
+            <Box
+                className='content-primary'
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%'
+                }}
+            >
+                <Box
+                    sx={{
+                        marginBottom: 1
+                    }}
+                >
+                    <Typography variant='h2'>
+                        {title}
+                    </Typography>
+                </Box>
+                <MaterialReactTable table={table} />
+            </Box>
+            {children}
+        </Page>
+    );
+};
+
+export default TablePage;