diff --git a/src/components/TrocardePerfis.jsx b/src/components/TrocardePerfis.jsx index 815ad29..7c244d1 100644 --- a/src/components/TrocardePerfis.jsx +++ b/src/components/TrocardePerfis.jsx @@ -1,82 +1,60 @@ -import {React, useState, useEffect} from 'react' -import { useNavigate, useLocation } from 'react-router-dom' -import { UserInfos } from './utils/Functions-Endpoints/General'; -import { useAuth } from './utils/AuthProvider'; -import './Estilo/TrocardePerfis.css' +import React, { useState, useEffect } from "react"; +import { useNavigate, useLocation } from "react-router-dom"; +import { UserInfos } from "./utils/Functions-Endpoints/General"; +import { useAuth } from "./utils/AuthProvider"; +import "./Estilo/TrocardePerfis.css"; const TrocardePerfis = () => { const location = useLocation(); - - const [selectedProfile, setSelectedProfile] = useState(''); + const navigate = useNavigate(); const { getAuthorizationHeader } = useAuth(); + + const [selectedProfile, setSelectedProfile] = useState(""); const [showProfiles, setShowProfiles] = useState([]); - const navigate = useNavigate(); - let authHeader = getAuthorizationHeader(); - console.log('AUTH HEADER', authHeader) + useEffect(() => { + const fetchData = async () => { + const authHeader = getAuthorizationHeader(); + setSelectedProfile(location.pathname || ""); + const userInfo = await UserInfos(authHeader); + setShowProfiles(userInfo?.roles || []); + }; + fetchData(); + }, [location.pathname, getAuthorizationHeader]); - -const handleProfileClick = (route) => { - - navigate(route); -}; - - -useEffect(() => { - const fetchData = async () => { - setSelectedProfile(location.pathname); - const userInfo = await UserInfos(authHeader); - setShowProfiles(userInfo?.roles || []); + const handleSelectChange = (e) => { + const route = e.target.value; + setSelectedProfile(route); + if (route) navigate(route); }; - fetchData(); -}, []); + const options = [ + { 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 ( - -
- -

Acesso aos modulos:

-
- {(showProfiles?.includes('secretaria') || showProfiles?.includes('admin')) && ( - - )} - {(showProfiles?.includes('medico') || showProfiles?.includes('admin')) && ( - - )} -
- -
- {(showProfiles?.includes('financeiro') || showProfiles?.includes('admin')) && ( - - )} - {showProfiles?.includes('admin') && ( - - )} -
+
+

Acesso aos módulos:

+
- ) -} + ); +}; -export default TrocardePerfis \ No newline at end of file +export default TrocardePerfis; diff --git a/src/pages/style/TrocardePerfil.css b/src/pages/style/TrocardePerfil.css new file mode 100644 index 0000000..3a253c2 --- /dev/null +++ b/src/pages/style/TrocardePerfil.css @@ -0,0 +1,62 @@ +.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; + } +}