From 38945d63362ba5bdf7fd15a36c13c15446b083b3 Mon Sep 17 00:00:00 2001
From: rafael <rafaelminaya20@hotmail.com>
Date: Sat, 22 Nov 2025 22:31:21 -0400
Subject: [PATCH] Add `ProfilePage` component and integrate with navigation and
 sidebar

Introduced `ProfilePage` to display user profile details, including name, email, and role. Updated navigation logic in `App.js` to support the new "profile" view and added click-to-navigate functionality in the sidebar user section. Enhanced sidebar user actions with improved logout interactions.
---
 src/App.js                            |  5 +++
 src/components/Layout/Sidebar.js      | 12 ++++-
 src/components/Profile/ProfilePage.js | 63 +++++++++++++++++++++++++++
 3 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Profile/ProfilePage.js

diff --git a/src/App.js b/src/App.js
index 593486a..a3b8948 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,6 +9,7 @@ import NewRequestPage from './components/Requests/NewRequestPage';
 import HistoryPage from './components/History/HistoryPage';
 import SettingsPage from './components/Settings/SettingsPage';
 import HelpPage from './components/Help/HelpPage';
+import ProfilePage from './components/Profile/ProfilePage';
 
 function App() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -63,6 +64,8 @@ function App() {
     ? 'Configuración'
     : activeView === 'help'
     ? 'Ayuda'
+    : activeView === 'profile'
+    ? 'Perfil'
     : 'Dashboard';
 
   return (
@@ -85,6 +88,8 @@ function App() {
           <SettingsPage />
         ) : activeView === 'help' ? (
           <HelpPage />
+        ) : activeView === 'profile' ? (
+          <ProfilePage />
         ) : (
           <section className="content-wrapper">
             <DashboardCards />
diff --git a/src/components/Layout/Sidebar.js b/src/components/Layout/Sidebar.js
index 139c426..dced423 100644
--- a/src/components/Layout/Sidebar.js
+++ b/src/components/Layout/Sidebar.js
@@ -62,13 +62,21 @@ const Sidebar = ({ isMobileMenuOpen, onToggleMobileMenu, activeView = 'dashboard
         </div>
         
         <div className="sidebar-footer">
-          <div className="user-info">
+          <div 
+            className="user-info"
+            role="button"
+            tabIndex={0}
+            onClick={() => onNavigate?.('profile')}
+            onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onNavigate?.('profile'); } }}
+            title="Ver perfil"
+            style={{ cursor: 'pointer' }}
+          >
             <div className="user-avatar">JP</div>
             <div className="user-details">
               <div className="user-name">Juan Pérez</div>
               <div className="user-role">Administrador</div>
             </div>
-            <a href="#" style={{color: 'white'}} onClick={(e) => { e.preventDefault(); handleLogout(); }} title="Cerrar sesión">
+            <a href="#" style={{color: 'white'}} onClick={(e) => { e.preventDefault(); e.stopPropagation(); handleLogout(); }} title="Cerrar sesión">
               <i className="fas fa-sign-out-alt"></i>
             </a>
           </div>
diff --git a/src/components/Profile/ProfilePage.js b/src/components/Profile/ProfilePage.js
new file mode 100644
index 0000000..c5f7d89
--- /dev/null
+++ b/src/components/Profile/ProfilePage.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import '../../styles/components.css';
+
+const ProfileRow = ({ label, value, icon }) => (
+  <div className="form-row">
+    <div className="form-group" style={{ flex: 1 }}>
+      <label style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        {icon && <i className={icon} aria-hidden="true"></i>}
+        {label}
+      </label>
+      <div className="input" style={{ background: 'var(--bg-elevated)', border: '1px solid var(--border)', color: 'var(--text)' }}>
+        {value}
+      </div>
+    </div>
+  </div>
+);
+
+const ProfilePage = () => {
+  // En esta versión demo, la información del usuario es estática.
+  // En una integración real, estos datos vendrían del backend o del contexto de autenticación.
+  const user = {
+    initials: 'JP',
+    name: 'Juan Pérez',
+    role: 'Administrador',
+    email: 'juan.perez@empresa.com',
+  };
+
+  return (
+    <section className="content-wrapper">
+      <div className="card" style={{ marginBottom: 24 }}>
+        <div className="form-header">
+          <h3>
+            <i className="fas fa-user" style={{ marginRight: 8 }}></i>
+            Perfil de usuario
+          </h3>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+          <div className="user-avatar" aria-hidden="true">{user.initials}</div>
+          <div>
+            <div className="user-name" style={{ margin: 0 }}>{user.name}</div>
+            <div className="user-role" style={{ margin: 0 }}>{user.role}</div>
+          </div>
+        </div>
+      </div>
+
+      <div className="card">
+        <div className="form-header">
+          <h3>
+            <i className="fas fa-id-card" style={{ marginRight: 8 }}></i>
+            Información
+          </h3>
+        </div>
+        <div>
+          <ProfileRow label="Nombre" value={user.name} icon="fas fa-user" />
+          <ProfileRow label="Correo" value={user.email} icon="fas fa-envelope" />
+          <ProfileRow label="Rol" value={user.role} icon="fas fa-user-shield" />
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ProfilePage;