diff --git a/package-lock.json b/package-lock.json index 1663be2..3b9ac4d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29151,18 +29151,6 @@ "minimalistic-assert": "^1.0.0" } }, -<<<<<<< HEAD - "node_modules/web-namespaces": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz", - "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==", - "license": "MIT", - "peer": true, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, "node_modules/web-streams-polyfill": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz", @@ -29172,8 +29160,6 @@ "node": ">= 8" } }, -======= ->>>>>>> c180e9a5c9e6bdaf28914332ba603acaf6d028a5 "node_modules/web-vitals": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz", diff --git a/src/components/AgendarConsulta/FormNovaConsulta.jsx b/src/components/AgendarConsulta/FormNovaConsulta.jsx index 2dc2ef5..a3ec8f3 100644 --- a/src/components/AgendarConsulta/FormNovaConsulta.jsx +++ b/src/components/AgendarConsulta/FormNovaConsulta.jsx @@ -177,7 +177,6 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
Sucesso
-

Agendamento salvo com sucesso!

diff --git a/src/components/AgendarConsulta/style/formagendamentos.css b/src/components/AgendarConsulta/style/formagendamentos.css index 2e90f74..76ac620 100644 --- a/src/components/AgendarConsulta/style/formagendamentos.css +++ b/src/components/AgendarConsulta/style/formagendamentos.css @@ -414,96 +414,248 @@ html[data-bs-theme="dark"] svg { } +/* ========== Modal Overlay ========== */ .modal-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; - z-index: 1000; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 9999; + animation: fadeIn 0.3s ease-in; } -.modal-content { - background: white; - padding: 2rem; - border-radius: 12px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); - max-width: 400px; - width: 90%; - text-align: center; - animation: modalAppear 0.3s ease-out; -} - -@keyframes modalAppear { +@keyframes fadeIn { from { opacity: 0; - transform: scale(0.9) translateY(-20px); } to { opacity: 1; - transform: scale(1) translateY(0); } } -.modal-header h3 { - margin: 0 0 1rem 0; - color: #28a745; - font-size: 1.5rem; - font-weight: 600; +/* ========== Modal Content ========== */ +.modal-content { + background-color: #fff; + border-radius: 10px; + width: 400px; + max-width: 90%; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); + overflow: hidden; + animation: slideIn 0.3s ease-out; } -.modal-body { - margin-bottom: 1.5rem; +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(-20px) scale(0.95); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } } -.modal-body p { +/* ========== Modal Header ========== */ +.modal-header { + background-color: #1e3a8a; + padding: 15px 20px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.modal-header.success { + background-color: #1e3a8a !important; +} + +.modal-header.error { + background-color: #dc3545 !important; +} + +.modal-header .modal-title { + color: #fff; margin: 0; - color: #333; - font-size: 1.1rem; - line-height: 1.5; + font-size: 1.2rem; + font-weight: bold; } +.modal-close-btn { + background: none; + border: none; + font-size: 20px; + color: #fff; + cursor: pointer; + padding: 0; + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 4px; + transition: background-color 0.2s; +} + +.modal-close-btn:hover { + background-color: rgba(255, 255, 255, 0.2); +} + +/* ========== Modal Body ========== */ +.modal-body { + padding: 25px 20px; + background: #fff; +} + +.modal-body .modal-message { + color: #111; + font-size: 1.1rem; + margin: 0; + font-weight: 600; + line-height: 1.4; + text-align: center; +} + +.modal-submessage { + color: #666; + font-size: 0.9rem; + margin: 10px 0 0 0; + line-height: 1.4; + text-align: center; +} + +/* ========== Modal Footer ========== */ .modal-footer { display: flex; - justify-content: center; + justify-content: flex-end; + padding: 15px 20px; + border-top: 1px solid #ddd; + background: #fff; } -.modal-footer .btn-primary { - background: #28a745; - padding: 10px 24px; +.modal-confirm-btn { + background-color: #1e3a8a; + color: #fff; + border: none; + padding: 8px 20px; + border-radius: 6px; + cursor: pointer; font-size: 1rem; - font-weight: 500; + font-weight: bold; + transition: all 0.2s ease; } -.modal-footer .btn-primary:hover { - background: #218838; +.modal-confirm-btn:hover { + background-color: #1e40af; + transform: translateY(-1px); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); +} + +.modal-confirm-btn.success { + background-color: #1e3a8a !important; +} + +.modal-confirm-btn.success:hover { + background-color: #1e40af !important; +} + +.modal-confirm-btn.error { + background-color: #dc3545 !important; +} + +.modal-confirm-btn.error:hover { + background-color: #c82333 !important; } +/* ========== Dark Mode ========== */ html[data-bs-theme="dark"] .modal-content { background: #232323 !important; - color: #e0e0e0 !important; - border: 1px solid #404053 !important; + border: 1px solid #404053; } -html[data-bs-theme="dark"] .modal-header h3 { - color: #4ade80 !important; +html[data-bs-theme="dark"] .modal-header { + background: #1e3a8a !important; } -html[data-bs-theme="dark"] .modal-body p { +html[data-bs-theme="dark"] .modal-header.success { + background-color: #1e3a8a !important; +} + +html[data-bs-theme="dark"] .modal-header.error { + background-color: #dc3545 !important; +} + +html[data-bs-theme="dark"] .modal-header .modal-title, +html[data-bs-theme="dark"] .modal-close-btn { + color: white !important; +} + +html[data-bs-theme="dark"] .modal-body { + background: #232323 !important; +} + +html[data-bs-theme="dark"] .modal-body .modal-message { color: #e0e0e0 !important; } -html[data-bs-theme="dark"] .modal-footer .btn-primary { - background: #16a34a !important; +html[data-bs-theme="dark"] .modal-submessage { + color: #b0b7c3 !important; } -html[data-bs-theme="dark"] .modal-footer .btn-primary:hover { - background: #15803d !important; +html[data-bs-theme="dark"] .modal-footer { + background: #232323 !important; + border-top: 1px solid #404053; +} + +html[data-bs-theme="dark"] .modal-confirm-btn { + background: #2563eb !important; +} + +html[data-bs-theme="dark"] .modal-confirm-btn:hover { + background: #1e40af !important; +} + +/* ========== Responsive ========== */ +@media (max-width: 768px) { + .modal-content { + width: 95%; + margin: 1rem; + } + + .modal-body { + padding: 20px 15px; + } + + .modal-message { + font-size: 1rem; + } +} + +@media (max-width: 480px) { + .modal-header { + padding: 12px 15px; + } + + .modal-header .modal-title { + font-size: 1.1rem; + } + + .modal-body { + padding: 15px; + } + + .modal-footer { + padding: 12px 15px; + } + + .modal-confirm-btn { + padding: 6px 16px; + font-size: 0.9rem; + } } diff --git a/src/components/Estilo/Toggle.css b/src/components/Estilo/Toggle.css index 53827c6..22dac7b 100644 --- a/src/components/Estilo/Toggle.css +++ b/src/components/Estilo/Toggle.css @@ -1,9 +1,309 @@ -.toggle-title{ - color:#25396f; - font-weight: 1000; - font-size: 20px; +/* ========== Variáveis CSS ========== */ +:root { + --primary-blue: #4a90e2; + --primary-blue-light: #5da3f5; + --primary-blue-lighter: #70b4ff; + --dark-blue: #1a3a5c; + --dark-blue-deep: #0d2640; + --white: #ffffff; + --transition: all 0.3s ease; } -.container-title{ +/* ========== Container Principal ========== */ +.toggle-sidebar-wrapper { + background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 100%); + border-radius: 12px; + padding: 8px; + margin-bottom: 20px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); + border: 1px solid var(--primary-blue-lighter); +} + +.container-title { display: flex; + align-items: center; + padding: 14px 20px; + cursor: pointer; + background-color: var(--primary-blue); + border-radius: 8px; + margin-bottom: 12px; + transition: var(--transition); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); + border: 1px solid var(--primary-blue-light); +} + +.container-title:hover { + background-color: var(--primary-blue-light); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + transform: translateY(-1px); +} + +.container-title:hover .toggle-arrow { + color: var(--dark-blue-deep) !important; + transform: scale(1.1); +} + +.toggle-title { + color: var(--white) !important; + font-weight: 700; + font-size: 18px; + margin: 0; + flex-grow: 1; + user-select: none; +} + +.toggle-arrow { + transition: var(--transition); + color: var(--dark-blue) !important; +} + +/* ========== Menu Lista ========== */ +.sidebar-menu-list { + list-style: none; + padding: 0; + margin: 0; + animation: fadeIn 0.3s ease; +} + +.sidebar-item { + list-style: none; + margin: 6px 0; + border-radius: 6px; + transition: all 0.2s ease; +} + +/* ========== Links da Sidebar ========== */ +.sidebar-link { + display: flex; + align-items: center; + text-decoration: none; + color: var(--white) !important; + padding: 12px 20px; + border-radius: 6px; + transition: all 0.2s ease; + font-size: 16px; + width: 100%; + text-align: left; + border: none; + background: none; + cursor: pointer; + position: relative; + overflow: hidden; + font-weight: 500; +} + +.sidebar-link::before { + content: ''; + position: absolute; + left: 0; + top: 0; + height: 100%; + width: 3px; + background-color: var(--dark-blue); + transform: scaleY(0); + transition: transform 0.2s ease; +} + +.sidebar-link i { + margin-right: 12px; + font-size: 19px; + transition: transform 0.2s ease; + color: var(--dark-blue) !important; +} + +.sidebar-link:hover { + color: var(--white) !important; + background-color: var(--primary-blue-light); + padding-left: 25px; +} + +.sidebar-link:hover::before { + transform: scaleY(1); +} + +.sidebar-link:hover i { + transform: scale(1.1); + color: var(--dark-blue-deep) !important; +} + +.sidebar-link.active { + color: var(--white) !important; + background-color: #1e3a8a; + font-weight: 600; + box-shadow: 0 4px 12px rgba(30, 58, 138, 0.4); + padding-left: 25px; +} + +.sidebar-link.active::before { + transform: scaleY(1); + background-color: var(--primary-blue-lighter); +} + +.sidebar-link.active i { + color: var(--white) !important; +} + +/* ========== Título da Sidebar ========== */ +.sidebar-title { + padding: 20px 20px 8px; + font-size: 14px; + color: var(--white) !important; + text-transform: uppercase; + font-weight: 700; + letter-spacing: 1px; + position: relative; +} + +.sidebar-title::after { + content: ''; + position: absolute; + bottom: 4px; + left: 20px; + right: 20px; + height: 2px; + background: linear-gradient(90deg, var(--white), transparent); +} + +/* ========== Itens com Submenu ========== */ +.sidebar-item.has-sub { + border-radius: 6px 6px 0 0; + overflow: hidden; + background-color: rgba(74, 144, 226, 0.6); +} + +.sidebar-item.has-sub.active { + background-color: var(--primary-blue-light); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +.sidebar-item.has-sub .sidebar-link { + background-color: var(--primary-blue); + color: var(--white) !important; +} + +.sidebar-item.has-sub .sidebar-link::after { + content: "\F282"; + font-family: "bootstrap-icons"; + font-weight: 900; + margin-left: auto; + transition: var(--transition); + display: flex; + align-items: center; + font-size: 14px; + color: var(--dark-blue) !important; +} + +.sidebar-item.has-sub.active .sidebar-link::after, +.sidebar-item.has-sub .sidebar-link:hover::after { + color: var(--dark-blue-deep) !important; +} + +.sidebar-item.has-sub.active .sidebar-link::after { + transform: rotate(180deg); +} + +.sidebar-item.has-sub .sidebar-link.submenu-active, +.sidebar-item.has-sub.active .sidebar-link.submenu-active { + color: var(--white) !important; +} + +.sidebar-item.has-sub .sidebar-link.submenu-active i { + color: var(--dark-blue) !important; +} + +.sidebar-item.has-sub.active .sidebar-link.submenu-active { + background-color: #1e3a8a; +} + +.sidebar-item.has-sub.active .sidebar-link.submenu-active i { + color: var(--white) !important; +} + +/* ========== Submenu ========== */ +.submenu { + list-style: none; + padding-left: 0; + margin: 0; + max-height: 0; + overflow: hidden; + transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); + background-color: rgba(74, 144, 226, 0.9); + border-radius: 0 0 6px 6px; +} + +.sidebar-item.has-sub.active .submenu { + max-height: 800px; +} + +.submenu-item { + position: relative; +} + +.submenu-item .sidebar-link { + padding-left: 45px; + font-size: 15px; + color: var(--white) !important; + background-color: transparent; + font-weight: 500; +} + +.submenu-item .sidebar-link::before { + left: 30px; + width: 2px; + background-color: var(--dark-blue); +} + +.submenu-item .sidebar-link:hover { + background-color: var(--primary-blue-lighter); + color: var(--white) !important; + padding-left: 48px; +} + +.submenu-item .sidebar-link:hover::before { + background-color: var(--dark-blue-deep); +} + +.submenu-item:last-child .sidebar-link { + border-radius: 0 0 6px 6px; +} + +.sidebar-item.has-sub.active .submenu-item:first-child .sidebar-link { + border-radius: 0; +} + +.sidebar-link.submenu-link.active::before { + background-color: var(--primary-blue-lighter); +} + +/* ========== Ícones e Indicadores ========== */ +.external-icon { + font-size: 12px; + margin-left: 8px; + opacity: 0.8; + color: var(--dark-blue) !important; +} + +.active-indicator { + position: absolute; + right: 15px; + top: 50%; + transform: translateY(-50%); + width: 8px; + height: 8px; + background-color: var(--primary-blue-lighter); + border-radius: 50%; + animation: pulse 2s infinite; + box-shadow: 0 0 10px rgba(112, 180, 255, 0.6); +} + +/* ========== Animações ========== */ +@keyframes fadeIn { + from { opacity: 0; transform: translateY(-10px); } + to { opacity: 1; transform: translateY(0); } +} + +@keyframes pulse { + 0% { transform: translateY(-50%) scale(1); opacity: 1; } + 50% { transform: translateY(-50%) scale(1.3); opacity: 0.8; } + 100% { transform: translateY(-50%) scale(1); opacity: 1; } } \ No newline at end of file diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx index 223e491..5922c08 100644 --- a/src/components/Sidebar.jsx +++ b/src/components/Sidebar.jsx @@ -1,6 +1,5 @@ import React, { useState, useEffect } from "react"; import { Link, useNavigate } from "react-router-dom"; -import TrocardePerfis from "./TrocardePerfis"; import MobileMenuToggle from "./MobileMenuToggle"; import ToggleSidebar from "./ToggleSidebar"; import { useAuth } from "./utils/AuthProvider"; @@ -9,6 +8,7 @@ import PacienteItems from "../data/sidebar-items-paciente.json" import DoctorItems from "../data/sidebar-items-medico.json" import admItems from "../data/sidebar-items-adm.json" import SecretariaItems from "../data/sidebar-items-secretaria.json" +import FinanceiroItems from "../data/sidebar-items-financeiro.json" import { UserInfos } from "./utils/Functions-Endpoints/General"; @@ -264,13 +264,15 @@ function Sidebar({ menuItems }) { :null } + {roleUser.includes("admin") || roleUser.includes("financeiro") ? + + :null + } + {roleUser.includes("admin") || roleUser.includes("paciente") ? : null } - {/* Logout */} - -
diff --git a/src/components/ToggleSidebar.jsx b/src/components/ToggleSidebar.jsx index fc8e103..2065de1 100644 --- a/src/components/ToggleSidebar.jsx +++ b/src/components/ToggleSidebar.jsx @@ -1,102 +1,137 @@ import React from 'react' -import {useState} from 'react' -import { Link } from 'react-router-dom' +import { useState, useEffect } from 'react' +import { Link, useLocation } from 'react-router-dom' import "./Estilo/Toggle.css" -const ToggleSidebar = ({perfil, items}) => { - const [isOpen, setOpen] = useState(false) +const ToggleSidebar = ({ perfil, items, defaultOpen = false }) => { + const [isOpen, setOpen] = useState(defaultOpen) + const [openSubmenu, setOpenSubmenu] = useState(null) + const [activeLink, setActiveLink] = useState('') + const location = useLocation() - const [openSubmenu, setOpenSubmenu] = useState(null); + useEffect(() => { + const currentPath = location.pathname + setActiveLink(currentPath) + + const findActiveSubmenu = () => { + for (let item of items) { + if (item.submenu) { + const activeSubItem = item.submenu.find(subItem => + subItem.url === currentPath + ) + if (activeSubItem) { + setOpenSubmenu(item.key) + return + } + } else if (item.url === currentPath) { + setActiveLink(currentPath) + } + } + } + + findActiveSubmenu() + }, [location.pathname, items]) - console.log(items) + const OpenClose = () => { + setOpen(!isOpen) + } + + const handleSubmenuClick = (key) => { + setOpenSubmenu(openSubmenu === key ? null : key) + } + + const isLinkActive = (url) => { + return activeLink === url + } + + const renderLink = (item, isSubmenu = false) => { + const isActive = isLinkActive(item.url) + const linkClass = `sidebar-link ${isActive ? 'active' : ''} ${isSubmenu ? 'submenu-link' : ''}` - const renderLink = (item) => { if (item.url && item.url.startsWith("/")) { return ( - + !isSubmenu && setActiveLink(item.url)} + > {item.icon && } {item.name} + {isActive &&
} - ); + ) } + return ( - + {item.icon && } {item.name} + - ); - }; - - const OpenClose = () => { - if(isOpen){ - setOpen(false) - }else if(!isOpen){ - setOpen(true) - } - } + ) + } return ( -
-
-

OpenClose()} className='toggle-title' > {perfil}

- - {isOpen ? : } -
- {isOpen && -
- {items.map((item, index) => { +
+
+

{perfil}

+ {isOpen + ? + : + } +
- if (item.isTitle) - return ( -
  • - {null} + {isOpen && ( +
      + {items.map((item, index) => { + if (item.isTitle) { + return ( +
    • + {item.name} +
      • + ) + } + + if (item.submenu) { + const isSubmenuActive = openSubmenu === item.key + return ( +
    • + + +
        + {item.submenu.map((subItem, subIndex) => ( +
      • + {renderLink(subItem, true)}
        • - ); + ))} +
      +
      • + ) + } - if (item.submenu) - return ( -
    • - -
        - {item.submenu.map((subItem, subIndex) => ( -
      • - {renderLink(subItem)} -
        • - ))} -
      -
      • - ); - - return ( -
    • - {renderLink(item)} -
      • - ); - -})} - - -
    • - - - - } + return ( +
  • + {renderLink(item)} +
    • + ) + })} + + )}
    ) } diff --git a/src/components/doctors/DoctorForm.jsx b/src/components/doctors/DoctorForm.jsx index 22b5c42..013680d 100644 --- a/src/components/doctors/DoctorForm.jsx +++ b/src/components/doctors/DoctorForm.jsx @@ -275,7 +275,6 @@ const handleAvailabilityUpdate = useCallback((newAvailability) => { if (formData.availability && formData.availability.length > 0) { } - alert("Médico salvo com sucesso!"); } catch (error) { console.error("Erro ao salvar médico:", error); alert("Erro ao salvar médico."); diff --git a/src/data/sidebar-items-adm.json b/src/data/sidebar-items-adm.json index 4ab0555..be4969a 100644 --- a/src/data/sidebar-items-adm.json +++ b/src/data/sidebar-items-adm.json @@ -1,8 +1,4 @@ [ - { - "name": "Menu", - "isTitle": true - }, { "name": "Lista de Pacientes", "icon": "clipboard-heart-fill", diff --git a/src/data/sidebar-items-financeiro.json b/src/data/sidebar-items-financeiro.json index dfce9bc..0495b53 100644 --- a/src/data/sidebar-items-financeiro.json +++ b/src/data/sidebar-items-financeiro.json @@ -1,8 +1,4 @@ [ - { - "name": "Menu-Financeiro", - "isTitle": true - }, { "name": "Controle Financeiro", "icon": "cash-coin", diff --git a/src/data/sidebar-items-medico.json b/src/data/sidebar-items-medico.json index e31bf12..e7f7617 100644 --- a/src/data/sidebar-items-medico.json +++ b/src/data/sidebar-items-medico.json @@ -1,8 +1,4 @@ [ - { - "name": "Menu", - "isTitle": true - }, { "name": "Prontuário", diff --git a/src/data/sidebar-items-secretaria.json b/src/data/sidebar-items-secretaria.json index afe9e0a..c74cbf5 100644 --- a/src/data/sidebar-items-secretaria.json +++ b/src/data/sidebar-items-secretaria.json @@ -1,9 +1,4 @@ [ - { - "name": "Menu", - "isTitle": true - }, - { "name":"Início", "url": "/secretaria/",