navbar admin dash access for all roles that need it

apps/iris/src/components/navbar.tsx

@@ -27,6 +27,10 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Spinner } from '@/components/ui/spinner';
 import { LanguageSelector } from '@/components/util/language-selector';
+import {
+  ADMIN_UI_PERMISSIONS,
+  useHasPermission,
+} from '@/hooks/use-has-permission';
 import { authClient } from '@/utils/authentication';
 
 type NavbarProps = {
@@ -64,7 +68,9 @@ export function Navbar({
           </div>
 
           {data && showLinks && (
-            <NavLinks userRoles={data.user ? data.user.roles : ['user']} />
+            <NavLinks
+              userPermissions={data.user ? data.user.permissions : []}
+            />
           )}
 
           <div className="ml-auto flex items-center gap-3">
@@ -188,11 +194,11 @@ export function Navbar({
   );
 }
 
-function NavLinks({ userRoles }: { userRoles?: string[] }) {
+function NavLinks({ userPermissions }: { userPermissions?: string[] }) {
   const navigate = useNavigate();
   const { t } = useTranslation();
 
-  const isAdmin = userRoles?.includes('admin');
+  const canSeeAdminUi = useHasPermission(ADMIN_UI_PERMISSIONS, userPermissions);
 
   return (
     <div className="ml-8 hidden items-center gap-6 md:flex">
@@ -214,7 +220,7 @@ function NavLinks({ userRoles }: { userRoles?: string[] }) {
         <Book />
         {t('substitutions')}
       </Button>
-      {isAdmin && (
+      {canSeeAdminUi && (
         <Button
           className="text-muted-foreground hover:text-foreground"
           onClick={() => navigate({ to: '/admin' })}

apps/iris/src/components/util/permission-guard.tsx

@@ -1,26 +1,26 @@
 import { Navigate } from '@tanstack/react-router';
 import type { ReactNode } from 'react';
+import { useHasPermission } from '@/hooks/use-has-permission';
 import { authClient } from '@/utils/authentication';
 
 type PermissionGuardProps = {
   children: ReactNode;
-  permission: string;
+  permission: string | readonly string[];
 };
 
 export function PermissionGuard({
   children,
   permission,
 }: PermissionGuardProps) {
   const { data } = authClient.useSession();
-
   const user = data?.user;
+  const hasPermission = useHasPermission(permission, user?.permissions);
+
   if (!user) {
     return <Navigate to="/auth/login" />;
   }
 
-  if (
-    !(user.permissions.includes(permission) || user.permissions.includes('*'))
-  ) {
+  if (!hasPermission) {
     return <Navigate search={{ error: 'unauthorized' }} to="/auth/error" />;
   }
 

apps/iris/src/hooks/use-has-permission.ts

@@ -1,5 +1,19 @@
+export const ADMIN_UI_PERMISSIONS = [
+  'import:timetable',
+  'substitution:create',
+  'movedLesson:create',
+  'announcements:create',
+  'system-messages:manage',
+  'doorlock:stats:read',
+  'doorlock:devices:read',
+  'doorlock:cards:read',
+  'doorlock:logs:read',
+  'users:read',
+  'roles:read',
+] as const;
+
 export function useHasPermission(
-  permission: string,
+  permission: string | readonly string[],
   permissions?: string[] | null
 ): boolean {
   if (!permissions) {
@@ -8,5 +22,10 @@ export function useHasPermission(
   if (permissions.includes('*')) {
     return true;
   }
+
+  if (typeof permission !== 'string') {
+    return permission.some((item) => permissions.includes(item));
+  }
+
   return permissions.includes(permission);
 }

apps/iris/src/routes/_private/admin/route.tsx

@@ -1,45 +1,37 @@
-import { createFileRoute, Outlet, useNavigate } from '@tanstack/react-router';
+import { createFileRoute, Outlet } from '@tanstack/react-router';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AdminSidebar } from '@/components/admin/sidebar';
 import { Navbar } from '@/components/navbar';
 import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
-import { authClient } from '@/utils/authentication';
+import { PermissionGuard } from '@/components/util/permission-guard';
+import { ADMIN_UI_PERMISSIONS } from '@/hooks/use-has-permission';
 
 export const Route = createFileRoute('/_private/admin')({
   component: AppLayoutComponent,
 });
 
 function AppLayoutComponent() {
   const { t } = useTranslation();
-  const { data: session } = authClient.useSession();
-  const navigate = useNavigate();
 
   useEffect(() => {
     document.title = t('PageTitles.adminPanel');
   }, [t]);
 
-  useEffect(() => {
-    if (session?.user && !session.user.roles.includes('admin')) {
-      navigate({
-        replace: true,
-        to: '/',
-      });
-    }
-  }, [session, navigate]);
-
   return (
-    <SidebarProvider>
-      <AdminSidebar />
-      <main className="flex grow flex-col">
-        <Navbar showLinks={false} showLogo={false}>
-          <SidebarTrigger />
-        </Navbar>
+    <PermissionGuard permission={ADMIN_UI_PERMISSIONS}>
+      <SidebarProvider>
+        <AdminSidebar />
+        <main className="flex grow flex-col">
+          <Navbar showLinks={false} showLogo={false}>
+            <SidebarTrigger />
+          </Navbar>
 
-        <div className="grow overflow-auto p-4">
-          <Outlet />
-        </div>
-      </main>
-    </SidebarProvider>
+          <div className="grow overflow-auto p-4">
+            <Outlet />
+          </div>
+        </main>
+      </SidebarProvider>
+    </PermissionGuard>
   );
 }