feat: Preview mode

PstasDev · PstasDev · commit 996b93279e8a · 2025-08-22T13:27:01.000+02:00
diff --git a/app/app/iranyitopult/page.tsx b/app/app/iranyitopult/page.tsx
@@ -15,6 +15,7 @@ import { useUserRole } from "@/contexts/user-role-context"
 import { useAuth } from "@/contexts/auth-context"
 import { useApiQuery } from "@/lib/api-helpers"
 import { apiClient } from "@/lib/api"
+import type { UserRole } from "@/contexts/user-role-context"
 import { 
   Users, 
   Clock, 
@@ -42,7 +43,8 @@ import {
   GraduationCap,
   User,
   Loader2,
-  Settings
+  Settings,
+  Eye
 } from "lucide-react"
 
 // Function to get dynamic welcome message based on time of day and season
@@ -102,6 +104,20 @@ function getDynamicWelcomeMessage(firstName: string = 'Felhasználó'): string {
   }
 }
 
+// Function to get role display name in Hungarian
+function getRoleDisplayName(role: UserRole | null): string {
+  switch (role) {
+    case 'admin':
+      return 'adminisztrátor'
+    case 'class-teacher':
+      return 'osztályfőnök'
+    case 'student':
+      return 'diák'
+    default:
+      return 'ismeretlen'
+  }
+}
+
 // Admin Widget Components - Database Admin Style
 function ActiveUsersWidget() {
   const { isAuthenticated } = useAuth()
@@ -889,10 +905,18 @@ function FirstStepsWidget() {
 }
 
 export default function Page() {
-  const { currentRole } = useUserRole()
+  const { currentRole, isPreviewMode, actualUserRole } = useUserRole()
   const { user } = useAuth()
   const [welcomeMessage, setWelcomeMessage] = useState('')
 
+  // Debug logging
+  console.log('🎭 Dashboard state:', {
+    currentRole,
+    actualUserRole,
+    isPreviewMode,
+    calculation: `${actualUserRole} !== null && ${actualUserRole} !== ${currentRole} && ${actualUserRole} === 'admin'`
+  })
+
   // Update welcome message on component mount and every minute
   useEffect(() => {
     const updateMessage = () => {
@@ -1011,6 +1035,31 @@ export default function Page() {
       <SidebarInset>
         <SiteHeader />
         <div className="flex-1 space-y-4 p-4 md:p-6">
+          {/* Preview Mode Banner */}
+          {isPreviewMode && (
+            <Card className="border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950/30">
+              <CardContent className="pt-4">
+                <div className="flex items-center gap-3">
+                  <div className="p-2 bg-blue-500 rounded-lg">
+                    <Eye className="h-4 w-4 text-white" />
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="font-semibold text-blue-900 dark:text-blue-100">
+                      Előnézeti mód
+                    </h3>
+                    <p className="text-sm text-blue-700 dark:text-blue-200">
+                      Ön {getRoleDisplayName(actualUserRole)} jogosultsággal rendelkezik, de jelenleg a(z) {getRoleDisplayName(currentRole)} nézetet tekinti meg előnézetként. 
+                      Az itt látható adatok valós információk, de csak megtekintés céljából szolgálnak.
+                    </p>
+                  </div>
+                  <Badge variant="secondary" className="bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900 dark:text-blue-200 dark:border-blue-700">
+                    Előnézet
+                  </Badge>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
           {/* Header Section */}
           <Card>
             <CardContent className="">
diff --git a/components/role-synchronizer.tsx b/components/role-synchronizer.tsx
@@ -6,16 +6,30 @@ import { useUserRole } from '@/contexts/user-role-context'
 
 export function RoleSynchronizer() {
   const { permissions, getCurrentRole, isLoading, error } = usePermissions()
-  const { setRole, currentRole } = useUserRole()
+  const { setRole, currentRole, initializeUserRole, actualUserRole } = useUserRole()
   const lastSyncedRole = useRef<string | null>(null)
   const syncInProgress = useRef(false)
+  const hasInitialized = useRef(false)
 
   useEffect(() => {
     // Only sync role when permissions are loaded and we have valid permissions
     if (!isLoading && permissions && !syncInProgress.current) {
       try {
         const primaryRole = getCurrentRole()
         
+        // Initialize the actual user role on first load
+        if (!hasInitialized.current && actualUserRole === null) {
+          console.log(`🎭 Initializing actual user role: ${primaryRole}`)
+          initializeUserRole(primaryRole)
+          hasInitialized.current = true
+          
+          // Don't sync current role on first initialization if it matches primary role
+          if (currentRole === primaryRole) {
+            console.log(`🎭 Current role already matches primary role: ${primaryRole}`)
+            return
+          }
+        }
+        
         // Only update role if it's different from current AND it's different from last synced
         // This prevents infinite loops and unnecessary role changes
         if (primaryRole !== currentRole && primaryRole !== lastSyncedRole.current) {
@@ -43,7 +57,7 @@ export function RoleSynchronizer() {
       console.warn('⚠️ Permissions error, preserving current role to prevent logout:', currentRole)
       // Don't sync roles when there's an error to prevent unwanted logouts
     }
-  }, [isLoading, permissions, error, getCurrentRole, currentRole, setRole])
+  }, [isLoading, permissions, error, getCurrentRole, currentRole, setRole, initializeUserRole, actualUserRole])
 
   // This component doesn't render anything
   return null
diff --git a/components/site-header.tsx b/components/site-header.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
 import { SidebarTrigger } from "@/components/ui/sidebar"
 import { Clapperboard } from "lucide-react"
+import { useUserRole } from "@/contexts/user-role-context"
 
 // Map of routes to page names based on the sidebar data
 const routeToPageName: Record<string, string> = {
@@ -28,8 +29,23 @@ function getCurrentPageName(pathname: string): string {
 
 export function SiteHeader() {
   const pathname = usePathname()
+  const { isPreviewMode, currentRole, actualUserRole } = useUserRole()
   const currentPageName = getCurrentPageName(pathname)
 
+  // Function to get role display name in Hungarian
+  const getRoleDisplayName = (role: string | null): string => {
+    switch (role) {
+      case 'admin':
+        return 'adminisztrátor'
+      case 'class-teacher':
+        return 'osztályfőnök'
+      case 'student':
+        return 'diák'
+      default:
+        return 'ismeretlen'
+    }
+  }
+
   return (
       <header className="flex h-16 md:h-14 shrink-0 items-center gap-2 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50 transition-[width,height] ease-linear">
         <div className="flex items-center w-full gap-3 px-4 lg:gap-4 lg:px-6">
@@ -48,6 +64,14 @@ export function SiteHeader() {
               <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 rounded border border-orange-200 dark:border-orange-700">
                 BETA
               </span>
+              {isPreviewMode && (
+                <span 
+                  className="px-1.5 py-0.5 text-[10px] font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 rounded border border-blue-200 dark:border-blue-700"
+                  title={`Előnézeti mód: ${getRoleDisplayName(actualUserRole)} nézi meg a(z) ${getRoleDisplayName(currentRole)} nézetet`}
+                >
+                  ELŐNÉZET
+                </span>
+              )}
             </div>
           </div>
         </div>
diff --git a/components/team-switcher.tsx b/components/team-switcher.tsx
@@ -26,6 +26,7 @@ interface Team {
   logo: React.ElementType
   plan: string
   role: UserRole
+  isPreview?: boolean
 }
 
 export function TeamSwitcher({
@@ -34,12 +35,63 @@ export function TeamSwitcher({
   teams: Team[]
 }) {
   const { isMobile } = useSidebar()
-  const { currentRole, setRole } = useUserRole()
+  const { currentRole, setRole, isPreviewMode, actualUserRole } = useUserRole()
   const { permissions, getAvailableRoles, isLoading } = usePermissions()
   
-  // Filter teams based on user permissions
+  // Filter teams based on user permissions and admin preview logic
   const availableRoles = getAvailableRoles()
-  const allowedTeams = teams.filter(team => availableRoles.includes(team.role))
+  
+  // Check if user is an admin (any type)
+  const isAnyAdmin = permissions?.permissions?.is_admin || 
+                   permissions?.permissions?.is_system_admin || 
+                   permissions?.permissions?.is_teacher_admin ||
+                   permissions?.permissions?.is_developer_admin ||
+                   permissions?.role_info?.admin_type === 'system_admin' ||
+                   permissions?.role_info?.admin_type === 'teacher' ||
+                   permissions?.role_info?.admin_type === 'dev' ||
+                   permissions?.role_info?.admin_type === 'developer' ||
+                   permissions?.role_info?.primary_role === 'developer_admin'
+
+  // Check if user is both admin and "ofő" (class teacher)
+  const isAdminAndClassTeacher = isAnyAdmin && (
+    permissions?.permissions?.is_osztaly_fonok || 
+    permissions?.role_info?.special_role === 'class_teacher'
+  )
+
+  let allowedTeams = teams.filter(team => {
+    if (!isAnyAdmin) {
+      // Non-admins only see their available roles
+      return availableRoles.includes(team.role)
+    }
+    
+    // Admins can always see admin role
+    if (team.role === 'admin') {
+      return true
+    }
+    
+    // Admins can always preview student role
+    if (team.role === 'student') {
+      return true
+    }
+    
+    // For class-teacher role:
+    // - If admin is also a class teacher (ofő+admin), show it as actual role
+    // - If admin is not a class teacher, show it as preview
+    if (team.role === 'class-teacher') {
+      return true // Always show for admins (either as actual or preview)
+    }
+    
+    return availableRoles.includes(team.role)
+  })
+
+  // Mark preview status for admin users
+  allowedTeams = allowedTeams.map(team => ({
+    ...team,
+    isPreview: isAnyAdmin && team.role !== 'admin' && (
+      team.role === 'student' || 
+      (team.role === 'class-teacher' && !isAdminAndClassTeacher)
+    )
+  }))
   
   const activeTeam = allowedTeams.find(team => team.role === currentRole) || allowedTeams[0]
 
@@ -76,11 +128,18 @@ export function TeamSwitcher({
             <div className="grid flex-1 text-left text-sm leading-tight">
               <div className="flex items-center gap-2">
                 <span className="truncate font-medium">{activeTeam.name}</span>
+                {activeTeam.isPreview && (
+                  <span className="px-1 py-0.5 text-[9px] font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 rounded border border-blue-200 dark:border-blue-700">
+                    ELŐNÉZET
+                  </span>
+                )}
                 <span className="px-1 py-0.5 text-[9px] font-semibold bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 rounded border border-orange-200 dark:border-orange-700">
                   BETA
                 </span>
               </div>
-              <span className="truncate text-xs">{activeTeam.plan}</span>
+              <span className="truncate text-xs">
+                {activeTeam.isPreview ? `${activeTeam.plan} (Előnézet)` : activeTeam.plan}
+              </span>
             </div>
           </SidebarMenuButton>
         </SidebarMenuItem>
@@ -107,11 +166,18 @@ export function TeamSwitcher({
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <div className="flex items-center gap-2">
                   <span className="truncate font-medium">{activeTeam.name}</span>
+                  {activeTeam.isPreview && (
+                    <span className="px-1 py-0.5 text-[9px] font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 rounded border border-blue-200 dark:border-blue-700">
+                      ELŐNÉZET
+                    </span>
+                  )}
                   <span className="px-1 py-0.5 text-[9px] font-semibold bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200 rounded border border-orange-200 dark:border-orange-700">
                     BETA
                   </span>
                 </div>
-                <span className="truncate text-xs">{activeTeam.plan}</span>
+                <span className="truncate text-xs">
+                  {activeTeam.isPreview ? `${activeTeam.plan} (Előnézet)` : activeTeam.plan}
+                </span>
               </div>
               <ChevronsUpDown className="ml-auto" />
             </SidebarMenuButton>
@@ -134,7 +200,14 @@ export function TeamSwitcher({
                 <div className="flex size-6 items-center justify-center rounded-md border">
                   <team.logo className="size-3.5 shrink-0" />
                 </div>
-                {team.name}
+                <div className="flex-1 flex items-center gap-2">
+                  <span>{team.name}</span>
+                  {team.isPreview && (
+                    <span className="px-1 py-0.5 text-[8px] font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 rounded border border-blue-200 dark:border-blue-700">
+                      ELŐNÉZET
+                    </span>
+                  )}
+                </div>
                 <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
               </DropdownMenuItem>
             ))}
diff --git a/contexts/permissions-context.tsx b/contexts/permissions-context.tsx
@@ -276,26 +276,29 @@ export function PermissionsProvider({ children }: { children: React.ReactNode })
     const { permissions: perms, role_info, display_properties } = permissions
     const roles: AvailableRole[] = []
 
-    // Check if user is a system admin or teacher admin (médiatanár) or general admin
+    // Check if user is a system admin or teacher admin (médiatanár) or developer admin or general admin
     const isSystemAdmin = perms?.is_system_admin || role_info?.primary_role === 'system_admin' || role_info?.admin_type === 'system_admin'
     const isTeacherAdmin = perms?.is_teacher_admin || role_info?.admin_type === 'teacher'
+    const isDeveloperAdmin = perms?.is_developer_admin || role_info?.admin_type === 'dev' || role_info?.admin_type === 'developer' || role_info?.primary_role === 'developer_admin'
     const isGeneralAdmin = perms?.is_admin
     
     console.log('🔍 Role Analysis:', {
       isSystemAdmin,
       isTeacherAdmin,
+      isDeveloperAdmin,
       isGeneralAdmin,
       primary_role: role_info?.primary_role,
       admin_type: role_info?.admin_type,
       is_system_admin: perms?.is_system_admin,
       is_teacher_admin: perms?.is_teacher_admin,
+      is_developer_admin: perms?.is_developer_admin,
       is_admin: perms?.is_admin,
       is_osztaly_fonok: perms?.is_osztaly_fonok,
       special_role: role_info?.special_role
     })
     
-    // Admin role: Rendszeradmin OR Tanár-admin (Médiatanár) OR általános admin szerepkör
-    if (isSystemAdmin || isTeacherAdmin || isGeneralAdmin) {
+    // Admin role: Rendszeradmin OR Tanár-admin (Médiatanár) OR Developer admin OR általános admin szerepkör
+    if (isSystemAdmin || isTeacherAdmin || isDeveloperAdmin || isGeneralAdmin) {
       roles.push('admin')
     }
     
@@ -344,6 +347,7 @@ export function PermissionsProvider({ children }: { children: React.ReactNode })
     // Multiple roles available - prioritize based on hierarchy and role types
     const isSystemAdmin = perms?.is_system_admin || role_info?.primary_role === 'system_admin' || role_info?.admin_type === 'system_admin'
     const isTeacherAdmin = perms?.is_teacher_admin || role_info?.admin_type === 'teacher' || perms?.is_admin
+    const isDeveloperAdmin = perms?.is_developer_admin || role_info?.admin_type === 'dev' || role_info?.admin_type === 'developer' || role_info?.primary_role === 'developer_admin'
     const isGeneralAdmin = perms?.is_admin
     const isClassTeacher = perms?.is_osztaly_fonok || role_info?.special_role === 'class_teacher'
     
@@ -352,32 +356,37 @@ export function PermissionsProvider({ children }: { children: React.ReactNode })
       return 'admin'
     }
     
-    // Priority 2: Médiatanár (teacher admin) gets admin role
+    // Priority 2: Developer Admin gets admin role  
+    if (availableRoles.includes('admin') && isDeveloperAdmin) {
+      return 'admin'
+    }
+    
+    // Priority 3: Médiatanár (teacher admin) gets admin role
     if (availableRoles.includes('admin') && isTeacherAdmin) {
       return 'admin'
     }
     
-    // Priority 3: General admin gets admin role
+    // Priority 4: General admin gets admin role
     if (availableRoles.includes('admin') && isGeneralAdmin) {
       return 'admin'
     }
     
-    // Priority 4: Pure osztályfőnök (class teacher without admin rights) gets class-teacher role  
-    if (availableRoles.includes('class-teacher') && isClassTeacher && !isTeacherAdmin && !isSystemAdmin && !isGeneralAdmin) {
+    // Priority 5: Pure osztályfőnök (class teacher without admin rights) gets class-teacher role  
+    if (availableRoles.includes('class-teacher') && isClassTeacher && !isTeacherAdmin && !isSystemAdmin && !isDeveloperAdmin && !isGeneralAdmin) {
       return 'class-teacher'
     }
     
-    // Priority 4: If user has both admin and class-teacher roles (médiatanár + osztályfőnök), default to admin
+    // Priority 6: If user has both admin and class-teacher roles (médiatanár + osztályfőnök), default to admin
     if (availableRoles.includes('admin')) {
       return 'admin'
     }
     
-    // Priority 5: Fallback to class-teacher if available
+    // Priority 7: Fallback to class-teacher if available
     if (availableRoles.includes('class-teacher')) {
       return 'class-teacher'
     }
     
-    // Priority 6: Fallback to student
+    // Priority 8: Fallback to student
     if (availableRoles.includes('student')) {
       return 'student'
     }
diff --git a/contexts/user-role-context.tsx b/contexts/user-role-context.tsx
diff --git a/hooks/use-role-initialization.ts b/hooks/use-role-initialization.ts
