Tempest/imports/ui/App.jsx

import { Meteor } from 'meteor/meteor';
import {Roles} from 'meteor/alanning:roles';
import React, { useState } from 'react';
import {createTheme, ThemeProvider} from '@mui/material/styles'
import { useTracker } from 'meteor/react-meteor-data';
import _ from 'lodash';
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import {Page} from './Page'
import Assignments from './pages/Assignments'
import Assets from './pages/Assets'
import History from './pages/History'
import Users from './pages/Users'
import Admin from './pages/Admin'

const appTheme = createTheme({
	components: {
		MuiTableSortLabel: {
			styleOverrides: {
				root: {
					"&.Mui-active": {
						color: 'white',
						"&:hover": {
							color: '#d2d1d1'
						},
					},
					color: 'white',
					backgroundColor: '#333447',
					"&:hover": {
						color: '#d2d1d1',
					},
				},
				icon: {
					'& path': {
						fill: 'white'
					}
				}
			}
		},
		MuiTableCell: {
			styleOverrides: {
				// root: {
				// 	'&:hover': {
				// 		color: 'white !important'
				// 	}
				// },
				head: {
					color: 'white !important',
					backgroundColor: '#333447',
					'&:hover': {
						color: 'white !important'
					},
					hover: {
						color: 'white !important'
					}
				},
				// hover: {
				// 	color: 'white !important',
				// 	'&:hover': {
				// 		color: 'white !important'
				// 	}
				// }
			}
		},
	}
})

export const App = () => {
	const {user, canManageLaptops, isAdmin} = useTracker(() => {
		const user = Meteor.user();
		const canManageLaptops = user && Roles.userIsInRole(user._id, 'laptop-management', 'global');
		const isAdmin = user && Roles.userIsInRole(user._id, 'admin', 'global');
		
		return {
			user,
			canManageLaptops,
			isAdmin
		}
	})

	return (
		<ThemeProvider theme={appTheme}>
			<BrowserRouter>
				<Routes>
					<Route path="/" element={<Page>
						<div className="container">
							<div className="row">
								TODO: Some statistics and such.
							</div>
						</div>
					</Page>}/>
					<Route path="/assignments/*" element={<Page>
						{canManageLaptops && <Assignments/>}
					</Page>}/>
					<Route path="/assets/*" element={<Page>
						{isAdmin && <Assets/>}
					</Page>}/>
					<Route path="/admin/*" element={<Page>
						{isAdmin && <Admin/>}
					</Page>}/>
					<Route path="/history/*" element={<Page>
							{canManageLaptops && <History/>}
						</Page>}/>
					<Route path="/users/*" element={<Page>
						{isAdmin && <Users/>}
					</Page>}/>
				</Routes>
			</BrowserRouter>
		</ThemeProvider>
	)
}