From 49d887870689df05b377f3379785deeecbe6ca92 Mon Sep 17 00:00:00 2001
From: Tiago Yamamoto <japa@rede5.com.br>
Date: Tue, 23 Dec 2025 09:21:38 -0300
Subject: [PATCH] Add owner profile link and page

---
 marketplace/src/App.tsx             |  9 ++++++++
 marketplace/src/layouts/Shell.tsx   | 11 ++++++++-
 marketplace/src/pages/MyProfile.tsx | 35 +++++++++++++++++++++++++++++
 3 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 marketplace/src/pages/MyProfile.tsx

diff --git a/marketplace/src/App.tsx b/marketplace/src/App.tsx
index e853046..1575246 100644
--- a/marketplace/src/App.tsx
+++ b/marketplace/src/App.tsx
@@ -8,6 +8,7 @@ import { CompanyPage } from './pages/Company'
 import { SellerDashboardPage } from './pages/SellerDashboard'
 import { EmployeeDashboardPage } from './pages/EmployeeDashboard'
 import { DeliveryDashboardPage } from './pages/DeliveryDashboard'
+import { MyProfilePage } from './pages/MyProfile'
 import { ProtectedRoute } from './components/ProtectedRoute'
 import { DashboardLayout } from './layouts/DashboardLayout'
 import {
@@ -134,6 +135,14 @@ function App() {
           </ProtectedRoute>
         }
       />
+      <Route
+        path="/meu-perfil"
+        element={
+          <ProtectedRoute allowedRoles={['owner', 'seller']}>
+            <MyProfilePage />
+          </ProtectedRoute>
+        }
+      />
       <Route path="/search" element={<Navigate to="/dashboard" replace />} />
       <Route path="*" element={<Navigate to="/login" replace />} />
     </Routes>
diff --git a/marketplace/src/layouts/Shell.tsx b/marketplace/src/layouts/Shell.tsx
index 6910a91..b61ef40 100644
--- a/marketplace/src/layouts/Shell.tsx
+++ b/marketplace/src/layouts/Shell.tsx
@@ -65,7 +65,7 @@ export function Shell({ children }: { children: React.ReactNode }) {
               <button
                 type="button"
                 onClick={() => setIsProfileOpen((prev) => !prev)}
-                className="flex items-center gap-2 rounded bg-white/10 px-3 py-1 text-xs font-semibold hover:bg-white/20"
+                className="flex items-center gap-2 rounded bg-white/10 px-3 py-1 text-xs font-semibold hover:bg-white/20 whitespace-nowrap"
                 aria-haspopup="true"
                 aria-expanded={isProfileOpen}
               >
@@ -77,6 +77,15 @@ export function Shell({ children }: { children: React.ReactNode }) {
               </button>
               {isProfileOpen && (
                 <div className="absolute right-0 mt-2 w-48 rounded-md bg-white py-1 text-sm text-gray-700 shadow-lg ring-1 ring-black/5">
+                  {isOwner && (
+                    <Link
+                      to="/meu-perfil"
+                      className="block px-4 py-2 hover:bg-gray-100"
+                      onClick={() => setIsProfileOpen(false)}
+                    >
+                      Meu Perfil
+                    </Link>
+                  )}
                   {isOwner && (
                     <Link
                       to="/company"
diff --git a/marketplace/src/pages/MyProfile.tsx b/marketplace/src/pages/MyProfile.tsx
new file mode 100644
index 0000000..7fb4130
--- /dev/null
+++ b/marketplace/src/pages/MyProfile.tsx
@@ -0,0 +1,35 @@
+import { Shell } from '../layouts/Shell'
+import { useAuth } from '../context/AuthContext'
+
+export function MyProfilePage() {
+  const { user } = useAuth()
+
+  return (
+    <Shell>
+      <div className="space-y-6 rounded-lg bg-white p-6 shadow-sm">
+        <div>
+          <h1 className="text-xl font-semibold text-medicalBlue">Meu Perfil</h1>
+          <p className="text-sm text-gray-600">Acompanhe as informações básicas da sua conta.</p>
+        </div>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <div className="rounded-md border border-gray-200 p-4">
+            <p className="text-xs uppercase text-gray-400">Nome</p>
+            <p className="text-sm font-semibold text-gray-800">{user?.name ?? 'Não informado'}</p>
+          </div>
+          <div className="rounded-md border border-gray-200 p-4">
+            <p className="text-xs uppercase text-gray-400">Perfil</p>
+            <p className="text-sm font-semibold text-gray-800">{user?.role ?? 'Não informado'}</p>
+          </div>
+          <div className="rounded-md border border-gray-200 p-4">
+            <p className="text-xs uppercase text-gray-400">E-mail</p>
+            <p className="text-sm font-semibold text-gray-800">{user?.email ?? 'Não informado'}</p>
+          </div>
+          <div className="rounded-md border border-gray-200 p-4">
+            <p className="text-xs uppercase text-gray-400">Usuário</p>
+            <p className="text-sm font-semibold text-gray-800">{user?.username ?? 'Não informado'}</p>
+          </div>
+        </div>
+      </div>
+    </Shell>
+  )
+}