src/components/TrocardePerfis.jsx

@@ -1,60 +1,82 @@
-import React, { useState, useEffect } from "react";
+import {React, useState, useEffect} from 'react'
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from 'react-router-dom'
-import { UserInfos } from "./utils/Functions-Endpoints/General";
+import { UserInfos } from './utils/Functions-Endpoints/General';
-import { useAuth } from "./utils/AuthProvider";
+import { useAuth } from './utils/AuthProvider';
-import "./Estilo/TrocardePerfis.css";
+import './Estilo/TrocardePerfis.css'
 
 const TrocardePerfis = () => {
   const location = useLocation();
-  const navigate = useNavigate();
+   
+  const [selectedProfile, setSelectedProfile] = useState('');
   const { getAuthorizationHeader } = useAuth();
-
-  const [selectedProfile, setSelectedProfile] = useState("");
   const [showProfiles, setShowProfiles] = useState([]);
+   const navigate = useNavigate();
 
-  useEffect(() => {
+  let authHeader = getAuthorizationHeader();
-    const fetchData = async () => {
+  console.log('AUTH HEADER', authHeader)
-      const authHeader = getAuthorizationHeader();
-      setSelectedProfile(location.pathname || "");
-      const userInfo = await UserInfos(authHeader);
-      setShowProfiles(userInfo?.roles || []);
-    };
-    fetchData();
-  }, [location.pathname, getAuthorizationHeader]);
 
-  const handleSelectChange = (e) => {
-    const route = e.target.value;
-    setSelectedProfile(route);
-    if (route) navigate(route);
-  };
 
-  const options = [
+const handleProfileClick = (route) => {
-    { key: "secretaria", label: "Secretaria", route: "/secretaria" },
-    { key: "medico", label: "Médico", route: "/medico" },
-    { key: "financeiro", label: "Financeiro", route: "/financeiro" },
-    { key: "admin", label: "Administração", route: "/admin" },
-  ].filter(
-    (opt) =>
-      showProfiles?.includes(opt.key) || showProfiles?.includes("admin")
-  );
  
-  return (
+  navigate(route);
-    <div className="container-perfis">
-      <p className="acesso-text">Acesso aos módulos:</p>
-      <select
-        className="perfil-select"
-        value={selectedProfile}
-        onChange={handleSelectChange}
-      >
-        <option value="">Selecionar perfil</option>
-        {options.map((opt) => (
-          <option key={opt.key} value={opt.route}>
-            {opt.label}
-          </option>
-        ))}
-      </select>
-    </div>
-  );
 };
 
-export default TrocardePerfis;
+
+useEffect(() => {
+  const fetchData = async () => {
+    setSelectedProfile(location.pathname);
+    const userInfo = await UserInfos(authHeader);
+    setShowProfiles(userInfo?.roles || []);
+  };
+
+  fetchData();
+}, []);
+
+  return (
+    
+    <div className='container-perfis'>
+
+      <p>Acesso aos modulos:</p>
+    <div id='primeiro-conjunto-botoes'>
+  {(showProfiles?.includes('secretaria') || showProfiles?.includes('admin')) && (
+    <button
+      className={`perfil-button${selectedProfile === '/secretaria' ? ' selecionado' : ''}`}
+      onClick={() => handleProfileClick('/secretaria')}
+    >
+      Secretaria
+    </button>
+  )}
+  {(showProfiles?.includes('medico') || showProfiles?.includes('admin')) && (
+    <button
+      className={`perfil-button${selectedProfile === '/medico' ? ' selecionado' : ''}`}
+      onClick={() => handleProfileClick('/medico')}
+    >
+      Médicos
+    </button>
+  )}
+</div>
+
+<div id='segundo-conjunto-botoes'>
+  {(showProfiles?.includes('financeiro') || showProfiles?.includes('admin')) && (
+    <button
+      className={`perfil-button${selectedProfile === '/financeiro' ? ' selecionado' : ''}`}
+      onClick={() => handleProfileClick('/financeiro')}
+    >
+      Financeiro
+    </button>
+  )}
+  {showProfiles?.includes('admin') && (
+    <button
+
+      className={`perfil-button${selectedProfile === '/admin' ? ' selecionado' : ''}`}
+      onClick={() => handleProfileClick('/admin')}
+    >
+      Administração
+    </button>
+  )}
+</div>
+    </div>
+  )
+}
+
+export default TrocardePerfis

src/pages/style/TrocardePerfil.css

@@ -1,62 +0,0 @@
-.container-perfis {
-  position: absolute;
-  top: 80px;
-  left: 30px;
-  width: calc(100% - 60px);
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  z-index: 60;
-}
-
-.acesso-text {
-  font-size: 15px;
-  font-weight: 600;
-  color: #1e2b57;
-  margin-bottom: 6px;
-}
-
-/* estilo visual refinado do select */
-.perfil-select {
-  width: 100%;
-  padding: 10px 14px;
-  border-radius: 10px;
-  border: 1.8px solid #d0d5dd;
-  background-color: #f9fafc;
-  color: #1e2b57;
-  font-weight: 600;
-  font-size: 14px;
-  outline: none;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: 0 1px 3px rgba(30, 43, 87, 0.08);
-}
-
-.perfil-select:hover {
-  border-color: #7a85ff;
-  background-color: #ffffff;
-  box-shadow: 0 2px 6px rgba(30, 43, 87, 0.1);
-}
-
-.perfil-select:focus {
-  border-color: #5a46ff;
-  box-shadow: 0 0 0 3px rgba(90, 70, 255, 0.2);
-}
-
-.perfil-select option[value=""] {
-  color: #777;
-  font-weight: 500;
-}
-
-/* responsivo */
-@media (max-width: 780px) {
-  .container-perfis {
-    top: 60px;
-    left: 20px;
-    width: calc(100% - 40px);
-  }
-  .perfil-select {
-    font-size: 13px;
-    padding: 8px 12px;
-  }
-}