first commit

frontend/src/components/ProtectedRoute.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Navigate } from 'react-router-dom'
+import { useAuth } from '../contexts/AuthContext'
+
+const ProtectedRoute = ({ children, requireAdmin = false, requirePermission = null }) => {
+  const { isAuthenticated, isAdmin, isLoading, hasPermission } = useAuth()
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+      </div>
+    )
+  }
+
+  if (!isAuthenticated()) {
+    return <Navigate to="/login" replace />
+  }
+
+  // Check admin requirement
+  if (requireAdmin && !isAdmin()) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-center">
+          <h2 className="text-xl font-semibold text-secondary-900 mb-2">Access Denied</h2>
+          <p className="text-secondary-600">You don't have permission to access this page.</p>
+        </div>
+      </div>
+    )
+  }
+
+  // Check specific permission requirement
+  if (requirePermission && !hasPermission(requirePermission)) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="text-center">
+          <h2 className="text-xl font-semibold text-secondary-900 mb-2">Access Denied</h2>
+          <p className="text-secondary-600">You don't have permission to access this page.</p>
+        </div>
+      </div>
+    )
+  }
+
+  return children
+}
+
+export default ProtectedRoute