feat(access-control): Add role-based route protection hook and integrate into layouts

- Create useRoleProtection hook to enforce role-based access control for student and company member routes
- Integrate role protection into company dashboard layout to restrict access to company members only
- Integrate role protection into protected layout to restrict access to students only
- Add loading state handling during role verification to prevent premature redirects
- Redirect unauthorized users to appropriate dashboard based on their role (students to /protected, company members to /dashboard/company)
- Query company_members table to determine user role and authorization status
- Prevents role confusion and ensures users can only access routes appropriate for their account type

Author: akshay0611

app/dashboard/company/layout.tsx

@@ -17,6 +17,7 @@ import {
   CreditCard,
 } from 'lucide-react'
 import { useAuth } from '@/lib/hooks/useAuth'
+import { useRoleProtection } from '@/lib/hooks/useRoleProtection'
 
 export type SidebarGroupType = {
   title: string
@@ -33,6 +34,7 @@ export default function CompanyDashboardLayout({
   children: React.ReactNode
 }) {
   const { user, loading, error } = useAuth()
+  const { isChecking, isAuthorized } = useRoleProtection('company_member')
   const params = useParams()
   const companySlug = params?.slug as string | undefined
 
@@ -51,7 +53,7 @@ export default function CompanyDashboardLayout({
     )
   }
 
-  if (loading) {
+  if (loading || isChecking) {
     return (
       <div className="flex items-center justify-center min-h-screen bg-black">
         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
@@ -75,7 +77,7 @@ export default function CompanyDashboardLayout({
     )
   }
 
-  if (!user) {
+  if (!user || !isAuthorized) {
     return (
       <div className="flex items-center justify-center min-h-screen px-4 bg-black">
         <div className="text-center max-w-md">

app/protected/layout.tsx

@@ -24,6 +24,7 @@ import {
   Star,
 } from "lucide-react"
 import { useAuth } from "@/lib/hooks/useAuth"
+import { useRoleProtection } from "@/lib/hooks/useRoleProtection"
 
 export type SidebarGroupType = {
   title: string;
@@ -210,16 +211,17 @@ const sidebarItems: SidebarGroupType[] = [
 
 export default function ProtectedLayout({ children }: { children: React.ReactNode }) {
   const { user, loading } = useAuth()
+  const { isChecking, isAuthorized } = useRoleProtection('student')
 
-  if (loading) {
+  if (loading || isChecking) {
     return (
       <div className="flex items-center justify-center min-h-screen">
         <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
       </div>
     )
   }
 
-  if (!user) {
+  if (!user || !isAuthorized) {
     return (
       <div className="flex items-center justify-center min-h-screen px-4">
         <div className="text-center max-w-md">

lib/hooks/useRoleProtection.ts

@@ -0,0 +1,60 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { createClient } from '@/lib/supabase/client'
+
+export function useRoleProtection(requiredRole: 'student' | 'company_member') {
+  const router = useRouter()
+  const [isChecking, setIsChecking] = useState(true)
+  const [isAuthorized, setIsAuthorized] = useState(false)
+
+  useEffect(() => {
+    async function checkRole() {
+      try {
+        const supabase = createClient()
+        const { data: { user } } = await supabase.auth.getUser()
+
+        if (!user) {
+          router.push('/auth/signin')
+          return
+        }
+
+        // Check if user is a company member (FIXED: changed from 'company_users' to 'company_members')
+        const { data: companyMembership } = await supabase
+          .from('company_members')
+          .select('id')
+          .eq('user_id', user.id)
+          .maybeSingle()
+
+        const isCompanyMember = !!companyMembership
+
+        // Determine if user has the required role
+        if (requiredRole === 'company_member') {
+          if (!isCompanyMember) {
+            // User is a student trying to access company routes
+            router.push('/protected')
+            return
+          }
+        } else if (requiredRole === 'student') {
+          if (isCompanyMember) {
+            // User is a company member trying to access student routes
+            router.push('/dashboard/company')
+            return
+          }
+        }
+
+        setIsAuthorized(true)
+      } catch (error) {
+        console.error('Error checking role:', error)
+        router.push('/auth/signin')
+      } finally {
+        setIsChecking(false)
+      }
+    }
+
+    checkRole()
+  }, [requiredRole, router])
+
+  return { isChecking, isAuthorized }
+}