feat: initialize project with Supabase authentication, routing, and dashboard screens for project data visualization

src/components/NavBar.jsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
 
 const linkBase = 'font-semibold text-sm py-2.5 px-5 rounded-lg transition-colors text-center flex-1';
 const linkActive = 'bg-azul-glm text-white';
 const linkInactive = 'bg-verde-bg text-azul-glm hover:bg-verde-glm hover:text-white border border-verde-glm/40';
 
 export default function NavBar() {
+  const { signOut, user } = useAuth();
+
   return (
-    <nav className="flex gap-3 bg-white p-3 rounded-xl border border-gris-medio/30 shadow-sm mb-8">
+    <nav className="flex items-center gap-3 bg-white p-3 rounded-xl border border-gris-medio/30 shadow-sm mb-8">
       <NavLink
         to="/dashboard/encuesta-terminacion"
         className={({ isActive }) => `${linkBase} ${isActive ? linkActive : linkInactive}`}
@@ -20,6 +23,7 @@ export default function NavBar() {
       >
         Carnets
       </NavLink>
+
     </nav>
   );
 }

src/components/ProtectedRoute.jsx

@@ -0,0 +1,23 @@
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../contexts/AuthContext';
+
+export default function ProtectedRoute({ children }) {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gris-claro">
+        <div className="flex flex-col items-center gap-4">
+          <div className="w-10 h-10 border-4 border-verde-glm border-t-transparent rounded-full animate-spin" />
+          <p className="text-acero font-medium">Cargando...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Navigate to="/dashboard/login" replace />;
+  }
+
+  return children;
+}