feat: enhance board and category management permissions; improve button visibility based on user access levels

Author: Digital39999

app/routes/groups.$groupId.$categoryId._index.tsx

@@ -129,6 +129,9 @@ export default function Boards() {
 
 	useFetcherResponse(fetcher, toast, () => setModalOpen(null));
 
+	const canManageAnyBoard = useMemo(() => boards.some((b) => canManage(b.accessLevel, user?.isDev)), [boards, user?.isDev]);
+	const canCreateBoard = useMemo(() => canManage(category.accessLevel, user?.isDev), [category.accessLevel, user?.isDev]);
+
 	const finalBoards = useMemo(() => {
 		if (!dbcSearch) return boards;
 		return boards.filter((b) => dbcSearch ? b.name.includes(dbcSearch) : true);
@@ -146,23 +149,26 @@ export default function Boards() {
 					name={`Boards in category: ${category.name}`}
 					description={'List of all boards that are currently available to you in this category.'}
 					goBackPath={`/groups/${group.id}`}
-					customButtons={canManage(category.accessLevel, user?.isDev) ? [{
-						type: 'normal',
-						label: 'Manage Boards',
-						icon: <FaTools />,
-						isDisabled: boards.length === 0,
-						onClick: () => setEditorMode(!editorMode),
-						isLoading: fetcher.state === 'loading',
-						tooltip: 'Manage boards',
-						isActive: editorMode,
-					}, {
-						type: 'normal',
-						label: 'Create Board',
-						icon: <FaPlus />,
-						onClick: () => setModalOpen('createBoard'),
-						isLoading: fetcher.state === 'loading',
-						tooltip: 'Create board',
-					}] : []}
+					customButtons={[
+						...(canManageAnyBoard ? [{
+							type: 'normal',
+							label: 'Manage Boards',
+							icon: <FaTools />,
+							isDisabled: boards.length === 0,
+							onClick: () => setEditorMode(!editorMode),
+							isLoading: fetcher.state === 'loading',
+							tooltip: 'Manage boards',
+							isActive: editorMode,
+						}] as const : []),
+						...(canCreateBoard ? [{
+							type: 'normal',
+							label: 'Create Board',
+							icon: <FaPlus />,
+							onClick: () => setModalOpen('createBoard'),
+							isLoading: fetcher.state === 'loading',
+							tooltip: 'Create board',
+						}] as const : []),
+					]}
 				/>
 
 				<SearchBar search={search} setSearch={setSearch} whatSearch={'boards'} id='boards' dividerMY={4} isShown={showSearches} />
@@ -182,7 +188,7 @@ export default function Boards() {
 						setModalOpen('updateBoard');
 						setBoardId(finalBoards[index]!.id);
 					} : undefined}
-					onReorder={editorMode ? (orderedIds) => {
+					onReorder={editorMode && canCreateBoard ? (orderedIds) => {
 						setTempBoards(orderedIds);
 					} : undefined}
 					onFlashCreate={editorMode ? (index) => {

app/routes/groups.$groupId._index.tsx

@@ -112,8 +112,9 @@ export default function Categories() {
 		setTempCategories([]);
 	}, [fetcher, tempCategories]);
 
-	const canManageAnything = useMemo(() => categories.some((c) => canManage(c.accessLevel, user?.isDev)), [categories, user?.isDev]);
-	useEffect(() => setCanInvite?.(canManageAnything), [canManageAnything, setCanInvite]);
+	const canManageAnyCategory = useMemo(() => categories.some((c) => canManage(c.accessLevel, user?.isDev)), [categories, user?.isDev]);
+	const canCreateCategory = useMemo(() => canManage(group.accessLevel, user?.isDev), [group.accessLevel, user?.isDev]);
+	useEffect(() => setCanInvite?.(canManageAnyCategory), [canManageAnyCategory, setCanInvite]);
 
 	return (
 		<VStack w='100%' align='center' px={4} spacing={{ base: 8, md: '30px' }} mt={{ base: 8, md: 16 }} id='a1'>
@@ -129,7 +130,7 @@ export default function Categories() {
 						to: `/groups/${group.id}/calendar`,
 						tooltip: 'View group calendar',
 						reloadDocument: true,
-					}, ...(canManage(group.accessLevel, user?.isDev) ? [{
+					}, ...(canManageAnyCategory ? [{
 						type: 'normal',
 						label: 'Manage Categories',
 						icon: <FaTools />,
@@ -138,7 +139,7 @@ export default function Categories() {
 						isLoading: fetcher.state === 'loading',
 						tooltip: 'Manage categories',
 						isActive: editorMode,
-					}, {
+					}] as const : []), ...(canCreateCategory ? [{
 						type: 'normal',
 						label: 'Create Category',
 						icon: <FaPlus />,
@@ -161,13 +162,12 @@ export default function Categories() {
 						setModalOpen('updateCategory');
 						setCategoryId(finalCategories[index]!.id);
 					} : undefined}
-					onReorder={editorMode ? (orderedIds) => {
+					onReorder={editorMode && canCreateCategory ? (orderedIds) => {
 						setTempCategories(orderedIds);
 					} : undefined}
 					cards={finalCategories.map((c) => ({
 						id: c.id,
 						editorMode,
-						canManageAnything,
 						sizeBytes: c.totalSizeBytes,
 						isDeleteDisabled: c.boards > 0,
 						url: `/groups/${group.id}/${c.id}`,

app/routes/groups._index.tsx

@@ -5,6 +5,7 @@ import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node';
 import { useFetcherResponse } from '~/hooks/useFetcherResponse';
 import { canInviteAndPermit, canManage } from '~/other/utils';
+import { FaChartBar, FaPlus, FaTools } from 'react-icons/fa';
 import { SearchBar } from '~/components/layout/SearchBar';
 import { NoticeCard } from '~/components/other/Notice';
 import CardList from '~/components/layout/CardList';
@@ -13,7 +14,6 @@ import { authenticator } from '~/utils/auth.server';
 import { RootContext } from '~/components/Context';
 import MenuBar from '~/components/layout/MenuBar';
 import configServer from '~/utils/config.server';
-import { FaPlus, FaTools } from 'react-icons/fa';
 import { WebReturnType } from '~/other/types';
 import { api } from '~/utils/web.server';
 
@@ -107,8 +107,9 @@ export default function Groups() {
 		setTempGroups([]);
 	}, [fetcher, tempGroups]);
 
-	const hasAdminOrDevAccess = useMemo(() => groups.some((g) => canInviteAndPermit(g.accessLevel, user?.isDev)), [groups, user?.isDev]);
-	useEffect(() => setCanInvite?.(hasAdminOrDevAccess), [hasAdminOrDevAccess, setCanInvite]);
+	const canManageAnyGroup = useMemo(() => user?.isDev || groups.some((g) => canManage(g.accessLevel, user?.isDev)), [groups, user?.isDev]);
+	const canInviteAnyGroup = useMemo(() => user?.isDev || groups.some((g) => canInviteAndPermit(g.accessLevel, user?.isDev)), [groups, user?.isDev]);
+	useEffect(() => setCanInvite?.(canInviteAnyGroup), [canInviteAnyGroup, setCanInvite]);
 	useEffect(() => setShowAllBoards?.(groups.length !== 0), [setShowAllBoards]);
 
 	return (
@@ -117,24 +118,34 @@ export default function Groups() {
 				<MenuBar
 					name={'Category Groups'}
 					description={'List of all groups that are currently available to you.'}
-					customButtons={hasAdminOrDevAccess ? [{
-						type: 'normal',
-						label: 'Manage Groups',
-						icon: <FaTools />,
-						isDisabled: groups.length === 0,
-						onClick: () => setEditorMode(!editorMode),
-						isLoading: fetcher.state === 'loading',
-						tooltip: 'Manage groups',
-						isActive: editorMode,
-					}, {
-						type: 'normal',
-						label: 'Create Group',
-						icon: <FaPlus />,
-						onClick: () => setModalOpen('createGroup'),
-						isLoading: fetcher.state === 'loading',
-						isDisabled: !user?.isDev,
-						tooltip: 'Create group',
-					}] : []}
+					customButtons={[
+						...(user?.isDev ? [{
+							type: 'link',
+							label: 'Analytics',
+							icon: <FaChartBar />,
+							to: '/analytics',
+							tooltip: 'View analytics overview',
+							reloadDocument: true,
+						}] as const : []),
+						...(canManageAnyGroup ? [{
+							type: 'normal',
+							label: 'Manage Groups',
+							icon: <FaTools />,
+							isDisabled: groups.length === 0,
+							onClick: () => setEditorMode(!editorMode),
+							isLoading: fetcher.state === 'loading',
+							tooltip: 'Manage groups',
+							isActive: editorMode,
+						}] as const : []),
+						...(user?.isDev ? [{
+							type: 'normal',
+							label: 'Create Group',
+							icon: <FaPlus />,
+							onClick: () => setModalOpen('createGroup'),
+							isLoading: fetcher.state === 'loading',
+							tooltip: 'Create group',
+						}] as const : []),
+					]}
 				/>
 
 				<SearchBar search={search} setSearch={setSearch} whatSearch={'groups'} id='groups' dividerMY={4} isShown={showSearches} />