From 4cca0a53ea0765fab2e060ade1530c2fe21b9ea0 Mon Sep 17 00:00:00 2001 From: RafaeL_Monteiro Date: Tue, 7 Oct 2025 22:40:14 -0300 Subject: [PATCH 1/5] Menu de acessibilidade --- src/App.js | 42 ++---- src/components/VlibrasWidget.jsx | 62 ++++++++ src/components/botaoacessibilidade.css | 198 +++++++++++++++++++++++++ src/components/botaoacessibilidade.jsx | 101 +++++++++++++ src/index.js | 4 +- src/pages/DoctorTable.jsx | 20 +-- src/pages/TablePaciente.jsx | 19 +-- 7 files changed, 396 insertions(+), 50 deletions(-) create mode 100644 src/components/VlibrasWidget.jsx create mode 100644 src/components/botaoacessibilidade.css create mode 100644 src/components/botaoacessibilidade.jsx diff --git a/src/App.js b/src/App.js index cb86164..1312003 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; -import { useState } from "react"; +// Suas páginas import Login from "./pages/Login"; import Register from "./pages/Register"; import Forgot from "./pages/ForgotPassword"; @@ -10,29 +10,19 @@ import PerfilFinanceiro from "./perfis/perfil_financeiro/PerfilFinanceiro"; import Perfiladm from "./perfis/Perfil_adm/Perfiladm"; import PerfilMedico from "./perfis/Perfil_medico/PerfilMedico"; +// Componentes globais de acessibilidade +import VlibrasWidget from "./components/VlibrasWidget"; + +import BotaoAcessibilidade from "./components/botaoacessibilidade.jsx"; + function App() { - // O estado controla qual view mostrar: false = Landing Page, true = Dashboard - const [isInternalView, setIsInternalView] = useState(false); - // const [isSecretaria, setIsSecretaria] = useState(false); - - const handleEnterSystem = () => { - setIsInternalView(true); - }; - - const handleExitSystem = () => { - setIsInternalView(false); - }; - - // if (isSecretaria) { - // return setIsSecretaria(false)} />; - // } - - // Se não estiver na visualização interna, retorna a LandingPage. - if (!isInternalView) { - return ( + return ( + + + - } /> + } /> } /> } /> } /> @@ -43,14 +33,8 @@ function App() { Página não encontrada} /> - ) - } - - // Se estiver na visualização interna, retorna o PerfilSecretaria - return ( - // Passamos a função de saída (logout) - ); } -export default App; \ No newline at end of file +export default App; + diff --git a/src/components/VlibrasWidget.jsx b/src/components/VlibrasWidget.jsx new file mode 100644 index 0000000..81e8d48 --- /dev/null +++ b/src/components/VlibrasWidget.jsx @@ -0,0 +1,62 @@ +// src/components/VlibrasWidget.jsx + +import React, { useEffect } from 'react'; + +const VlibrasWidget = () => { + useEffect(() => { + // Cria o elemento div principal do Vlibras + const vwDiv = document.createElement('div'); + vwDiv.setAttribute('vw', ''); + vwDiv.classList.add('enabled'); + vwDiv.id = 'vlibras-div'; // 🔹 ADICIONADO: ID para remoção segura + + const vwAccessButton = document.createElement('div'); + vwAccessButton.setAttribute('vw-access-button', ''); + vwAccessButton.classList.add('active'); + + const vwPluginWrapper = document.createElement('div'); + vwPluginWrapper.setAttribute('vw-plugin-wrapper', ''); + + const vwPluginTopWrapper = document.createElement('div'); + vwPluginTopWrapper.classList.add('vw-plugin-top-wrapper'); + + vwPluginWrapper.appendChild(vwPluginTopWrapper); + vwDiv.appendChild(vwAccessButton); + vwDiv.appendChild(vwPluginWrapper); + + document.body.appendChild(vwDiv); + + // Adiciona o script principal do Vlibras + const script = document.createElement('script'); + script.src = 'https://vlibras.gov.br/app/vlibras-plugin.js'; + script.async = true; + script.id = 'vlibras-script'; // 🔹 ADICIONADO: ID para remoção segura + + script.onload = () => { + // Inicializa o widget após o script carregar + // Certifica-se que a API está disponível globalmente + if (window.VLibras) { + new window.VLibras.Widget('https://vlibras.gov.br/app'); + } + }; + + document.body.appendChild(script); + + // 🔹 ATUALIZADO: Função de limpeza para remover os elementos pelos IDs + return () => { + const existingVwDiv = document.getElementById('vlibras-div'); + if (existingVwDiv) { + document.body.removeChild(existingVwDiv); + } + + const existingScript = document.getElementById('vlibras-script'); + if (existingScript) { + document.body.removeChild(existingScript); + } + }; + }, []); // O array vazio [] garante que o useEffect rode apenas uma vez + + return null; // Este componente não renderiza nada visualmente +}; + +export default VlibrasWidget; \ No newline at end of file diff --git a/src/components/botaoacessibilidade.css b/src/components/botaoacessibilidade.css new file mode 100644 index 0000000..4fc533f --- /dev/null +++ b/src/components/botaoacessibilidade.css @@ -0,0 +1,198 @@ +/* --- ESTILO PARA ESCONDER O BOTÃO ORIGINAL DO VLIBRAS --- */ +[vw-access-button] { + display: none !important; +} + +/* --- ESTILOS GERAIS DO COMPONENTE --- */ +.container-acessibilidade { + position: fixed; + bottom: 20px; + right: 20px; + z-index: 99998; + display: flex; + flex-direction: column; + align-items: center; +} + +.botao-flutuante-acessibilidade { + position: relative; + z-index: 2; /* Acima do menu */ + background: linear-gradient(45deg, #007bff, #0056b3); + color: white; + border: none; + border-radius: 50%; + width: 60px; + height: 60px; + cursor: pointer; + box-shadow: 0 5px 15px rgba(0, 91, 179, 0.4); + display: flex; + justify-content: center; + align-items: center; + transition: transform 0.2s ease-in-out, box-shadow 0.2s ease; + margin-top: 15px; /* Distância do menu */ +} + +.botao-flutuante-acessibilidade:hover { + transform: scale(1.1); + box-shadow: 0 8px 20px rgba(0, 91, 179, 0.5); +} + +/* --- ESTILOS DO MENU "BALÃO" --- */ +.menu-opcoes { + background-color: #ffffff; + border-radius: 12px; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); + padding: 8px; + width: 280px; + z-index: 1; /* Abaixo do botão principal */ + border: 1px solid #e9ecef; + + /* Animação */ + transform-origin: bottom center; + transform: translateY(10px) scale(0.95); + opacity: 0; + visibility: hidden; + transition: all 0.2s ease; +} + +.menu-opcoes.aberto { + transform: translateY(0) scale(1); + opacity: 1; + visibility: visible; +} + +.menu-titulo { + font-size: 14px; + font-weight: 600; + color: #6c757d; + padding: 8px 12px; + border-bottom: 1px solid #f1f3f5; + margin-bottom: 5px; + transition: color 0.2s ease, border-bottom-color 0.2s ease; +} + +/* --- ESTILOS DOS BOTÕES E DA CHECKBOX NO MENU --- */ +.menu-opcoes button, +.checkbox-label-button { + display: flex; + align-items: center; + gap: 12px; + background-color: transparent; + border: none; + padding: 12px; + text-align: left; + cursor: pointer; + font-size: 16px; + color: #212529; + width: 100%; + border-radius: 8px; + transition: background-color 0.2s ease, color 0.2s ease; +} + +.menu-opcoes button:hover, +.checkbox-label-button:hover { + background-color: #f8f9fa; +} + +/* --- ESTILO DO INTERRUPTOR (CHECKBOX) --- */ +.checkbox-label-button { + justify-content: space-between; +} + +.checkbox-label-button input[type="checkbox"] { + appearance: none; + -webkit-appearance: none; + position: relative; + width: 44px; + height: 24px; + background-color: #ced4da; + border-radius: 12px; + cursor: pointer; + transition: background-color 0.3s ease-in-out; +} + +.checkbox-label-button input[type="checkbox"]::before { + content: ''; + position: absolute; + top: 2px; + left: 2px; + width: 20px; + height: 20px; + background-color: white; + border-radius: 50%; + box-shadow: 0 1px 3px rgba(0,0,0,0.2); + transition: transform 0.3s ease-in-out; +} + +.checkbox-label-button input[type="checkbox"]:checked { + background-color: #0d6efd; +} + +.checkbox-label-button input[type="checkbox"]:checked::before { + transform: translateX(20px); +} + + +/* --- ✨ NOVOS ESTILOS PARA O CONTROLE DE FONTE ✨ --- */ + +.font-size-control { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 12px; + color: #212529; + transition: color 0.2s ease; + border-top: 1px solid #f1f3f5; + margin-top: 5px; +} + +.font-size-label { + font-size: 16px; + display: flex; + align-items: center; + gap: 12px; +} + +.font-size-buttons { + display: flex; + align-items: center; + gap: 8px; +} + +.font-size-buttons button { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-weight: bold; + font-size: 16px; + background-color: #e9ecef; + color: #495057; + border: 1px solid #dee2e6; + border-radius: 6px; + width: 36px; + height: 32px; + padding: 0; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + transition: background-color 0.2s ease, color 0.2s ease; +} + +.font-size-buttons button:hover { + background-color: #dee2e6; +} + +.font-size-buttons button:disabled { + background-color: #f8f9fa; + color: #adb5bd; + cursor: not-allowed; + border-color: #f1f3f5; +} + +.font-size-display { + font-size: 14px; + font-weight: 600; + color: #495057; + min-width: 45px; + text-align: center; + transition: color 0.2s ease; +} diff --git a/src/components/botaoacessibilidade.jsx b/src/components/botaoacessibilidade.jsx new file mode 100644 index 0000000..2ea8936 --- /dev/null +++ b/src/components/botaoacessibilidade.jsx @@ -0,0 +1,101 @@ +import React, { useState, useEffect, useRef } from 'react'; +import './botaoacessibilidade.css'; // Importando o CSS + +function BotaoAcessibilidade() { + const [isMenuOpen, setIsMenuOpen] = useState(false); + const [isReadOnHoverActive, setIsReadOnHoverActive] = useState(false); + const [isDarkMode, setIsDarkMode] = useState(false); + const lastSpokenTargetRef = useRef(null); + + useEffect(() => { + if (!isReadOnHoverActive) { + window.speechSynthesis.cancel(); + return; + } + const handleMouseOver = (event) => { + const target = event.target; + if (target && target !== lastSpokenTargetRef.current && target.innerText) { + const text = target.innerText.trim(); + if (text.length > 0 && ['P', 'H1', 'H2', 'H3', 'BUTTON', 'A', 'LI', 'LABEL'].includes(target.tagName)) { + lastSpokenTargetRef.current = target; + window.speechSynthesis.cancel(); + const utterance = new SpeechSynthesisUtterance(text); + utterance.lang = 'pt-BR'; + window.speechSynthesis.speak(utterance); + } + } + }; + document.body.addEventListener('mouseover', handleMouseOver); + return () => { + document.body.removeEventListener('mouseover', handleMouseOver); + window.speechSynthesis.cancel(); + }; + }, [isReadOnHoverActive]); + + const handleVlibrasClick = () => { + const originalVlibrasButton = document.querySelector('[vw-access-button]'); + if (originalVlibrasButton) { + originalVlibrasButton.click(); + } else { + alert("O Vlibras não pôde ser ativado."); + } + setIsMenuOpen(false); + }; + + const handleReadAloud = () => { + const selectedText = window.getSelection().toString().trim(); + if (selectedText) { + window.speechSynthesis.cancel(); + const utterance = new SpeechSynthesisUtterance(selectedText); + utterance.lang = 'pt-BR'; + window.speechSynthesis.speak(utterance); + } else { + alert("Por favor, selecione um texto para ler em voz alta."); + } + setIsMenuOpen(false); + }; + + return ( +
+
+
Acessibilidade
+ + + +
+ +
+ ); +} + +export default BotaoAcessibilidade; + diff --git a/src/index.js b/src/index.js index 4bfc68d..b3c6e84 100644 --- a/src/index.js +++ b/src/index.js @@ -7,10 +7,10 @@ import { AuthProvider } from "./components/utils/AuthProvider"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - + // - , + // , ); diff --git a/src/pages/DoctorTable.jsx b/src/pages/DoctorTable.jsx index 9d2e29c..019f7f7 100644 --- a/src/pages/DoctorTable.jsx +++ b/src/pages/DoctorTable.jsx @@ -10,13 +10,13 @@ function TableDoctor() { const [search, setSearch] = useState(""); const [filtroAniversariante, setFiltroAniversariante] = useState(false); - // estados do modal + // estados do modal const [showDeleteModal, setShowDeleteModal] = useState(false); const [selectedDoctorId, setSelectedDoctorId] = useState(null); // Função para excluir médicos const deleteDoctor = async (id) => { - + const authHeader = getAuthorizationHeader() console.log(id, 'teu id') @@ -56,11 +56,11 @@ function TableDoctor() { // Buscar médicos da API useEffect(() => { - const authHeader = getAuthorizationHeader() + const authHeader = getAuthorizationHeader() - console.log(authHeader, 'aqui autorização') + console.log(authHeader, 'aqui autorização') - var myHeaders = new Headers(); + var myHeaders = new Headers(); myHeaders.append("apikey", API_KEY); myHeaders.append("Authorization", `${authHeader}`); var requestOptions = { @@ -75,14 +75,14 @@ function TableDoctor() { .catch(error => console.log('error', error)); }, []); - // Filtrar médicos pelo campo de pesquisa e aniversariantes - const medicosFiltrados = medicos.filter( + // ✨ CORREÇÃO AQUI: Verificamos se 'medicos' é um array antes de filtrar. + const medicosFiltrados = Array.isArray(medicos) ? medicos.filter( (medico) => `${medico.nome} ${medico.cpf} ${medico.email} ${medico.telefone}` .toLowerCase() .includes(search.toLowerCase()) && (filtroAniversariante ? ehAniversariante(medico.data_nascimento) : true) - ); + ) : []; // Se não for um array, usamos um array vazio como fallback. return ( <> @@ -180,7 +180,7 @@ function TableDoctor() { - {/* Editar */} + {/* Editar */} - + + + + +
+
+
+ {" "} + Filtros +
+ +
+ +
+
+ +
+ + + + + + + + + + + + + + {RelatoriosFiltrados.length > 0 ? ( + RelatoriosFiltrados.map((relatorio, index) => ( + + + + + + + + + + + )) + ) : ( + + + + )} + +
PacienteCPFExameAções
{relatorio.order_number}{PacientesComRelatorios[index]?.full_name}{PacientesComRelatorios[index]?.cpf}{relatorio.exam}{relatorio.create_at} +
+
+ +
+ + Visualizar + Editar + Excluir +
+
+
+
+ Nenhum paciente encontrado. +
+
+
+ + + + + + + + ) +} + +export default DoctorRelatorioManager \ No newline at end of file diff --git a/src/PagesMedico/FormNovoRelatorio.jsx b/src/PagesMedico/FormNovoRelatorio.jsx new file mode 100644 index 0000000..29018f7 --- /dev/null +++ b/src/PagesMedico/FormNovoRelatorio.jsx @@ -0,0 +1,208 @@ +import React from 'react' +import '../PagesMedico/styleMedico/FormNovoRelatorio.css' +import { useState } from 'react' +import { useNavigate } from 'react-router-dom' +import { useAuth } from '../components/utils/AuthProvider' +import { GetPatientByCPF } from '../components/utils/Functions-Endpoints/Patient' +import { FormatCPF } from '../components/utils/Formatar/Format' +import API_KEY from '../components/utils/apiKeys' +import html2pdf from "html2pdf.js"; + + +const FormNovoRelatorio = () => { + const {getAuthorizationHeader} = useAuth() + let authHeader = getAuthorizationHeader() + const navigate= useNavigate() + const [DictInfo, setDictInfo] = useState({}) + const [showModal, setShowModal] = useState(false) + + const handleChange = (e) => { + const { name, value } = e.target; + console.log(name, value) + + + if(name === 'paciente_cpf') { + const formattedCPF = FormatCPF(value); + setDictInfo((prev) => ({ ...prev, [name]: formattedCPF })); + + const fetchPatient = async () => { + const patientData = await GetPatientByCPF(formattedCPF, authHeader); + if (patientData) { + setDictInfo((prev) => ({ + ...prev, + paciente_cpf:value, + paciente_nome: patientData.full_name, + paciente_id: patientData.id + })); + } + + }; + if(formattedCPF.length === 14){ + fetchPatient(); + } + }else{ + setDictInfo((prev) => ({ ...prev, [name]: value })); + } + } + + const handleSubmit = (e) => { + e.preventDefault(); + console.log(DictInfo) + setShowModal(true) + + var myHeaders = new Headers(); +myHeaders.append("apikey", API_KEY); +myHeaders.append("Authorization", authHeader); +myHeaders.append("Content-Type", "application/json"); + +var raw = JSON.stringify({ + "patient_id": DictInfo.paciente_id, + + "exam": DictInfo.exam, + "diagnosis": DictInfo.diagnosis, + "conclusion": DictInfo.conclusao, + "status": "draft", + "requested_by": DictInfo.requested_by, + + "hide_date": false, + "hide_signature": false, +}); + +var requestOptions = { + method: 'POST', + headers: myHeaders, + body: raw, + redirect: 'follow' +}; + +fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports", requestOptions) + .then(response => response.text()) + .then(result => console.log(result)) + .catch(error => console.log('error', error)); + } + + return ( +
+ {showModal &&( +
+
+
+
+
Relatório criado com sucesso
+ +
+
+

Você também pode baixa-lo agora em pdf

+
+
+ + + +
+
+
+
+ )} +

Criar novo relatório

+ +
+ +
+
+ +
+ + +
+ +
+ + +
+ + +
+ + +
+ +
+ + +
+ + +
+ + +
+ +
+ +
+
+ + +
+ +
+ + +
+
+ + + +
+
+ +

Modelo do relatório

+
+ +
+

Clinica Rise up

+

Dr {DictInfo.requested_by} - CRM/SP 123456

+

Avenida - (79) 9 4444-4444

+
+ +
+

Paciente: {DictInfo?.paciente_nome}

+

Data de nascimento:

+ +

Data do exame: {DictInfo.data_exame}

+ +

Exame: {DictInfo.exame}

+ +

Diagnostico: {DictInfo.diagnostico}

+ +

Conclusão: {DictInfo.conclusao}

+ +
+ +
+

Dr {DictInfo.requested_by}

+

Emitido em: 0

+
+ +
+ +
+ ) +} + +export default FormNovoRelatorio \ No newline at end of file diff --git a/src/PagesMedico/styleMedico/FormNovoRelatorio.css b/src/PagesMedico/styleMedico/FormNovoRelatorio.css new file mode 100644 index 0000000..7d8a5ed --- /dev/null +++ b/src/PagesMedico/styleMedico/FormNovoRelatorio.css @@ -0,0 +1,55 @@ +#folhaA4 { + width: 210mm; + min-height: 207mm; + padding: 20mm; + margin: 10mm auto; + border: 1px solid #ccc; + background: white; + +} + +#primeiraLinha{ + display: flex; + flex-direction: row; + gap: 20px; + margin-bottom: 20px; +} + +input,textarea,label{ + font-size: 1.1rem; +} + +textarea{ + width: 100%; + height: 100px; + +} + +.submitButton{ + display: flex; + margin-left: auto; + height:50% ; + padding: 8px 20px; + + font-size: medium; +} + +.bi-download{ + font-size: 1.2rem; + margin-right: 5px; + font-weight: bold; +} + +#infoPaciente{ + margin-top: 50px; + margin-bottom: 40px; +} + +#header-relatorio{ + text-align: center; + margin-bottom: 30px; +} + +.info-paciente{ + font-weight: bold; +} \ No newline at end of file diff --git a/src/components/utils/Functions-Endpoints/Patient.js b/src/components/utils/Functions-Endpoints/Patient.js index dc94350..ad84854 100644 --- a/src/components/utils/Functions-Endpoints/Patient.js +++ b/src/components/utils/Functions-Endpoints/Patient.js @@ -2,7 +2,7 @@ import API_KEY from "../apiKeys"; -const GetByID = async (ID,authHeader) => { +const GetPatientByID = async (ID,authHeader) => { console.log(authHeader, 'mostrando autorização dentro da função') @@ -22,4 +22,34 @@ const DictPaciente = await result.json() return DictPaciente } -export {GetByID} \ No newline at end of file +const GetAllPatients = async (authHeader) => { + var myHeaders = new Headers(); + myHeaders.append("apikey", API_KEY); + myHeaders.append("Authorization", authHeader); + + var requestOptions = { + method: 'GET', + headers: myHeaders, + redirect: 'follow' + }; + + const result = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions) + const DictPacientes = await result.json() + return DictPacientes + } + + const GetPatientByCPF = async (cpf, authHeader) => { + const Pacientes = await GetAllPatients(authHeader) + + + for (let i = 0; i < Pacientes.length; i++) { + if (Pacientes[i].cpf === cpf) { + console.log('Paciente encontrado:', Pacientes[i]); + return Pacientes[i]; + } + else{console.log("nada encontrado")} + } + + } + +export {GetPatientByID, GetAllPatients, GetPatientByCPF} \ No newline at end of file diff --git a/src/data/sidebar-items-medico.json b/src/data/sidebar-items-medico.json index 0d2a439..e31bf12 100644 --- a/src/data/sidebar-items-medico.json +++ b/src/data/sidebar-items-medico.json @@ -9,12 +9,6 @@ "icon": "calendar-plus-fill", "url": "/medico/prontuario" }, - - { - "name": "Laudos", - "icon": "table", - "url": "/medico/laudo" - }, { "name": "Seus Agendamentos", "icon": "calendar", diff --git a/src/pages/Details.jsx b/src/pages/Details.jsx index 70cba43..4edc878 100644 --- a/src/pages/Details.jsx +++ b/src/pages/Details.jsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import avatarPlaceholder from '../assets/images/avatar_placeholder.png'; import { useParams, useNavigate, useLocation, Navigate } from "react-router-dom"; import API_KEY from "../components/utils/apiKeys"; -import {GetByID} from "../components/utils/Functions-Endpoints/Patient" +import {GetPatientByID} from "../components/utils/Functions-Endpoints/Patient" import { Link } from "react-router-dom"; import { useAuth } from "../components/utils/AuthProvider"; @@ -27,7 +27,7 @@ const Details = () => { console.log(patientID, 'teu id') const authHeader = getAuthorizationHeader() - GetByID(patientID, authHeader) + GetPatientByID(patientID, authHeader) .then((data) => { console.log(data, "paciente vindo da API"); setPaciente(data[0]); // supabase retorna array diff --git a/src/pages/EditPage.jsx b/src/pages/EditPage.jsx index 91091f3..306a970 100644 --- a/src/pages/EditPage.jsx +++ b/src/pages/EditPage.jsx @@ -3,7 +3,7 @@ import React from 'react' import PatientForm from '../components/patients/PatientForm' import {useEffect, useState} from 'react' -import { GetByID } from '../components/utils/Functions-Endpoints/Patient' +import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient' import API_KEY from '../components/utils/apiKeys' import {useNavigate, useParams } from 'react-router-dom' import { useAuth } from '../components/utils/AuthProvider' @@ -19,7 +19,7 @@ const PatientID = Parametros.id useEffect(() => { const authHeader = getAuthorizationHeader() - GetByID(PatientID, authHeader) + GetPatientByID(PatientID, authHeader) .then((data) => { console.log(data[0], "paciente vindo da API"); setPatientPUT(data[0]); // supabase retorna array diff --git a/src/pages/Inicio.jsx b/src/pages/Inicio.jsx index 8b6f5a3..7bdbe78 100644 --- a/src/pages/Inicio.jsx +++ b/src/pages/Inicio.jsx @@ -11,33 +11,6 @@ function Inicio() { const [pacientes, setPacientes] = useState([]); const [agendamentos, setAgendamentos] = useState([]); - useEffect(() => { - - /*const fetchPacientes = async () => { - try { - const res = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes"); - const data = await res.json(); - console.log(data) - //setPacientes(data.data); - } catch (error) { - console.error("Erro ao buscar pacientes:", error); - } - }; - - const fetchAgendamentos = async () => { - return; // <===serve para que nao cause erro - // try { - // const res = await fetch(); - // const data = await res.json(); - // setAgendamentos(data.data); - // } catch (error) { - // console.error("Erro ao buscar agendamentos:", error); - // } - }; - - fetchPacientes(); - fetchAgendamentos();*/ - }, []); const totalPacientes = pacientes.length; const novosEsseMes = pacientes.filter(p => p.createdAt && new Date(p.createdAt).getMonth() === new Date().getMonth()).length; diff --git a/src/perfis/Perfil_medico/PerfilMedico.jsx b/src/perfis/Perfil_medico/PerfilMedico.jsx index 7798310..f34b0b7 100644 --- a/src/perfis/Perfil_medico/PerfilMedico.jsx +++ b/src/perfis/Perfil_medico/PerfilMedico.jsx @@ -1,12 +1,13 @@ import { Routes, Route } from "react-router-dom"; import Sidebar from "../../components/Sidebar"; -import LaudoManager from "../../pages/LaudoManager"; +import DoctorRelatorioManager from "../../PagesMedico/DoctorRelatorioManager"; import Prontuario from "../../PagesMedico/prontuario"; import Relatorio from "../../PagesMedico/relatorio"; import Agendamento from "../../PagesMedico/Agendamento"; import Chat from "../../PagesMedico/Chat"; import DoctorItems from "../../data/sidebar-items-medico.json"; +import FormNovoRelatorio from "../../PagesMedico/FormNovoRelatorio"; // ...existing code... function PerfilMedico() { @@ -16,12 +17,12 @@ function PerfilMedico() {
- } /> - } /> + } /> + } /> } /> - } /> + } /> } /> - } /> {/* <-- nova rota */} + } />
diff --git a/src/perfis/perfil_financeiro/PerfilFinanceiro.jsx b/src/perfis/perfil_financeiro/PerfilFinanceiro.jsx index 36bb2f1..c5cf795 100644 --- a/src/perfis/perfil_financeiro/PerfilFinanceiro.jsx +++ b/src/perfis/perfil_financeiro/PerfilFinanceiro.jsx @@ -12,9 +12,7 @@ function PerfilFinanceiro({ onLogout }) {
}/> - }/> - Página não encontrada} />
From 9bbbded9d6cca4c6d62c002829f99c54f908e9f1 Mon Sep 17 00:00:00 2001 From: Eduarda-SS <137419071+Eduarda-SS@users.noreply.github.com> Date: Wed, 8 Oct 2025 19:56:04 -0300 Subject: [PATCH 3/5] Adicionando modo escuro e ajustes de acessibilidade --- public/index.html | 1 + src/App.css | 9 + src/PagesAdm/gestao.css | 111 +++++++ src/PagesAdm/painel.css | 55 ++- src/PagesAdm/painel.jsx | 2 +- src/PagesMedico/styleMedico/Agendamento.css | 252 +++++++------- src/PagesMedico/styleMedico/FilaEspera.css | 51 +++ src/PagesMedico/styleMedico/chat.css | 76 +++++ src/PagesMedico/styleMedico/geral.css | 82 +++++ src/assets/scss/_utilities.scss | 34 +- src/assets/scss/app.scss | 6 + src/assets/scss/components/_alert.scss | 12 +- src/assets/scss/components/_avatar.scss | 24 ++ src/assets/scss/components/_badge.scss | 9 +- src/assets/scss/components/_breadcrumb.scss | 8 + src/assets/scss/components/_buttons.scss | 18 + src/assets/scss/components/_card.scss | 83 +++++ src/assets/scss/components/_carousel.scss | 11 + src/assets/scss/components/_comment.scss | 20 +- src/assets/scss/components/_divider.scss | 12 + src/assets/scss/components/_dropdowns.scss | 14 + src/assets/scss/components/_forms.scss | 26 ++ src/assets/scss/components/_icons.scss | 21 ++ src/assets/scss/components/_modal.scss | 8 + src/assets/scss/components/_navbar.scss | 11 + src/assets/scss/components/_navs.scss | 29 ++ src/assets/scss/components/_pagination.scss | 12 + src/assets/scss/components/_placeholders.scss | 15 + src/assets/scss/components/_progress.scss | 16 + src/assets/scss/components/_sidebar.scss | 48 +++ src/assets/scss/components/_table.scss | 38 +++ src/assets/scss/pages/auth.scss | 15 +- src/assets/scss/pages/chat.scss | 8 +- src/assets/scss/pages/datatables.scss | 42 +++ src/assets/scss/pages/dripicons.scss | 2 +- src/assets/scss/pages/email.scss | 3 - .../scss/pages/form-element-select.scss | 2 +- src/assets/scss/themes/dark/_mazer-dark.scss | 3 + src/assets/scss/widgets/todo.scss | 17 +- src/assets/static/js/components/dark.js | 7 +- .../style/formagendamentos.css | 85 ++++- .../style/styleTabelas/tabeladia.css | 46 +++ .../style/styleTabelas/tabelames.css | 72 +++- .../style/styleTabelas/tabelasemana.css | 41 ++- src/components/botaoacessibilidade.css | 74 +++++ src/components/botaoacessibilidade.jsx | 5 + src/pages/LaudoManager.jsx | 43 +-- src/pages/LaudoStyle.css | 312 ++++++++++++++++++ src/pages/TablePaciente.jsx | 2 +- src/pages/style/Agendamento.css | 135 ++++++-- src/pages/style/FilaEspera.css | 37 +++ src/pages/style/FinanceiroDashboard.css | 91 +++++ src/pages/style/Inicio.css | 49 +++ src/pages/style/LandingPage.css | 54 +++ 54 files changed, 2047 insertions(+), 212 deletions(-) create mode 100644 src/pages/LaudoStyle.css diff --git a/public/index.html b/public/index.html index c964584..98777e3 100644 --- a/public/index.html +++ b/public/index.html @@ -23,5 +23,6 @@ + diff --git a/src/App.css b/src/App.css index 9544f59..6d94f35 100644 --- a/src/App.css +++ b/src/App.css @@ -35,4 +35,13 @@ to { transform: rotate(360deg); } +} + +html[data-bs-theme="dark"] .App-header { + background-color: #121212; + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .App-link { + color: #bb86fc; } \ No newline at end of file diff --git a/src/PagesAdm/gestao.css b/src/PagesAdm/gestao.css index 6d1b591..5991041 100644 --- a/src/PagesAdm/gestao.css +++ b/src/PagesAdm/gestao.css @@ -253,3 +253,114 @@ color: #1e3a8a; transform: scale(1.2); } + +html[data-bs-theme="dark"] .dashboard-container { + background-color: #121212; + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .dashboard-header, +html[data-bs-theme="dark"] .dashboard-title, +html[data-bs-theme="dark"] .dashboard-subtitle { + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .new-user-btn { + background-color: #2563eb; + color: #fff; +} + +html[data-bs-theme="dark"] .new-user-btn:hover { + background-color: #1e40af; +} + +html[data-bs-theme="dark"] .filters-container, +html[data-bs-theme="dark"] .user-table-container { + background: #1a1a1a; + box-shadow: 0 4px 6px rgba(0,0,0,0.4); +} + +html[data-bs-theme="dark"] .filters-title, +html[data-bs-theme="dark"] .user-table-container h2 { + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .filters-subtitle, +html[data-bs-theme="dark"] .user-table-container p { + color: #bdbdbd; +} + +html[data-bs-theme="dark"] .filters-input, +html[data-bs-theme="dark"] .filters-select { + background: #232323; + color: #e0e0e0; + border-color: #333; +} + +html[data-bs-theme="dark"] .filters-input:focus, +html[data-bs-theme="dark"] .filters-select:focus { + border-color: #2563eb; + box-shadow: 0px 0px 0px 3px rgba(37, 99, 235, 0.2); +} + +html[data-bs-theme="dark"] .cards-container .card { + background-color: #181818; + color: #e0e0e0; + box-shadow: 0 4px 6px rgba(0,0,0,0.4); +} + +html[data-bs-theme="dark"] .highlight:hover { + background: #232a3a; + border: 1px solid #2563eb33; +} + +html[data-bs-theme="dark"] .card-label { + color: #888; +} + +html[data-bs-theme="dark"] .card-value { + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .card-extra { + color: #bdbdbd; +} + +html[data-bs-theme="dark"] .card-extra.positive { + color: #2563eb; +} + +html[data-bs-theme="dark"] .user-table th { + background-color: #232323; + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .user-table td { + color: #e0e0e0; + border-bottom: 1px solid #333; +} + +html[data-bs-theme="dark"] .user-table tr:hover { + background-color: #232a3a; +} + +html[data-bs-theme="dark"] .profile-badge { + background-color: #2563eb; + color: #fff; +} + +html[data-bs-theme="dark"] .status-badge.ativo { + background-color: #28a745; +} + +html[data-bs-theme="dark"] .status-badge.inativo { + background-color: #dc3545; +} + +html[data-bs-theme="dark"] .action-icon { + color: #bdbdbd; +} + +html[data-bs-theme="dark"] .action-icon:hover { + color: #2563eb; +} \ No newline at end of file diff --git a/src/PagesAdm/painel.css b/src/PagesAdm/painel.css index d476105..6a54058 100644 --- a/src/PagesAdm/painel.css +++ b/src/PagesAdm/painel.css @@ -208,7 +208,60 @@ .department-info { font-size: 13px; - color: #333; + color: #333; white-space: nowrap; } +html[data-bs-theme="dark"] .painel-container { + background-color: #121212; + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .painel-titulo, +html[data-bs-theme="dark"] .painel-subtitulo, +html[data-bs-theme="dark"] .card-info, +html[data-bs-theme="dark"] .grafico-titulo, +html[data-bs-theme="dark"] .grafico-subtitulo, +html[data-bs-theme="dark"] .performance-titulo, +html[data-bs-theme="dark"] .performance-subtitulo, +html[data-bs-theme="dark"] .department-name, +html[data-bs-theme="dark"] .department-info { + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .painel-card, +html[data-bs-theme="dark"] .grafico-card, +html[data-bs-theme="dark"] .performance-container { + background: #1a1a1a; + box-shadow: 0px 2px 8px rgba(0,0,0,0.5); + border-color: #222; + color: #fff; +} + +html[data-bs-theme="dark"] .painel-card:hover { + background: #232a36; + border: 1px solid #0066ff33; + box-shadow: 0px 8px 24px rgba(0,102,255,0.12); + color: #fff; +} + +html[data-bs-theme="dark"] .badge { + background: #0050cc; + color: #fff; +} + +html[data-bs-theme="dark"] .progress-bar, +html[data-bs-theme="dark"] .departamento-barra { + background: #222; + color: #fff; +} + +html[data-bs-theme="dark"] .progress-fill { + background: #3388ff; + color: #fff; +} + +html[data-bs-theme="dark"] .departamento-fill { + background: #3388ff; + color: #fff; +} \ No newline at end of file diff --git a/src/PagesAdm/painel.jsx b/src/PagesAdm/painel.jsx index f37716b..1861054 100644 --- a/src/PagesAdm/painel.jsx +++ b/src/PagesAdm/painel.jsx @@ -150,7 +150,7 @@ export default function PainelAdministrativo() { {dep.nome} diff --git a/src/PagesMedico/styleMedico/Agendamento.css b/src/PagesMedico/styleMedico/Agendamento.css index 6b887ab..fe00c0c 100644 --- a/src/PagesMedico/styleMedico/Agendamento.css +++ b/src/PagesMedico/styleMedico/Agendamento.css @@ -1,151 +1,157 @@ -/* --- Esconde a barra de unidade e profissional --- */ -.unidade-selecionarprofissional { - display: none; +/* Default (light mode) styles */ +html { + background-color: #f8f9fa; + color: #212529; } -/* --- Posiciona a barra de busca corretamente --- */ -.busca-atendimento { - display: flex; - align-items: center; /* Alinha os itens verticalmente */ - margin-top: 20px; /* Espaço acima da barra de busca */ - padding: 0 10px; /* Adiciona um padding lateral para alinhar com o resto */ - gap: 15px; -} - -.busca-atendimento > div:first-child { - width: 400px; /* Define um tamanho para a barra de pesquisa */ - display: flex; - align-items: center; +.calendario { + background-color: #fff; + border: 1px solid #dee2e6; + box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .busca-atendimento input { - margin-left: 8px; - border-radius: 8px; - padding: 8px; - width: 100%; - border: 1px solid #ccc; + background-color: #fff; + color: #212529; + border: 1px solid #ced4da; } .busca-atendimento select { - padding: 8px; - border-radius: 8px; - background-color: #0078d7; - color: white; - font-weight: bold; - border: none; + background-color: #5980fd; + color: #fff; } -/* --- Estilos dos botões de Dia, Semana, Mês --- */ .btn-selecionar-tabeladia, .btn-selecionar-tabelasemana, .btn-selecionar-tabelames { - background-color: rgba(231, 231, 231, 0.808); - padding: 8px 10px; - font-size: larger; - font-weight: bold; - border-style: hidden; - cursor: pointer; -} - -.btn-selecionar-tabeladia { - border-radius: 10px 0px 0px 10px; -} - -.btn-selecionar-tabelames { - border-radius: 0px 10px 10px 0px; + background-color: #fff; + color: #212529; } .btn-selecionar-tabeladia.ativo, .btn-selecionar-tabelasemana.ativo, .btn-selecionar-tabelames.ativo { - background-color: lightcyan; - border-color: darkcyan; - font-weight: bolder; -} - -/* --- Container dos botões e legenda --- */ -.btns-e-legenda-container { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 10px; - padding: 0 10px; -} - -/* --- Legendas --- */ -.legenda-tabela { - display: flex; - gap: 15px; -} - -#status-card-consulta-realizado, .legenda-item-realizado { - background-color: #b7ffbd; - border: 3px solid #91d392; - padding: 5px; - font-weight: bold; - border-radius: 10px; -} - -#status-card-consulta-cancelado, .legenda-item-cancelado { - background-color: #ffb7cc; - border: 3px solid #ff6c84; - padding: 5px; - font-weight: bold; - border-radius: 10px; -} - -#status-card-consulta-confirmado, .legenda-item-confirmado { - background-color: #eef8fb; - border: 3px solid #d8dfe7; - padding: 5px; - font-weight: bold; - border-radius: 10px; -} - -#status-card-consulta-agendado, .legenda-item-agendado { - background-color: #f7f7c4; - border: 3px solid #f3ce67; - padding: 5px; - font-weight: bold; - border-radius: 10px; -} - -/* --- Estrutura Geral --- */ -.calendario { - border-collapse: collapse; - width: 100%; - border-radius: 10px; - overflow: hidden; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); - border: 1px solid #eee; - background-color: #ffffff; -} - -.calendario-ou-filaespera { - margin-top: 0; -} - -.container-btns-agenda-fila_esepera { - margin-top: 30px; - display: flex; - flex-direction: row; - gap: 20px; - margin-left: 20px; + background-color: #5980fd; + color: #fff; + border-color: #3a5ccc; } .btn-fila-espera, .btn-agenda { - background-color: transparent; - border: 0px; + background-color: #fff; + color: #212529; border-bottom: 3px solid transparent; - padding: 8px; - border-radius: 10px 10px 0px 0px; - font-weight: bold; - cursor: pointer; } .opc-filaespera-ativo, .opc-agenda-ativo { - color: white; background-color: #5980fd; -} \ No newline at end of file + color: #fff; +} + +#status-card-consulta-realizado, +.legenda-item-realizado { + background-color: #e6f9e6; + border: 3px solid #b7ffbd; + color: #2e4d2e; +} + +#status-card-consulta-cancelado, +.legenda-item-cancelado { + background-color: #ffe6ee; + border: 3px solid #ffb7cc; + color: #4d2e36; +} + +#status-card-consulta-confirmado, +.legenda-item-confirmado { + background-color: #e6f0fa; + border: 3px solid #eef8fb; + color: #2e3a4d; +} + +#status-card-consulta-agendado, +.legenda-item-agendado { + background-color: #f7f7c4; + border: 3px solid #f7f7c4; + color: #4d4d2e; +} + +/* Dark mode styles */ +html[data-bs-theme="dark"] { + background-color: #181a1b; + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .calendario { + background-color: #23272a; + border: 1px solid #333; + box-shadow: 0 4px 12px rgba(0,0,0,0.25); +} + +html[data-bs-theme="dark"] .busca-atendimento input { + background-color: #23272a; + color: #e0e0e0; + border: 1px solid #444; +} + +html[data-bs-theme="dark"] .busca-atendimento select { + background-color: #5980fd; + color: #fff; +} + +html[data-bs-theme="dark"] .btn-selecionar-tabeladia, +html[data-bs-theme="dark"] .btn-selecionar-tabelasemana, +html[data-bs-theme="dark"] .btn-selecionar-tabelames { + background-color: #23272a; + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .btn-selecionar-tabeladia.ativo, +html[data-bs-theme="dark"] .btn-selecionar-tabelasemana.ativo, +html[data-bs-theme="dark"] .btn-selecionar-tabelames.ativo { + background-color: #5980fd; + color: #fff; + border-color: #3a5ccc; +} + +html[data-bs-theme="dark"] .btn-fila-espera, +html[data-bs-theme="dark"] .btn-agenda { + background-color: #23272a; + color: #e0e0e0; + border-bottom: 3px solid transparent; +} + +html[data-bs-theme="dark"] .opc-filaespera-ativo, +html[data-bs-theme="dark"] .opc-agenda-ativo { + background-color: #5980fd; + color: #fff; +} + +html[data-bs-theme="dark"] #status-card-consulta-realizado, +html[data-bs-theme="dark"] .legenda-item-realizado { + background-color: #1e2e1e; + border: 3px solid #2e4d2e; + color: #b7ffbd; +} + +html[data-bs-theme="dark"] #status-card-consulta-cancelado, +html[data-bs-theme="dark"] .legenda-item-cancelado { + background-color: #2e1e23; + border: 3px solid #4d2e36; + color: #ffb7cc; +} + +html[data-bs-theme="dark"] #status-card-consulta-confirmado, +html[data-bs-theme="dark"] .legenda-item-confirmado { + background-color: #1e2327; + border: 3px solid #2e3a4d; + color: #eef8fb; +} + +html[data-bs-theme="dark"] #status-card-consulta-agendado, +html[data-bs-theme="dark"] .legenda-item-agendado { + background-color: #2e2e1e; + border: 3px solid #4d4d2e; + color: #f7f7c4; +} diff --git a/src/PagesMedico/styleMedico/FilaEspera.css b/src/PagesMedico/styleMedico/FilaEspera.css index e27086b..b3994ba 100644 --- a/src/PagesMedico/styleMedico/FilaEspera.css +++ b/src/PagesMedico/styleMedico/FilaEspera.css @@ -95,3 +95,54 @@ font-size: 1.5rem; text-align: center; } + +html[data-bs-theme="dark"] .fila-container { + background: #232326 !important; + box-shadow: 0 4px 12px rgba(0,0,0,0.5); + border: 10px solid #232326 !important; +} + +html[data-bs-theme="dark"] .fila-titulo { + color: #e0e0e0; + border-bottom: 2px solid #444; +} + +html[data-bs-theme="dark"] .fila-tabela { + color: #e0e0e0; + background: #232326; +} + +html[data-bs-theme="dark"] .fila-tabela th, +html[data-bs-theme="dark"] .fila-tabela td { + border-bottom: 1px solid #444; + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .fila-tabela th { + background-color: #2c2c31; +} + +html[data-bs-theme="dark"] .fila-tabela thead { + background-color: #232326; +} + +html[data-bs-theme="dark"] .fila-tabela tbody tr:nth-child(even) { + background-color: #28282c; +} +html[data-bs-theme="dark"] .fila-tabela tbody tr:nth-child(odd) { + background-color: #232326; +} + +html[data-bs-theme="dark"] .fila-tabela tbody tr:hover { + background-color: #31313a; +} + +html[data-bs-theme="dark"] .busca-fila-espera { + background: #232326; + color: #e0e0e0; + border: 1px solid #444; +} + +html[data-bs-theme="dark"] .busca-fila-espera:focus { + border-color: #888; +} \ No newline at end of file diff --git a/src/PagesMedico/styleMedico/chat.css b/src/PagesMedico/styleMedico/chat.css index 3f6042c..9010f80 100644 --- a/src/PagesMedico/styleMedico/chat.css +++ b/src/PagesMedico/styleMedico/chat.css @@ -296,3 +296,79 @@ max-width: 100%; } } + +html[data-bs-theme="dark"] .chat-app-container { + background-color: #121212 !important; + color: #e0e0e0 !important; +} + +html[data-bs-theme="dark"] .sidebar, +html[data-bs-theme="dark"] .chat-header, +html[data-bs-theme="dark"] .message-footer { + background-color: #1a1a1a !important; + border-color: #222 !important; +} + +html[data-bs-theme="dark"] .sidebar-header { + background-color: #1a1a1a !important; + border-bottom: 1px solid #222 !important; +} + +html[data-bs-theme="dark"] .search-input, +html[data-bs-theme="dark"] .message-input { + background-color: #232323 !important; + color: #e0e0e0 !important; + border-color: #333 !important; +} + +html[data-bs-theme="dark"] .search-input:focus, +html[data-bs-theme="dark"] .message-input:focus { + box-shadow: 0 0 0 2px #3B82F6 !important; +} + +html[data-bs-theme="dark"] .conversation-item { + background-color: transparent !important; + color: #e0e0e0 !important; +} + +html[data-bs-theme="dark"] .conversation-item:hover { + background-color: #232323 !important; +} + +html[data-bs-theme="dark"] .conversation-item.active { + background-color: #3B82F6 !important; + color: #fff !important; +} + +html[data-bs-theme="dark"] .timestamp, +html[data-bs-theme="dark"] .last-message { + color: #bdbdbd !important; +} + +html[data-bs-theme="dark"] .conversation-item.active .timestamp, +html[data-bs-theme="dark"] .conversation-item.active .last-message { + color: #e0e0e0 !important; +} + +html[data-bs-theme="dark"] .unread-badge { + background-color: #EF4444 !important; + color: #fff !important; +} + +html[data-bs-theme="dark"] .messages-body { + background-color: #181818 !important; +} + +html[data-bs-theme="dark"] .message-container.sent .message-bubble { + background-color: #2563EB !important; + color: #fff !important; +} + +html[data-bs-theme="dark"] .message-container.received .message-bubble { + background-color: #232323 !important; + color: #e0e0e0 !important; +} + +html[data-bs-theme="dark"] .no-conversation-selected { + color: #bdbdbd !important; +} \ No newline at end of file diff --git a/src/PagesMedico/styleMedico/geral.css b/src/PagesMedico/styleMedico/geral.css index 94918bd..2e86a44 100644 --- a/src/PagesMedico/styleMedico/geral.css +++ b/src/PagesMedico/styleMedico/geral.css @@ -186,4 +186,86 @@ tbody tr:hover { td { padding: 12px; border-bottom: 1px solid var(--cor-borda); +} + +html[data-bs-theme="dark"] { + --cor-primaria: #3a86ff; /* Azul principal */ + --cor-fundo: #121212; /* Fundo escuro */ + --cor-card: #1e1e1e; /* Card escuro */ + --cor-texto: #e0e0e0; /* Texto claro */ + --cor-borda: #333333; /* Bordas escuras */ + --sombra-card: 0 4px 12px rgba(0, 0, 0, 0.5); /* Sombra mais forte */ +} + +html[data-bs-theme="dark"] body { + background-color: var(--cor-fundo); + color: var(--cor-texto); +} + +html[data-bs-theme="dark"] h1 { + color: var(--cor-primaria); + border-bottom: 2px solid var(--cor-borda); +} + +html[data-bs-theme="dark"] h2 { + color: var(--cor-texto); + border-bottom: 1px solid var(--cor-borda); +} + +html[data-bs-theme="dark"] .prontuario-container, +html[data-bs-theme="dark"] .relatorios-container { + background-color: var(--cor-card); + border: 1px solid var(--cor-borda); + box-shadow: var(--sombra-card); +} + +html[data-bs-theme="dark"] .prontuario-section { + background-color: #232323; + border: 1px solid var(--cor-borda); +} + +html[data-bs-theme="dark"] .prontuario-section li { + border-bottom: 1px solid var(--cor-borda); +} + +html[data-bs-theme="dark"] .prontuario-section strong { + color: #b0b0b0; +} + +html[data-bs-theme="dark"] .filtros-container, +html[data-bs-theme="dark"] .info-text { + background-color: #232323; + border: 1px solid var(--cor-borda); + color: var(--cor-texto); +} + +html[data-bs-theme="dark"] .btn-gerar { + background-color: var(--cor-primaria); + color: #fff; +} + +html[data-bs-theme="dark"] .btn-gerar:hover { + background-color: #2656b8; +} + +html[data-bs-theme="dark"] table { + background-color: var(--cor-card); +} + +html[data-bs-theme="dark"] thead th { + background-color: var(--cor-primaria); + color: #fff; +} + +html[data-bs-theme="dark"] tbody tr:nth-child(even) { + background-color: #232323; +} + +html[data-bs-theme="dark"] tbody tr:hover { + background-color: #333; +} + +html[data-bs-theme="dark"] td { + border-bottom: 1px solid var(--cor-borda); + color: var(--cor-texto); } \ No newline at end of file diff --git a/src/assets/scss/_utilities.scss b/src/assets/scss/_utilities.scss index 8af2dc2..db12161 100644 --- a/src/assets/scss/_utilities.scss +++ b/src/assets/scss/_utilities.scss @@ -64,4 +64,36 @@ .icon-mid:before { vertical-align: middle; } // Z Index -.z-1 { z-index: 1 } \ No newline at end of file +.z-1 { z-index: 1 } + +// Utilities for Dark Mode +html[data-bs-theme="dark"] { + .bg-light { + background-color: #232323 !important; + color: #e0e0e0 !important; + } + .text-black { + color: #e0e0e0 !important; + } + .card { + background-color: #232323; + border-color: #333; + color: #e0e0e0; + } + .table { + color: #e0e0e0; + thead { + th { + border-bottom: 2px solid #333; + } + } + tbody { + tr { + border-bottom: 1px solid #333; + } + tr:hover { + background-color: #2c2c2c; + } + } + } +} \ No newline at end of file diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss index 45f7c8c..5c70ec4 100644 --- a/src/assets/scss/app.scss +++ b/src/assets/scss/app.scss @@ -19,3 +19,9 @@ body .bi::before, [class^=bi-]::before, [class*=" bi-"]::before { // Mazer CSS @import "./mazer"; + +@import './_variables.scss'; // Light variables + +@import './themes/dark/_variables-dark.scss'; // Dark variables +@import './themes/dark/_mazer-dark.scss'; // Dark theme overrides + diff --git a/src/assets/scss/components/_alert.scss b/src/assets/scss/components/_alert.scss index 4b7f38e..3837dbe 100644 --- a/src/assets/scss/components/_alert.scss +++ b/src/assets/scss/components/_alert.scss @@ -1,8 +1,7 @@ - .alert { border:none; - .alert-heading { - } + // .alert-heading { + // } p { margin-bottom: 0; } @@ -51,3 +50,10 @@ } } } +html[data-bs-theme="dark"] { + .alert { + background-color: #232323 !important; + color: #e0e0e0 !important; + border-color: #333 !important; + } +} diff --git a/src/assets/scss/components/_avatar.scss b/src/assets/scss/components/_avatar.scss index 16dd904..e386e98 100644 --- a/src/assets/scss/components/_avatar.scss +++ b/src/assets/scss/components/_avatar.scss @@ -89,4 +89,28 @@ font-size: 1.8rem; } } +} + +html[data-bs-theme="dark"] { + .avatar { + background-color: #232323; + color: #e0e0e0; + + .avatar-content { + color: #e0e0e0; + background-color: #232323; + svg, i { + color: #e0e0e0; + } + } + + img { + background-color: #232323; + } + + .avatar-status { + border-color: #232323; + background-color: #444; + } + } } \ No newline at end of file diff --git a/src/assets/scss/components/_badge.scss b/src/assets/scss/components/_badge.scss index 43ac910..4498e27 100644 --- a/src/assets/scss/components/_badge.scss +++ b/src/assets/scss/components/_badge.scss @@ -15,6 +15,13 @@ padding: 3px; } -a.badge:hover { +// a.badge:hover { +// } + +html[data-bs-theme="dark"] { + .badge { + background-color: #333 !important; + color: #e0e0e0 !important; + } } \ No newline at end of file diff --git a/src/assets/scss/components/_breadcrumb.scss b/src/assets/scss/components/_breadcrumb.scss index 0cfcbb4..06dbdb6 100644 --- a/src/assets/scss/components/_breadcrumb.scss +++ b/src/assets/scss/components/_breadcrumb.scss @@ -7,4 +7,12 @@ justify-content: center; margin-top: $breadcrumb-margin-top; } +} + +html[data-bs-theme="dark"] { + .breadcrumb { + background-color: #232323 !important; + color: #e0e0e0 !important; + // Add more styles as needed for dark mode + } } \ No newline at end of file diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss index 89f3814..24f442b 100644 --- a/src/assets/scss/components/_buttons.scss +++ b/src/assets/scss/components/_buttons.scss @@ -60,3 +60,21 @@ margin: 0 10px 10px 0; } } + +html[data-bs-theme="dark"] { + .btn { + background-color: #232323 !important; + color: #e0e0e0 !important; + border-color: #333 !important; + } + .btn-primary { + background-color: #1976d2 !important; + color: #fff !important; + border-color: #1565c0 !important; + } + .btn-light { + background-color: #333 !important; + color: #e0e0e0 !important; + border-color: #444 !important; + } +} diff --git a/src/assets/scss/components/_card.scss b/src/assets/scss/components/_card.scss index 2372c49..75ca11a 100644 --- a/src/assets/scss/components/_card.scss +++ b/src/assets/scss/components/_card.scss @@ -130,3 +130,86 @@ } } } + +html[data-bs-theme="dark"] { + .card { + background-color: #232323 !important; + color: #e0e0e0 !important; + border-color: #333 !important; + + &.card-statistic { + box-shadow: 1px 2px 5px rgba(#2FAAF4, .3); + background: linear-gradient(to bottom, #1a1a1a, #232323); + .card-title { + color: rgba(255, 255, 255, 0.8); + } + .card-right { + p { + color: #fff; + } + span.green { + color: #6fff6f; + } + span.red { + color: #ff7979; + } + } + } + + .card-header { + background-color: #232323 !important; + color: #e0e0e0 !important; + border-color: #333 !important; + } + .card-body { + background-color: #232323 !important; + color: #e0e0e0 !important; + } + .card-content { + background-color: #232323 !important; + } + .card-heading { + color: #e0e0e0 !important; + } + .card-img-overlay { + background-color: rgba(0,0,0,.7); + p { + color: #ccc; + } + .card-title { + color: #fff; + } + } + } + + .pricing { + .card { + background-color: #232323 !important; + color: #e0e0e0 !important; + border-color: #333 !important; + box-shadow: 0 10px 10px #222; + } + .card-header { + background-color: #232323 !important; + color: #e0e0e0 !important; + } + .card-highlighted { + background-color: #1a1a1a !important; + .card-header, .card-body, .card-footer { + background-color: #1a1a1a !important; + color: #fff !important; + } + ul { + li { + i, svg { + color: $teal-400; + } + color: #fff; + } + } + .card-title { + color: #fff !important; + } + } + } +} diff --git a/src/assets/scss/components/_carousel.scss b/src/assets/scss/components/_carousel.scss index b1b24a9..b0c3950 100644 --- a/src/assets/scss/components/_carousel.scss +++ b/src/assets/scss/components/_carousel.scss @@ -3,4 +3,15 @@ } .carousel-caption h5 { color: $carousel-caption-color +} + +html[data-bs-theme="dark"] { + .carousel-inner { + background-color: #232323 !important; + color: #e0e0e0 !important; + border-color: #333 !important; + } + .carousel-caption h5 { + color: #e0e0e0 !important; + } } \ No newline at end of file diff --git a/src/assets/scss/components/_comment.scss b/src/assets/scss/components/_comment.scss index fe917f7..4d7cce9 100644 --- a/src/assets/scss/components/_comment.scss +++ b/src/assets/scss/components/_comment.scss @@ -50,8 +50,26 @@ // Dark theme html[data-bs-theme="dark"] .comment { border: 1px solid #404053 !important; + background-color: #232336 !important; + color: #e0e0f0 !important; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); + + &-header { + .avatar-content { + background-color: #404053; + } + } + + &-body { + // Optional: adjust text color if needed + color: #e0e0f0; + } &-time { - color:#6a9cd2 !important; + color: #6a9cd2 !important; } + + // &-actions { + // // Optional: adjust button/link color if needed + // } } \ No newline at end of file diff --git a/src/assets/scss/components/_divider.scss b/src/assets/scss/components/_divider.scss index 1945b8e..81e957e 100644 --- a/src/assets/scss/components/_divider.scss +++ b/src/assets/scss/components/_divider.scss @@ -34,4 +34,16 @@ &.divider-right .divider-text { float: right; } +} + +html[data-bs-theme="dark"] { + .divider { + .divider-text { + background-color: #232323 !important; + color: #e0e0e0 !important; + &:before, &:after { + border-top-color: #333 !important; + } + } + } } \ No newline at end of file diff --git a/src/assets/scss/components/_dropdowns.scss b/src/assets/scss/components/_dropdowns.scss index 35aa210..9dd447d 100644 --- a/src/assets/scss/components/_dropdowns.scss +++ b/src/assets/scss/components/_dropdowns.scss @@ -23,4 +23,18 @@ left: 50%; transform: translateX(-50%) } +} +html[data-bs-theme="dark"] { + .dropdown-menu { + background-color: #232323 !important; + color: #e0e0e0 !important; + border-color: #333 !important; + } + .dropdown-item { + color: #e0e0e0 !important; + } + .dropdown-item:hover, .dropdown-item:focus { + background-color: #333 !important; + color: #fff !important; + } } \ No newline at end of file diff --git a/src/assets/scss/components/_forms.scss b/src/assets/scss/components/_forms.scss index 8336151..aacd339 100644 --- a/src/assets/scss/components/_forms.scss +++ b/src/assets/scss/components/_forms.scss @@ -245,3 +245,29 @@ $choices-highlight-bg: #e9ecef; .choices__list--dropdown .choices__item--selectable.is-highlighted { background-color: $choices-highlight-bg; } + +html[data-bs-theme="dark"] { + .form-control { + background-color: #232323 !important; + color: #e0e0e0 !important; + border-color: #333 !important; + } + .form-label { + color: #e0e0e0 !important; + } +} + +html[data-bs-theme="dark"] .form-select, +html[data-bs-theme="dark"] .form-control { + background-color: #232323 !important; + color: #e0e0e0 !important; + border-color: #333 !important; +} + +html[data-bs-theme="dark"] .form-select:focus, +html[data-bs-theme="dark"] .form-control:focus { + background-color: #232323 !important; + color: #e0e0e0 !important; + border-color: #1976d2 !important; + box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25) !important; +} diff --git a/src/assets/scss/components/_icons.scss b/src/assets/scss/components/_icons.scss index d165964..5ccd619 100644 --- a/src/assets/scss/components/_icons.scss +++ b/src/assets/scss/components/_icons.scss @@ -45,4 +45,25 @@ .burger-btn { display:none; +} + +html[data-bs-theme="dark"] { + .stats-icon { + background-color: #333 !important; + i { + color: #e0e0e0 !important; + } + &.purple { + background-color: #6c63ff !important; + } + &.blue { + background-color: #379ecb !important; + } + &.red { + background-color: #d9534f !important; + } + &.green { + background-color: #3bb78f !important; + } + } } \ No newline at end of file diff --git a/src/assets/scss/components/_modal.scss b/src/assets/scss/components/_modal.scss index 873a619..fe581d5 100644 --- a/src/assets/scss/components/_modal.scss +++ b/src/assets/scss/components/_modal.scss @@ -43,4 +43,12 @@ border-top: 0; } } +} + +html[data-bs-theme="dark"] { + .modal-content { + background-color: #232323 !important; + color: #e0e0e0 !important; + border-color: #333 !important; + } } \ No newline at end of file diff --git a/src/assets/scss/components/_navbar.scss b/src/assets/scss/components/_navbar.scss index 125f102..79b083b 100644 --- a/src/assets/scss/components/_navbar.scss +++ b/src/assets/scss/components/_navbar.scss @@ -298,4 +298,15 @@ } #topbarUserDropdown:after { margin-left: 1rem; +} + +html[data-bs-theme="dark"] { + .navbar { + background-color: #181818 !important; + color: #e0e0e0 !important; + border-color: #333 !important; + } + .navbar-brand, .navbar-nav .nav-link { + color: #e0e0e0 !important; + } } \ No newline at end of file diff --git a/src/assets/scss/components/_navs.scss b/src/assets/scss/components/_navs.scss index 4fac2cf..369f1ad 100644 --- a/src/assets/scss/components/_navs.scss +++ b/src/assets/scss/components/_navs.scss @@ -29,4 +29,33 @@ box-shadow: 0 2px 5px rgba(map-get($theme-colors, 'primary'),.5); } } +} + +html[data-bs-theme="dark"] { + .nav-tabs { + .nav-link { + background-color: #232323 !important; + color: #e0e0e0 !important; + border-color: #333 !important; + &:hover { + text-shadow: 0 0 2px rgba(map-get($theme-colors, 'primary'), .5); + } + } + .nav-link.active { + background-color: #1976d2 !important; + color: #fff !important; + border-color: #1565c0 !important; + &:after { + background-color: #fff; + box-shadow: 0 2px 5px rgba(#fff, .3); + } + } + } + .nav-pills { + .nav-link.active { + box-shadow: 0 2px 10px rgba(#1976d2, .5); + background-color: #1976d2 !important; + color: #fff !important; + } + } } \ No newline at end of file diff --git a/src/assets/scss/components/_pagination.scss b/src/assets/scss/components/_pagination.scss index b760188..e3d512a 100644 --- a/src/assets/scss/components/_pagination.scss +++ b/src/assets/scss/components/_pagination.scss @@ -36,4 +36,16 @@ &:last-child { margin-left: .4rem; } +} +html[data-bs-theme="dark"] { + .pagination .page-link { + background-color: #232323 !important; + color: #e0e0e0 !important; + border-color: #333 !important; + } + .pagination .page-item.active .page-link { + background-color: #1976d2 !important; + color: #fff !important; + border-color: #1565c0 !important; + } } \ No newline at end of file diff --git a/src/assets/scss/components/_placeholders.scss b/src/assets/scss/components/_placeholders.scss index bceb95e..9e5c84d 100644 --- a/src/assets/scss/components/_placeholders.scss +++ b/src/assets/scss/components/_placeholders.scss @@ -54,3 +54,18 @@ mask-position: -200% 0%; } } + +html[data-bs-theme="dark"] { + .placeholder { + background-color: #232323 !important; + color: #e0e0e0 !important; + } + .placeholder-wave { + mask-image: linear-gradient( + 130deg, + #232323 55%, + rgba(35, 35, 35, (1 - $placeholder-opacity-min)) 75%, + #232323 95% + ); + } +} \ No newline at end of file diff --git a/src/assets/scss/components/_progress.scss b/src/assets/scss/components/_progress.scss index f7f4feb..135bb85 100644 --- a/src/assets/scss/components/_progress.scss +++ b/src/assets/scss/components/_progress.scss @@ -29,4 +29,20 @@ } } +} + +html[data-bs-theme="dark"] { + .progress { + background-color: #232323 !important; + + .progress-bar { + color: #e0e0e0 !important; + // Optionally adjust background for bars if needed + // background-color: darken($value, 10%) !important; + } + + .progress-bar.progress-label:before { + color: #e0e0e0 !important; + } + } } \ No newline at end of file diff --git a/src/assets/scss/components/_sidebar.scss b/src/assets/scss/components/_sidebar.scss index 52c42df..e809752 100644 --- a/src/assets/scss/components/_sidebar.scss +++ b/src/assets/scss/components/_sidebar.scss @@ -216,4 +216,52 @@ to { max-height: 0; } +} + +html[data-bs-theme="dark"] { + .sidebar-wrapper { + background-color: #181818 !important; + color: #e0e0e0 !important; + border-color: #333 !important; + .sidebar-header { + color: #e0e0e0 !important; + } + .menu { + .sidebar-title { + color: #b0b0b0 !important; + } + .sidebar-link { + color: #e0e0e0 !important; + &:hover { + background-color: #222 !important; + } + svg, i { + color: #b0b0b0 !important; + } + } + .sidebar-item.active > .sidebar-link { + background-color: #333 !important; + span { + color: #fff !important; + } + svg, i { + color: #fff !important; + } + } + .submenu { + .submenu-item a { + color: #b0b0b0 !important; + &:hover { + color: #fff !important; + } + } + .submenu-item.active > a { + color: #fff !important; + } + } + } + } + .sidebar-backdrop { + background-color: rgba(0, 0, 0, 0.7) !important; + } } \ No newline at end of file diff --git a/src/assets/scss/components/_table.scss b/src/assets/scss/components/_table.scss index 7bb5a0b..10b4f5f 100644 --- a/src/assets/scss/components/_table.scss +++ b/src/assets/scss/components/_table.scss @@ -64,4 +64,42 @@ } .dataTables_length { margin-bottom: .5rem; +} + +html[data-bs-theme="dark"] { + .table { + background-color: #232323 !important; + color: #e0e0e0 !important; + border-color: #333 !important; + } + .table th, .table td { + border-color: #333 !important; + } + .table thead th { + border-bottom: 1px solid #444 !important; + } + .table-bordered { + border: 1px solid #333 !important; + } + .table-striped tbody tr:nth-of-type(odd) { + background-color: #2a2a2a !important; + } + .table-hover tbody tr:hover { + background-color: #3a3a3a !important; + } + .dataTable-table { + background-color: #232323 !important; + color: #e0e0e0 !important; + border-color: #333 !important; + thead, tbody, tfoot { + tr { + th, td { + border-color: #333 !important; + } + } + } + thead tr th { + border-bottom: 1px solid #444 !important; + } + } } \ No newline at end of file diff --git a/src/assets/scss/pages/auth.scss b/src/assets/scss/pages/auth.scss index 243c79e..7e20eb2 100644 --- a/src/assets/scss/pages/auth.scss +++ b/src/assets/scss/pages/auth.scss @@ -44,7 +44,20 @@ body { html[data-bs-theme="dark"] { @import "../themes/dark/variables-dark"; + body { + background-color: var(--bs-body-bg-dark); + } + #auth-right { - background: url(../../static/images/bg/4853433.png), $page-auth-right-bg; + background: url(../../static/images/bg/4853433.png), $page-auth-right-bg-dark; + } + + #auth-left { + .auth-title { + color: var(--bs-body-color-dark); + } + .auth-subtitle { + color: #cfd4e3; + } } } diff --git a/src/assets/scss/pages/chat.scss b/src/assets/scss/pages/chat.scss index 6f6c8ba..4cfa653 100644 --- a/src/assets/scss/pages/chat.scss +++ b/src/assets/scss/pages/chat.scss @@ -8,9 +8,9 @@ } } .chat-app { - .chat-app-wrapper { + // .chat-app-wrapper { - } + // } .chat-app-right { padding-left: 0; } @@ -18,9 +18,9 @@ .person-name { font-size: 1.2rem; } - .person-status { + // .person-status { - } + // } } .chat-app-body { .left { diff --git a/src/assets/scss/pages/datatables.scss b/src/assets/scss/pages/datatables.scss index a37c36e..2297371 100644 --- a/src/assets/scss/pages/datatables.scss +++ b/src/assets/scss/pages/datatables.scss @@ -15,4 +15,46 @@ table.dataTable td { } div.dataTables_wrapper div.dataTables_info { padding-top: .4em +} + +html[data-bs-theme="dark"] { + table.dataTable { + color: #e0e0e0 !important; + background-color: #232323 !important; + } + table.dataTable th { + color: #e0e0e0 !important; + background-color: #232323 !important; + } + table.dataTable td { + color: #e0e0e0 !important; + background-color: #232323 !important; + } + .dataTables_wrapper .dataTables_paginate .paginate_button { + color: #e0e0e0 !important; + background-color: #232323 !important; + border: 1px solid #333 !important; + } + .dataTables_wrapper .dataTables_paginate .paginate_button.current, + .dataTables_wrapper .dataTables_paginate .paginate_button:hover { + background-color: #5A8DEE !important; + color: white !important; + border: none !important; + } + .dataTables_wrapper .dataTables_filter input { + background-color: #232323 !important; + color: #e0e0e0 !important; + border: 1px solid #333 !important; + } + .dataTables_wrapper .dataTables_length select { + background-color: #232323 !important; + color: #e0e0e0 !important; + border: 1px solid #333 !important; + } + .dataTables_wrapper .dataTables_info { + color: #e0e0e0 !important; + } + .dataTables_wrapper .dataTables_filter label { + color: #e0e0e0 !important; + } } \ No newline at end of file diff --git a/src/assets/scss/pages/dripicons.scss b/src/assets/scss/pages/dripicons.scss index d7bdaf5..b873fc4 100644 --- a/src/assets/scss/pages/dripicons.scss +++ b/src/assets/scss/pages/dripicons.scss @@ -17,4 +17,4 @@ .glyphs.css-mapping .icon{margin:0;margin-right:10px;padding:13px;height:50px;width:50px;color:#398FF7 !important;overflow:hidden;float:left;font-size:24px} .glyphs.css-mapping input{background:none;color:#398FF7;margin:0;margin-top:5px;padding:8px;line-height:14px;font-size:14px;font-family:'Montserrat','Helvetica','Arial',sans-serif;font-weight:700;display:block;width:120px;height:40px;border:none;-webkit-border-radius:5px;border-radius:5px;outline:none;float:right;} .glyphs.css-mapping input:focus{border:none;} -.glyphs.css-mapping input:hover{} \ No newline at end of file +// .glyphs.css-mapping input:hover{} \ No newline at end of file diff --git a/src/assets/scss/pages/email.scss b/src/assets/scss/pages/email.scss index cd81a6f..48db582 100644 --- a/src/assets/scss/pages/email.scss +++ b/src/assets/scss/pages/email.scss @@ -599,9 +599,6 @@ html[data-bs-theme="dark"] { } } - - - .action-icon, .action-button, .form-control { diff --git a/src/assets/scss/pages/form-element-select.scss b/src/assets/scss/pages/form-element-select.scss index 98b883e..68939ab 100644 --- a/src/assets/scss/pages/form-element-select.scss +++ b/src/assets/scss/pages/form-element-select.scss @@ -1,7 +1,7 @@ - .choices__list--multiple .choices__item { border-radius: 2px; background-color: #5A8DEE; box-shadow: 0 2px 5px rgb(2 158 255 / 10%); border: none; } + diff --git a/src/assets/scss/themes/dark/_mazer-dark.scss b/src/assets/scss/themes/dark/_mazer-dark.scss index dafa7e1..4914421 100644 --- a/src/assets/scss/themes/dark/_mazer-dark.scss +++ b/src/assets/scss/themes/dark/_mazer-dark.scss @@ -1,3 +1,5 @@ +html[data-bs-theme="dark"] { + .toast .btn-close { background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; } @@ -83,3 +85,4 @@ } } } +} \ No newline at end of file diff --git a/src/assets/scss/widgets/todo.scss b/src/assets/scss/widgets/todo.scss index fc12c4c..ff88b2a 100644 --- a/src/assets/scss/widgets/todo.scss +++ b/src/assets/scss/widgets/todo.scss @@ -10,7 +10,7 @@ min-width: 400px; } -[data-bs-theme="dark"] .widget-todo-item:hover { +.widget-todo-item:hover { background-color: $gray-900; } .widget-todo-title-wrapper { @@ -39,4 +39,19 @@ cursor: move; height: 1rem } +} + +html[data-bs-theme="dark"] .widget-todo-item:hover { + background-color: $gray-800; +} +html[data-bs-theme="dark"] .widget-todo-item { + background-color: $gray-900; + color: $gray-100; + + &:hover { + background-color: $gray-800; + } +} +html[data-bs-theme="dark"] .widget-todo-title-area svg { + fill: $gray-100; } \ No newline at end of file diff --git a/src/assets/static/js/components/dark.js b/src/assets/static/js/components/dark.js index ab2d5e2..e3f1b3f 100644 --- a/src/assets/static/js/components/dark.js +++ b/src/assets/static/js/components/dark.js @@ -1,7 +1,6 @@ - const THEME_KEY = "theme" -function toggleDarkTheme() { +export function toggleDarkTheme() { setTheme( document.documentElement.getAttribute("data-bs-theme") === 'dark' ? "light" @@ -14,7 +13,7 @@ function toggleDarkTheme() { * @param {"dark"|"light"} theme * @param {boolean} persist */ -function setTheme(theme, persist = false) { +export function setTheme(theme, persist = false) { document.body.classList.add(theme) document.documentElement.setAttribute('data-bs-theme', theme) @@ -26,7 +25,7 @@ function setTheme(theme, persist = false) { /** * Init theme from setTheme() */ -function initTheme() { +export function initTheme() { //If the user manually set a theme, we'll load that const storedTheme = localStorage.getItem(THEME_KEY) if (storedTheme) { diff --git a/src/components/AgendarConsulta/style/formagendamentos.css b/src/components/AgendarConsulta/style/formagendamentos.css index 4c3fe80..f9ca9d7 100644 --- a/src/components/AgendarConsulta/style/formagendamentos.css +++ b/src/components/AgendarConsulta/style/formagendamentos.css @@ -15,7 +15,6 @@ color: white; } - .icons-div{ border: 1px solid #607080; padding: 10px; @@ -220,4 +219,88 @@ select[name=solicitante]{ box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 10px solid #ffffff; box-sizing: border-box; +} + +html[data-bs-theme="dark"] .form-container { + background: #232323 !important; + color: #e0e0e0 !important; + border: 1px solid #404053 !important; +} + +html[data-bs-theme="dark"] .form-title, +html[data-bs-theme="dark"] .section-title { + color: #90cdf4 !important; +} + +html[data-bs-theme="dark"] .section-subtitle { + color: #b0b7c3 !important; +} + +html[data-bs-theme="dark"] .form-agendamento label { + color: #e0e0e0 !important; +} + +html[data-bs-theme="dark"] .form-agendamento input, +html[data-bs-theme="dark"] .form-agendamento select, +html[data-bs-theme="dark"] .form-agendamento textarea { + background: #181818 !important; + color: #e0e0e0 !important; + border: 1px solid #404053 !important; +} + +html[data-bs-theme="dark"] .btn-group button { + background: #232323 !important; + color: #e0e0e0 !important; + border: 1px solid #404053 !important; +} + +html[data-bs-theme="dark"] .btn-group button:hover { + background: #404053 !important; +} + +html[data-bs-theme="dark"] .btn-primary { + background: #2563eb !important; + color: #fff !important; +} + +html[data-bs-theme="dark"] .btn-primary:hover { + background: #1e40af !important; +} + +html[data-bs-theme="dark"] .btn-cancel { + background: #404053 !important; + color: #e0e0e0 !important; +} + +html[data-bs-theme="dark"] .btn-cancel:hover { + background: #232323 !important; +} + +html[data-bs-theme="dark"] .btn-secondary { + background: #374151 !important; + color: #e0e0e0 !important; + border: 1px solid #404053 !important; +} + +html[data-bs-theme="dark"] .btn-secondary:hover { + background: #232323 !important; +} + +html[data-bs-theme="dark"] .icons-div { + border: 1px solid #404053 !important; + background: #232323 !important; +} + +html[data-bs-theme="dark"] .icons-div:hover { + background: #2563eb !important; +} + +html[data-bs-theme="dark"] .icons-div:hover svg, +html[data-bs-theme="dark"] .icons-div:hover .icon { + color: #fff !important; +} + +html[data-bs-theme="dark"] .icon, +html[data-bs-theme="dark"] svg { + color: #e0e0e0 !important; } \ No newline at end of file diff --git a/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css b/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css index 3a1dc16..6228433 100644 --- a/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css +++ b/src/components/AgendarConsulta/style/styleTabelas/tabeladia.css @@ -69,3 +69,49 @@ font-weight: 600; align-items: flex-start; height: 70px; } + +html[data-bs-theme="dark"] .tabeladiaria { + border: 4px solid #333; + box-shadow: 0 4px 12px rgba(0,0,0,0.5); + background-color: #232323; +} + +html[data-bs-theme="dark"] .tabeladiaria th, +html[data-bs-theme="dark"] .tabeladiaria td { + border: 1px solid #333; + color: #e0e0e0; + background-color: #232323; +} + +html[data-bs-theme="dark"] .tabeladiaria thead th { + background-color: #222e3c; + color: #aee2ff; + border-bottom: 2px solid #333; +} + +html[data-bs-theme="dark"] .tabeladiaria tbody tr:nth-child(even) { + background-color: #232a34; +} + +html[data-bs-theme="dark"] .tabeladiaria tbody tr:hover, +html[data-bs-theme="dark"] .tabeladiaria tbody tr:hover td { + background-color: #2c3642 !important; +} + +html[data-bs-theme="dark"] .tabeladiaria .cardconsulta { + background-color: #232323; + color: #e0e0e0; + box-shadow: 0 1px 3px rgba(0,0,0,0.3); + border-left: 5px solid #333; +} + +html[data-bs-theme="dark"] .container-cardconsulta-dia { + background-color: transparent; +} + +html[data-bs-theme="dark"] .mostrar-horario td, +html[data-bs-theme="dark"] .mostrar-horario th { + border: 1px solid #333; + color: #e0e0e0; + background-color: #232323; +} \ No newline at end of file diff --git a/src/components/AgendarConsulta/style/styleTabelas/tabelames.css b/src/components/AgendarConsulta/style/styleTabelas/tabelames.css index fbce17b..5fbe05c 100644 --- a/src/components/AgendarConsulta/style/styleTabelas/tabelames.css +++ b/src/components/AgendarConsulta/style/styleTabelas/tabelames.css @@ -106,9 +106,6 @@ border-left: 5px solid transparent; /* espaço da borda colorida */ } - - - .usuario-azul { background-color: #E3F2FD; border-left: 4px solid #2196F3; @@ -153,4 +150,73 @@ color: #005a9e; font-weight: bold; font-size: larger; +} + +html[data-bs-theme="dark"] .tabelamensal { + border: 4px solid #333; + box-shadow: 0 4px 12px rgba(0,0,0,0.5); + background-color: #232323; +} + +html[data-bs-theme="dark"] .tabelamensal th, +html[data-bs-theme="dark"] .tabelamensal thead th { + background-color: #222e3c; + color: #aee2ff; + border-bottom: 2px solid #333; +} + +html[data-bs-theme="dark"] .tabelamensal td { + background-color: #232323; + color: #e0e0e0; + border: 1px solid #333; +} + +html[data-bs-theme="dark"] .tabelamensal tbody tr:nth-child(even) { + background-color: #232a34; +} + +html[data-bs-theme="dark"] .tabelamensal tbody tr:hover, +html[data-bs-theme="dark"] .tabelamensal td:hover { + background-color: #2c3642 !important; +} + +html[data-bs-theme="dark"] .tabelamensal .cardconsulta { + background-color: #232323; + color: #e0e0e0; + box-shadow: 0 1px 3px rgba(0,0,0,0.3); + border-left: 5px solid #333; +} + +html[data-bs-theme="dark"] .usuario-azul { + background-color: #1565c0; + border-left: 4px solid #2196F3; + color: #e3f2fd; +} + +html[data-bs-theme="dark"] .usuario-verde { + background-color: #388e3c; + border-left: 4px solid #4CAF50; + color: #e8f5e9; +} + +html[data-bs-theme="dark"] .usuario-roxo { + background-color: #6a1b9a; + border-left: 4px solid #9C27B0; + color: #f3e5f5; +} + +html[data-bs-theme="dark"] .usuario-laranja { + background-color: #f57c00; + border-left: 4px solid #FF9800; + color: #fff3e0; +} + +html[data-bs-theme="dark"] .usuario-default { + background-color: #424242; + border-left: 4px solid #BDBDBD; + color: #fafafa; +} + +html[data-bs-theme="dark"] .cards-que-faltam { + color: #90caf9; } \ No newline at end of file diff --git a/src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css b/src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css index d5b9146..fbedcf1 100644 --- a/src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css +++ b/src/components/AgendarConsulta/style/styleTabelas/tabelasemana.css @@ -25,7 +25,6 @@ border-bottom: 2px solid #005a9e; } - /* Remover bordas laterais do cabeçalho (se quiser) */ .tabelasemanal thead th:first-child { border-left: none; @@ -71,4 +70,44 @@ tr{ width: 1000px; +} + +html[data-bs-theme="dark"] .tabelasemanal { + border: 4px solid #333; + box-shadow: 0 4px 12px rgba(0,0,0,0.5); + background-color: #232323 !important; +} + +html[data-bs-theme="dark"] .tabelasemanal th, +html[data-bs-theme="dark"] .tabelasemanal td { + border: 1px solid #333; + color: #e0e0e0; + background-color: #232323; +} + +html[data-bs-theme="dark"] .tabelasemanal thead th, +html[data-bs-theme="dark"] .tabelasemanal thead td { + background-color: #222e3c; + color: #aee2ff; + border-bottom: 2px solid #333; +} + +html[data-bs-theme="dark"] .tabelasemanal tbody tr:nth-child(even) { + background-color: #232a34 +} + +html[data-bs-theme="dark"] .tabelasemanal tbody tr:nth-child(odd) { + background-color: #232323 +} + +html[data-bs-theme="dark"] .tabelasemanal tbody tr:hover, +html[data-bs-theme="dark"] .tabelasemanal tbody tr:hover td { + background-color: #2c3642 !important; +} + +html[data-bs-theme="dark"] .tabelasemanal .cardconsulta { + background-color: #232323; + color: #e0e0e0; + box-shadow: 0 1px 3px rgba(0,0,0,0.3); + border-left: 5px solid #333; } \ No newline at end of file diff --git a/src/components/botaoacessibilidade.css b/src/components/botaoacessibilidade.css index 4fc533f..7046e09 100644 --- a/src/components/botaoacessibilidade.css +++ b/src/components/botaoacessibilidade.css @@ -12,6 +12,7 @@ display: flex; flex-direction: column; align-items: center; + pointer-events: none; /* Impede cliques no contêiner */ } .botao-flutuante-acessibilidade { @@ -30,6 +31,7 @@ align-items: center; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease; margin-top: 15px; /* Distância do menu */ + pointer-events: auto; /* Permite que o botão seja clicável */ } .botao-flutuante-acessibilidade:hover { @@ -53,6 +55,7 @@ opacity: 0; visibility: hidden; transition: all 0.2s ease; + pointer-events: auto; /* Permite que o menu seja clicável */ } .menu-opcoes.aberto { @@ -196,3 +199,74 @@ text-align: center; transition: color 0.2s ease; } + +/* Dark mode styles */ +html[data-bs-theme="dark"] { + + /* Floating button */ + .botao-flutuante-acessibilidade { + background: linear-gradient(45deg, #212529, #343a40); + color: #f8f9fa; + box-shadow: 0 5px 15px rgba(33, 37, 41, 0.4); + } + .botao-flutuante-acessibilidade:hover { + box-shadow: 0 8px 20px rgba(33, 37, 41, 0.5); + } + + /* Menu balloon */ + .menu-opcoes { + background-color: #23272b; + border: 1px solid #343a40; + box-shadow: 0 8px 25px rgba(0,0,0,0.4); + } + .menu-titulo { + color: #adb5bd; + border-bottom: 1px solid #343a40; + } + + /* Menu buttons and checkbox */ + .menu-opcoes button, + .checkbox-label-button { + color: #f8f9fa; + } + .menu-opcoes button:hover, + .checkbox-label-button:hover { + background-color: #343a40; + } + + /* Checkbox switch */ + .checkbox-label-button input[type="checkbox"] { + background-color: #495057; + } + .checkbox-label-button input[type="checkbox"]:checked { + background-color: #0d6efd; + } + .checkbox-label-button input[type="checkbox"]::before { + background-color: #f8f9fa; + } + + /* Font size control */ + .font-size-control { + color: #f8f9fa; + border-top: 1px solid #343a40; + } + .font-size-label { + color: #f8f9fa; + } + .font-size-buttons button { + background-color: #343a40; + color: #f8f9fa; + border: 1px solid #495057; + } + .font-size-buttons button:hover { + background-color: #495057; + } + .font-size-buttons button:disabled { + background-color: #23272b; + color: #6c757d; + border-color: #343a40; + } + .font-size-display { + color: #f8f9fa; + } +} diff --git a/src/components/botaoacessibilidade.jsx b/src/components/botaoacessibilidade.jsx index 2ea8936..02a564d 100644 --- a/src/components/botaoacessibilidade.jsx +++ b/src/components/botaoacessibilidade.jsx @@ -1,5 +1,6 @@ import React, { useState, useEffect, useRef } from 'react'; import './botaoacessibilidade.css'; // Importando o CSS +import { setTheme } from '../assets/static/js/components/dark'; function BotaoAcessibilidade() { const [isMenuOpen, setIsMenuOpen] = useState(false); @@ -7,6 +8,10 @@ function BotaoAcessibilidade() { const [isDarkMode, setIsDarkMode] = useState(false); const lastSpokenTargetRef = useRef(null); + useEffect(() => { + setTheme(isDarkMode ? "dark" : "light", true); + }, [isDarkMode]); + useEffect(() => { if (!isReadOnHoverActive) { window.speechSynthesis.cancel(); diff --git a/src/pages/LaudoManager.jsx b/src/pages/LaudoManager.jsx index 83b0680..8276a9c 100644 --- a/src/pages/LaudoManager.jsx +++ b/src/pages/LaudoManager.jsx @@ -1,40 +1,6 @@ // src/pages/LaudoManager.jsx import React, { useState, useEffect } from "react"; - -/* ===== Estilos embutidos ===== */ -/* Eu coloquei os estilos aqui para simplificar a edição. */ -const styles = ` -.laudo-wrap { display:flex; gap:24px; padding:18px; font-family: Inter, Roboto, Arial, sans-serif; } -.left-col { width: 100%; max-width: 1160px; background:#ffffff; border-radius:8px; padding:18px; box-shadow: 0 1px 0 rgba(0,0,0,0.03); } /* <-- fundo branco */ -.title-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; } -.page-title { font-size:20px; color:#2b4a78; font-weight:700; } -.laudo-row { display:flex; padding:14px 12px; align-items:center; border-bottom:1px solid #eef3f8; position:relative; overflow:visible; background: transparent; } -.col { flex:1; padding:0 8px; font-size:14px; color:#2e3a4b; } -.col.small { flex:0 0 90px; text-align:right; } -.row-actions { position:relative; flex: 0 0 88px; display:flex; justify-content:flex-end; } -.action-btn { background:transparent; border:1px solid #d7e6fb; border-radius:8px; height:40px; width:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; } -.dropdown { position:absolute; right:0; top:48px; background:white; border-radius:8px; box-shadow: 0 10px 30px rgba(20,30,50,0.12); min-width:220px; padding:8px 0; z-index:9999; } -.dropdown .item { padding:12px 18px; cursor:pointer; font-size:15px; color:#244056; } -.dropdown .item:hover { background:#f6fbff; } -.viewer-modal, .preview-modal, .confirm-modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:12000; pointer-events:none; } /* deixar pointer-events none para que não bloqueie por padrão */ -.modal-backdrop { position:absolute; inset:0; background: rgba(9,20,40,0.45); pointer-events:auto; } /* usado apenas quando necessário */ -.modal-card { position:relative; width:92%; max-width:1100px; background:white; border-radius:10px; padding:18px; box-shadow: 0 10px 60px rgba(10,20,40,0.25); max-height:88vh; overflow:auto; pointer-events:auto; } -.viewer-header { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px; } -.patient-info { font-size:13px; color:#3a556b; } -.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; } -.tool-btn { padding:8px 10px; border-radius:6px; border:1px solid #e6eef8; cursor:pointer; background:#fff; font-size:13px; } -.editor-area { border:1px solid #e6eef8; border-radius:8px; padding:14px; min-height:360px; background: #fff; color:#1f2d3d; font-size:15px; line-height:1.5; } -.footer-controls { display:flex; justify-content:space-between; align-items:center; margin-top:12px; } -.toggle { display:flex; align-items:center; gap:8px; } -.btn { padding:8px 12px; border-radius:8px; border:none; cursor:pointer; font-weight:600; } -.btn.secondary { background:#eef6ff; color:#2f63a6; border:1px solid #d6e9ff; } -.btn.primary { background:#2f63a6; color:white; } -.small-muted { color:#7f95a8; font-size:13px; } -.empty { padding:40px; text-align:center; color:#7d97b4; } - -/* notificação simples (centralizada) */ -.notice-card { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; border-radius:8px; padding:14px 18px; box-shadow:0 8px 30px rgba(10,20,40,0.12); z-index:13000; pointer-events:auto; max-width:720px; } -`; +import "./LaudoStyle.css"; // Importa o CSS externo /* ===== Mock data (simula APIDOG) ===== */ function mockFetchLaudos() { @@ -101,12 +67,9 @@ export default function LaudoManager() { const isSecretary = true; // permanece true (somente leitura) useEffect(() => { - const el = document.createElement("style"); - el.innerHTML = styles; - document.head.appendChild(el); + // Importa os dados mock apenas const data = mockFetchLaudos(); setLaudos(data); - return () => document.head.removeChild(el); }, []); // Fecha dropdown ao clicar fora @@ -228,7 +191,7 @@ export default function LaudoManager() {
toggleDropdown(l.id, e)} title="Ações"> - +
{openDropdownId === l.id && ( diff --git a/src/pages/LaudoStyle.css b/src/pages/LaudoStyle.css new file mode 100644 index 0000000..31f1542 --- /dev/null +++ b/src/pages/LaudoStyle.css @@ -0,0 +1,312 @@ +.laudo-wrap { + display:flex; + gap:24px; + padding:18px; + font-family: Inter, Roboto, Arial, sans-serif; +} +.left-col { + width: 100%; + max-width: 1160px; + background:#ffffff; + border-radius:8px; + padding:18px; + box-shadow: 0 1px 0 rgba(0,0,0,0.03); +} +.title-row { + display:flex; + justify-content:space-between; + align-items:center; + margin-bottom:12px; +} +.page-title { + font-size:20px; + color:#2b4a78; + font-weight:700; +} +.laudo-row { + display:flex; + padding:14px 12px; + align-items:center; + border-bottom:1px solid #eef3f8; + position:relative; + overflow:visible; + background: transparent; +} +.col { + flex:1; + padding:0 8px; + font-size:14px; + color:#2e3a4b; +} +.col.small { + flex: 0 0 90px; + text-align: right; +} +.row-actions { + position: relative; + flex: 0 0 88px; + display: flex; + justify-content: flex-end; +} + +.action-btn { + background: transparent; + border: 1px solid #d7e6fb; + border-radius: 8px; + height: 40px; + width: 40px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.dropdown { + position: absolute; + right: 0; + top: 48px; + background: white; + border-radius: 8px; + box-shadow: 0 10px 30px rgba(20,30,50,0.12); + min-width: 220px; + padding: 8px 0; + z-index: 9999; +} + +.dropdown .item { + padding: 12px 18px; + cursor: pointer; + font-size: 15px; + color: #244056; +} + +.dropdown .item:hover { + background: #f6fbff; +} + +.viewer-modal, +.preview-modal, +.confirm-modal { + position: fixed; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: 12000; + pointer-events: none; +} /* deixar pointer-events none para que não bloqueie por padrão */ + +.modal-backdrop { + position: absolute; + inset: 0; + background: rgba(9,20,40,0.45); + pointer-events: auto; +} /* usado apenas quando necessário */ + +.modal-card { + position: relative; + width: 92%; + max-width: 1100px; + background: white; + border-radius: 10px; + padding: 18px; + box-shadow: 0 10px 60px rgba(10,20,40,0.25); + max-height: 88vh; + overflow: auto; + pointer-events: auto; +} + +.viewer-header { + display: flex; + justify-content: space-between; + align-items: flex-start; + gap: 10px; + margin-bottom: 12px; +} + +.patient-info { + font-size: 13px; + color: #3a556b; +} + +.toolbar { + display: flex; + gap: 8px; + align-items: center; + flex-wrap: wrap; + margin-bottom: 12px; +} + +.tool-btn { + padding: 8px 10px; + border-radius: 6px; + border: 1px solid #e6eef8; + cursor: pointer; + background: #fff; + font-size: 13px; +} + +.editor-area { + border: 1px solid #e6eef8; + border-radius: 8px; + padding: 14px; + min-height: 360px; + background: #fff; + color: #1f2d3d; + font-size: 15px; + line-height: 1.5; +} + +.footer-controls { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 12px; +} + +.toggle { + display: flex; + align-items: center; + gap: 8px; +} + +.btn { + padding: 8px 12px; + border-radius: 8px; + border: none; + cursor: pointer; + font-weight: 600; +} + +.btn.secondary { + background: #eef6ff; + color: #2f63a6; + border: 1px solid #d6e9ff; +} + +.btn.primary { + background: #2f63a6; + color: white; +} + +.small-muted { + color: #7f95a8; + font-size: 13px; +} + +.empty { + padding: 40px; + text-align: center; + color: #7d97b4; +} + +/* notificação simples (centralizada) */ +.notice-card { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; border-radius:8px; padding:14px 18px; box-shadow:0 8px 30px rgba(10,20,40,0.12); z-index:13000; pointer-events:auto; max-width:720px; } + +/* Dark mode styles remain as you have them */ +html[data-bs-theme="dark"] { + background: #181818 !important; + color: #e0e0e0 !important; +} + +html[data-bs-theme="dark"] .laudo-wrap { + background: transparent !important; +} + +html[data-bs-theme="dark"] .left-col { + background: #232323 !important; + box-shadow: 0 1px 0 rgba(0,0,0,0.08) !important; + border-radius: 8px !important; +} + +html[data-bs-theme="dark"] .title-row { + border-bottom: 1px solid #333 !important; +} + +html[data-bs-theme="dark"] .page-title { + color: #90caf9 !important; +} + +html[data-bs-theme="dark"] .laudo-row { + background: transparent !important; + border-bottom: 1px solid #333 !important; +} + +html[data-bs-theme="dark"] .col { + color: #e0e0e0 !important; +} + +html[data-bs-theme="dark"] .col.small { + color: #90caf9 !important; +} + +html[data-bs-theme="dark"] .action-btn { + background: transparent !important; + border: 1px solid #e0e0e0 !important; + color: #e0e0e0 !important; +} + +html[data-bs-theme="dark"] .dropdown { + background: #232323 !important; + box-shadow: 0 10px 30px rgba(20,30,50,0.32) !important; + color: #e0e0e0 !important; +} + +html[data-bs-theme="dark"] .dropdown .item { + color: #90caf9 !important; +} + +html[data-bs-theme="dark"] .dropdown .item:hover { + background: #2c3642 !important; +} + +html[data-bs-theme="dark"] .modal-backdrop { + background: rgba(9,20,40,0.65) !important; +} + +html[data-bs-theme="dark"] .modal-card { + background: #232323 !important; + color: #e0e0e0 !important; + box-shadow: 0 10px 60px rgba(10,20,40,0.45) !important; +} + +html[data-bs-theme="dark"] .patient-info { + color: #90caf9 !important; +} + +html[data-bs-theme="dark"] .tool-btn { + background: #232323 !important; + border: 1px solid #333 !important; + color: #e0e0e0 !important; +} + +html[data-bs-theme="dark"] .editor-area { + background: #232323 !important; + color: #e0e0e0 !important; + border: 1px solid #333 !important; +} + +html[data-bs-theme="dark"] .btn.secondary { + background: #232323 !important; + color: #90caf9 !important; + border: 1px solid #333 !important; +} + +html[data-bs-theme="dark"] .btn.primary { + background: #1976d2 !important; + color: #fff !important; +} + +html[data-bs-theme="dark"] .small-muted { + color: #7f95a8 !important; +} + +html[data-bs-theme="dark"] .empty { + color: #7d97b4 !important; +} + +html[data-bs-theme="dark"] .notice-card { + background: #232323 !important; + color: #e0e0e0 !important; + box-shadow: 0 8px 30px rgba(10,20,40,0.32) !important; +} \ No newline at end of file diff --git a/src/pages/TablePaciente.jsx b/src/pages/TablePaciente.jsx index a82e63d..52a7854 100644 --- a/src/pages/TablePaciente.jsx +++ b/src/pages/TablePaciente.jsx @@ -270,7 +270,7 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente className="btn btn-sm" style={{ backgroundColor: "#E6F2FF", - color: "#004085", + color: "#004085!important", }} onClick={() => { diff --git a/src/pages/style/Agendamento.css b/src/pages/style/Agendamento.css index e5d4de4..8df2e11 100644 --- a/src/pages/style/Agendamento.css +++ b/src/pages/style/Agendamento.css @@ -4,6 +4,7 @@ border-radius: 5px; border: 1px solid #ccc; } + .btn-buscar { padding: 0.5rem 1rem; margin-right: 0.5rem; @@ -13,15 +14,12 @@ cursor: pointer; } - .unidade-selecionarprofissional{ background-color: #fdfdfdde; padding: 20px 10px; display: flex; border-radius:10px ; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - - } .unidade-selecionarprofissional input, .unidade-selecionarprofissional select { @@ -68,25 +66,18 @@ .btn-selecionar-tabeladia{ border-radius: 10px 0px 0px 10px; - - } .btn-selecionar-tabelames{ border-radius: 0px 10px 10px 0px; } - .btn-selecionar-tabeladia.ativo, .btn-selecionar-tabelasemana.ativo, .btn-selecionar-tabelames.ativo{ background-color: lightcyan; border-color: darkcyan; font-weight: bolder; - - } - - .legenda-tabela{ display: flex; @@ -127,7 +118,6 @@ border-radius: 10px; } - #status-card-consulta-confirmado, .legenda-item-confirmado { background-color: #eef8fb; border:3px solid #d8dfe7; @@ -144,18 +134,14 @@ border-radius: 10px; } -.btns-e-legenda-container{ - +.btns-e-legenda-container{ display: flex; - justify-content: space-between; flex-direction: row; margin-top: 10px; } - .calendario { - border-collapse: collapse; width: 100%; border-radius: 10px; @@ -165,8 +151,6 @@ background-color: rgb(253, 253, 253); } - - .calendario-ou-filaespera{ margin-top: 0; } @@ -177,7 +161,6 @@ flex-direction: row; gap: 20px; margin-left:20px ; - } .btn-fila-espera, .btn-agenda{ @@ -187,10 +170,122 @@ padding: 8px; border-radius: 10px 10px 0px 0px; font-weight: bold; - } .opc-filaespera-ativo, .opc-agenda-ativo{ color: white; background-color: #5980fd; +} + +html[data-bs-theme="dark"] { + body { + background-color: #121212; + color: #e0e0e0; + } + + .calendario { + background-color: #1e1e1e; + border: 10px solid #333; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); + } + + .unidade-selecionarprofissional { + background-color: #1e1e1e; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); + } + + .unidade-selecionarprofissional input, + .unidade-selecionarprofissional select, + .busca-atendimento select, + .busca-atendimento input { + background-color: #2c2c2c; + color: #e0e0e0; + border: 1px solid #444; + } + + .btn-buscar, + .btn-selecionar-tabeladia, + .btn-selecionar-tabelasemana, + .btn-selecionar-tabelames { + background-color: #2c2c2c; + color: #e0e0e0; + border: none; + } + + .btn-selecionar-tabeladia.ativo, + .btn-selecionar-tabelasemana.ativo, + .btn-selecionar-tabelames.ativo { + background-color: #005a9e; + border-color: #004578; + color: #fff; + } + + .legenda-item-realizado { + background-color: #14532d; + border-color: #166534; + } + + .legenda-item-confirmado { + background-color: #1e3a8a; + border-color: #2563eb; + } + + .legenda-item-cancelado { + background-color: #7f1d1d; + border-color: #dc2626; + } + + .legenda-item-agendado { + background-color: #78350f; + border-color: #f59e0b; + } + + #status-card-consulta-realizado, + .legenda-item-realizado { + background-color: #14532d; + border: 3px solid #166534; + color: #e0e0e0; + } + + #status-card-consulta-cancelado, + .legenda-item-cancelado { + background-color: #7f1d1d; + border: 3px solid #dc2626; + color: #e0e0e0; + } + + #status-card-consulta-confirmado, + .legenda-item-confirmado { + background-color: #1e3a8a; + border: 3px solid #2563eb; + color: #e0e0e0; + } + + #status-card-consulta-agendado, + .legenda-item-agendado { + background-color: #78350f; + border: 3px solid #f59e0b; + color: #e0e0e0; + } + + .btns-e-legenda-container { + background-color: #181818; + } + + .container-btns-agenda-fila_esepera { + background-color: #181818; + } + + .btn-fila-espera, + .btn-agenda { + background-color: #2c2c2c; + color: #e0e0e0; + border-bottom: 3px solid #333; + } + + .opc-filaespera-ativo, + .opc-agenda-ativo { + color: #fff; + background-color: #005a9e; + } } \ No newline at end of file diff --git a/src/pages/style/FilaEspera.css b/src/pages/style/FilaEspera.css index 3cdc41a..358a21f 100644 --- a/src/pages/style/FilaEspera.css +++ b/src/pages/style/FilaEspera.css @@ -286,3 +286,40 @@ html, body { font-size: 1.5rem; text-align: center; } + +html[data-bs-theme="dark"] .fila-container { + background: #232323 !important; + color: #e0e0e0 !important; + border-color: #333 !important; +} + +html[data-bs-theme="dark"] .fila-titulo { + color: #e0e0e0 !important; + border-bottom: 2px solid #444 !important; +} + +html[data-bs-theme="dark"] .fila-tabela th { + background-color: #333 !important; + color: #e0e0e0 !important; +} + +html[data-bs-theme="dark"] .fila-tabela tbody tr:nth-child(even) { + background-color: #2a2a2a !important; +} +html[data-bs-theme="dark"] .fila-tabela tbody tr:nth-child(odd) { + background-color: #232323 !important; +} + +html[data-bs-theme="dark"] .fila-tabela tbody tr:hover { + background-color: #2d3540 !important; +} + +html[data-bs-theme="dark"] .busca-fila-espera { + background: #232323 !important; + color: #e0e0e0 !important; + border-color: #444 !important; +} + +html[data-bs-theme="dark"] .busca-fila-espera:focus { + border-color: #5980fd !important; +} \ No newline at end of file diff --git a/src/pages/style/FinanceiroDashboard.css b/src/pages/style/FinanceiroDashboard.css index b993509..d9caac7 100644 --- a/src/pages/style/FinanceiroDashboard.css +++ b/src/pages/style/FinanceiroDashboard.css @@ -275,4 +275,95 @@ textarea { padding: 40px; color: #7d97b4; font-size: 16px; +} + +html[data-bs-theme="dark"] .financeiro-wrap { + background-color: #121212; + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .list-page-card { + background-color: #1e1e1e; + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.5); +} + +html[data-bs-theme="dark"] .table-container th { + background: #2c2c2c; + color: #cbd5e1; +} + +html[data-bs-theme="dark"] .table-container th, +html[data-bs-theme="dark"] .table-container td { + border-bottom: 1px solid #333; + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .table-container tr:nth-child(even) { + background-color: #1a1a1a; +} + +html[data-bs-theme="dark"] .table-container tr:hover { + background-color: #333 !important; +} + +html[data-bs-theme="dark"] .action-btn { + background: #2c2c2c; + border: 1px solid #444 !important; + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .action-btn:hover { + background: #3a3a3a !important; + border-color: #666 !important; +} + +html[data-bs-theme="dark"] .action-btn.delete { + border-color: #f87171 !important; + color: #fca5a5 !important; +} + +html[data-bs-theme="dark"] .action-btn.delete:hover { + background: #7f1d1d !important; + border-color: #f87171 !important; +} + +html[data-bs-theme="dark"] .badge.pago { + background: #064e3b !important; + color: #d1fae5; +} + +html[data-bs-theme="dark"] .badge.pendente { + background: #78350f !important; + color: #fef3c7; +} + +html[data-bs-theme="dark"] .badge.vencido { + background: #7f1d1d !important; + color: #fee2e2; +} + +html[data-bs-theme="dark"] .modal-card { + background: #1e1e1e; + color: #e0e0e0; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5); +} + +html[data-bs-theme="dark"] .modal-header h2 { + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .input-field, +html[data-bs-theme="dark"] .select-field, +html[data-bs-theme="dark"] textarea { + background-color: #23272f; + color: #e0e0e0; + border: 1px solid #444; +} + +html[data-bs-theme="dark"] .input-field:focus, +html[data-bs-theme="dark"] .select-field:focus, +html[data-bs-theme="dark"] textarea:focus { + border-color: #3b82f6; + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); + outline: none; } \ No newline at end of file diff --git a/src/pages/style/Inicio.css b/src/pages/style/Inicio.css index c7eb6a3..889e7bf 100644 --- a/src/pages/style/Inicio.css +++ b/src/pages/style/Inicio.css @@ -179,4 +179,53 @@ .manage-button:hover { background-color: #4444ff; +} + +html[data-bs-theme="dark"] .dashboard-container { + background-color: #121212; + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .dashboard-header h1, +html[data-bs-theme="dark"] .dashboard-header p, +html[data-bs-theme="dark"] .quick-actions h2, +html[data-bs-theme="dark"] .appointments-section h2, +html[data-bs-theme="dark"] .action-title, +html[data-bs-theme="dark"] .stat-value { + color: #e0e0e0; +} + +html[data-bs-theme="dark"] .stat-card, +html[data-bs-theme="dark"] .action-button, +html[data-bs-theme="dark"] .appointments-section { + background-color: #1e1e1e; + box-shadow: 0 4px 10px rgba(0,0,0,0.3); +} + +html[data-bs-theme="dark"] .stat-label, +html[data-bs-theme="dark"] .action-desc, +html[data-bs-theme="dark"] .no-appointments-content p { + color: #b0b0b0; +} + +html[data-bs-theme="dark"] .stat-icon-wrapper.blue { background-color: #3a3aff; } +html[data-bs-theme="dark"] .stat-icon-wrapper.green { background-color: #1e7d3a; } +html[data-bs-theme="dark"] .stat-icon-wrapper.purple { background-color: #6c3bbf; } +html[data-bs-theme="dark"] .stat-icon-wrapper.orange { background-color: #b36b1e; } + +html[data-bs-theme="dark"] .action-icon { + color: #a272ff; +} + +html[data-bs-theme="dark"] .no-appointments-icon { + color: #666; +} + +html[data-bs-theme="dark"] .manage-button { + background-color: #3a3aff; + color: #fff; +} + +html[data-bs-theme="dark"] .manage-button:hover { + background-color: #2323b0; } \ No newline at end of file diff --git a/src/pages/style/LandingPage.css b/src/pages/style/LandingPage.css index 078ec5d..fc56b0c 100644 --- a/src/pages/style/LandingPage.css +++ b/src/pages/style/LandingPage.css @@ -102,4 +102,58 @@ .main-action-button:hover { background-color: #4540d6; +} + +html[data-bs-theme="dark"] .landing-page-public-view { + background-color: #181a20; +} + +html[data-bs-theme="dark"] .landing-header { + background-color: #23263a; + box-shadow: 0 1px 5px rgba(0,0,0,0.3); +} + +html[data-bs-theme="dark"] .landing-header .logo h1 { + color: #bfc8ff; +} + +html[data-bs-theme="dark"] .nav-menu a { + color: #bfc8ff; +} + +html[data-bs-theme="dark"] .nav-menu a:hover { + color: #8a7fff; +} + +html[data-bs-theme="dark"] .access-button { + background-color: #8a7fff; + color: #181a20; +} + +html[data-bs-theme="dark"] .nav-menu button:hover { + background-color: #5b56f8; +} + +html[data-bs-theme="dark"] .hero-section { + background: linear-gradient(rgba(24,26,32,0.8), rgba(24,26,32,0.8)), url('https://picsum.photos/1200/600?random=4') center/cover; + color: #e2e6f7; +} + +html[data-bs-theme="dark"] .hero-content .hero-title { + color: #e2e6f7; + text-shadow: 2px 2px 8px rgba(0,0,0,0.8); +} + +html[data-bs-theme="dark"] .hero-content p { + color: #bfc8ff; +} + +html[data-bs-theme="dark"] .main-action-button { + background-color: #8a7fff; + color: #181a20; +} + +html[data-bs-theme="dark"] .main-action-button:hover { + background-color: #5b56f8; + color: #fff; } \ No newline at end of file From 620c36d3a1f809859e6a1887bcae9c49daadb3d8 Mon Sep 17 00:00:00 2001 From: Eduarda-SS <137419071+Eduarda-SS@users.noreply.github.com> Date: Wed, 8 Oct 2025 20:33:21 -0300 Subject: [PATCH 4/5] Ajustes --- src/PagesMedico/styleMedico/Agendamento.css | 172 ++++++++++++++------ src/assets/scss/_variables.scss | 1 - src/pages/TablePaciente.jsx | 2 +- 3 files changed, 124 insertions(+), 51 deletions(-) diff --git a/src/PagesMedico/styleMedico/Agendamento.css b/src/PagesMedico/styleMedico/Agendamento.css index fe00c0c..ffa5552 100644 --- a/src/PagesMedico/styleMedico/Agendamento.css +++ b/src/PagesMedico/styleMedico/Agendamento.css @@ -1,81 +1,155 @@ -/* Default (light mode) styles */ -html { - background-color: #f8f9fa; - color: #212529; +/* --- Esconde a barra de unidade e profissional --- */ +.unidade-selecionarprofissional { + display: none; } -.calendario { - background-color: #fff; - border: 1px solid #dee2e6; - box-shadow: 0 4px 12px rgba(0,0,0,0.08); +/* --- Posiciona a barra de busca corretamente --- */ +.busca-atendimento { + display: flex; + align-items: center; /* Alinha os itens verticalmente */ + margin-top: 20px; /* Espaço acima da barra de busca */ + padding: 0 10px; /* Adiciona um padding lateral para alinhar com o resto */ + gap: 15px; +} + +.busca-atendimento > div:first-child { + width: 400px; /* Define um tamanho para a barra de pesquisa */ + display: flex; + align-items: center; } .busca-atendimento input { - background-color: #fff; - color: #212529; - border: 1px solid #ced4da; + margin-left: 8px; + border-radius: 8px; + padding: 8px; + width: 100%; + border: 1px solid #ccc; } .busca-atendimento select { - background-color: #5980fd; - color: #fff; + padding: 8px; + border-radius: 8px; + background-color: #0078d7; + color: white; + font-weight: bold; + border: none; } +/* --- Estilos dos botões de Dia, Semana, Mês --- */ .btn-selecionar-tabeladia, .btn-selecionar-tabelasemana, .btn-selecionar-tabelames { - background-color: #fff; - color: #212529; + background-color: rgba(231, 231, 231, 0.808); + padding: 8px 10px; + font-size: larger; + font-weight: bold; + border-style: hidden; + cursor: pointer; +} + +.btn-selecionar-tabeladia { + border-radius: 10px 0px 0px 10px; +} + +.btn-selecionar-tabelames { + border-radius: 0px 10px 10px 0px; } .btn-selecionar-tabeladia.ativo, .btn-selecionar-tabelasemana.ativo, .btn-selecionar-tabelames.ativo { - background-color: #5980fd; - color: #fff; - border-color: #3a5ccc; + background-color: lightcyan; + border-color: darkcyan; + font-weight: bolder; +} + +/* --- Container dos botões e legenda --- */ +.btns-e-legenda-container { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 10px; + padding: 0 10px; +} + +/* --- Legendas --- */ +.legenda-tabela { + display: flex; + gap: 15px; +} + +#status-card-consulta-realizado, .legenda-item-realizado { + background-color: #b7ffbd; + border: 3px solid #91d392; + padding: 5px; + font-weight: bold; + border-radius: 10px; +} + +#status-card-consulta-cancelado, .legenda-item-cancelado { + background-color: #ffb7cc; + border: 3px solid #ff6c84; + padding: 5px; + font-weight: bold; + border-radius: 10px; +} + +#status-card-consulta-confirmado, .legenda-item-confirmado { + background-color: #eef8fb; + border: 3px solid #d8dfe7; + padding: 5px; + font-weight: bold; + border-radius: 10px; +} + +#status-card-consulta-agendado, .legenda-item-agendado { + background-color: #f7f7c4; + border: 3px solid #f3ce67; + padding: 5px; + font-weight: bold; + border-radius: 10px; +} + +/* --- Estrutura Geral --- */ +.calendario { + border-collapse: collapse; + width: 100%; + border-radius: 10px; + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + border: 1px solid #eee; + background-color: #ffffff; +} + +.calendario-ou-filaespera { + margin-top: 0; +} + +.container-btns-agenda-fila_esepera { + margin-top: 30px; + display: flex; + flex-direction: row; + gap: 20px; + margin-left: 20px; } .btn-fila-espera, .btn-agenda { - background-color: #fff; - color: #212529; + background-color: transparent; + border: 0px; border-bottom: 3px solid transparent; + padding: 8px; + border-radius: 10px 10px 0px 0px; + font-weight: bold; + cursor: pointer; } .opc-filaespera-ativo, .opc-agenda-ativo { + color: white; background-color: #5980fd; - color: #fff; } -#status-card-consulta-realizado, -.legenda-item-realizado { - background-color: #e6f9e6; - border: 3px solid #b7ffbd; - color: #2e4d2e; -} - -#status-card-consulta-cancelado, -.legenda-item-cancelado { - background-color: #ffe6ee; - border: 3px solid #ffb7cc; - color: #4d2e36; -} - -#status-card-consulta-confirmado, -.legenda-item-confirmado { - background-color: #e6f0fa; - border: 3px solid #eef8fb; - color: #2e3a4d; -} - -#status-card-consulta-agendado, -.legenda-item-agendado { - background-color: #f7f7c4; - border: 3px solid #f7f7c4; - color: #4d4d2e; -} /* Dark mode styles */ html[data-bs-theme="dark"] { @@ -154,4 +228,4 @@ html[data-bs-theme="dark"] .legenda-item-agendado { background-color: #2e2e1e; border: 3px solid #4d4d2e; color: #f7f7c4; -} +} \ No newline at end of file diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index 91ef39e..b0ac702 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -11,7 +11,6 @@ $dark-mode: false !default; - // Mazer Variables @import "~bootstrap/scss/functions"; diff --git a/src/pages/TablePaciente.jsx b/src/pages/TablePaciente.jsx index 52a7854..a82e63d 100644 --- a/src/pages/TablePaciente.jsx +++ b/src/pages/TablePaciente.jsx @@ -270,7 +270,7 @@ const pacientesFiltrados = Array.isArray(pacientes) ? pacientes.filter((paciente className="btn btn-sm" style={{ backgroundColor: "#E6F2FF", - color: "#004085!important", + color: "#004085", }} onClick={() => { From dc24d363463099d5472f0b8117ea8318a8962f59 Mon Sep 17 00:00:00 2001 From: jp-lima Date: Thu, 9 Oct 2025 09:05:33 -0300 Subject: [PATCH 5/5] =?UTF-8?q?Adi=C3=A7=C3=A3o=20da=20funcionalidade=20de?= =?UTF-8?q?=20ver=20detalhes=20e=20editar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/PagesMedico/DoctorRelatorioManager.jsx | 132 ++++++++++-- src/PagesMedico/EditPageRelatorio.jsx | 65 ++++++ src/PagesMedico/FormNovoRelatorio.jsx | 200 ++--------------- .../styleMedico/FormNovoRelatorio.css | 2 +- src/PagesMedico/styleMedico/geral.css | 24 ++- src/components/FormRelatorio.jsx | 201 ++++++++++++++++++ src/perfis/Perfil_medico/PerfilMedico.jsx | 2 + 7 files changed, 422 insertions(+), 204 deletions(-) create mode 100644 src/PagesMedico/EditPageRelatorio.jsx create mode 100644 src/components/FormRelatorio.jsx diff --git a/src/PagesMedico/DoctorRelatorioManager.jsx b/src/PagesMedico/DoctorRelatorioManager.jsx index 334de6b..ce24602 100644 --- a/src/PagesMedico/DoctorRelatorioManager.jsx +++ b/src/PagesMedico/DoctorRelatorioManager.jsx @@ -3,16 +3,20 @@ import { Link } from 'react-router-dom'; import {useState, useEffect} from 'react' import { useAuth } from '../components/utils/AuthProvider'; import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient'; +import { useNavigate } from 'react-router-dom'; +import html2pdf from 'html2pdf.js'; const DoctorRelatorioManager = () => { + const navigate = useNavigate() const {getAuthorizationHeader} = useAuth(); let authHeader = getAuthorizationHeader() const [RelatoriosFiltrados, setRelatorios] = useState([]) const [PacientesComRelatorios, setPacientesComRelatorios] = useState([]) + const [showModal, setShowModal] = useState(false) + const [index, setIndex] = useState() useEffect( () => { - let pacientesDosRelatorios =[] - - + let pacientesDosRelatorios = [] + const ListarPacientes = async () => { for (let i = 0; i < RelatoriosFiltrados.length; i++) { let relatorio = RelatoriosFiltrados[i]; @@ -50,10 +54,78 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?patient_id&statu .catch(error => console.log('error', error)); }, []) - + const BaixarPDFdoRelatorio = (nome_paciente) => { + const elemento = document.getElementById("folhaA4"); // tua div do relatório + const opt = { + margin: 0, + filename: `relatorio_${nome_paciente || "paciente"}.pdf`, + html2canvas: { scale: 2 }, + jsPDF: { unit: "mm", format: "a4", orientation: "portrait" }, + }; + + html2pdf().set(opt).from(elemento).save(); + } return (
+ {showModal && ( +
+
+
+
+
Relatório de {PacientesComRelatorios[index]?.full_name}
+ +
+
+
+ +
+

Clinica Rise up

+

Dr - CRM/SP 123456

+

Avenida - (79) 9 4444-4444

+
+ +
+

Paciente: {PacientesComRelatorios[index]?.full_name}

+

Data de nascimento: {PacientesComRelatorios[index]?.birth_date}

+ +

Data do exame: {}

+ +

Exame: {RelatoriosFiltrados[index]?.exam}

+ +

Diagnostico: {RelatoriosFiltrados[index]?.diagnosis}

+

Conclusão: {RelatoriosFiltrados[index]?.conclusion}

+
+ +
+

Dr {RelatoriosFiltrados[index]?.required_by}

+

Emitido em: 0

+
+ +
+
+
+ + + + +
+
+
+
+ )} + +

Lista de Relatórios

@@ -103,39 +175,59 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?patient_id&statu - + + - {RelatoriosFiltrados.length > 0 ? ( RelatoriosFiltrados.map((relatorio, index) => ( - + - + diff --git a/src/PagesMedico/EditPageRelatorio.jsx b/src/PagesMedico/EditPageRelatorio.jsx new file mode 100644 index 0000000..831d8ad --- /dev/null +++ b/src/PagesMedico/EditPageRelatorio.jsx @@ -0,0 +1,65 @@ +import React, { useEffect, useState } from 'react' +import FormRelatorio from '../components/FormRelatorio' +import { useParams } from 'react-router-dom' +import API_KEY from '../components/utils/apiKeys' +import { useAuth } from '../components/utils/AuthProvider' +const EditPageRelatorio = () => { + const params = useParams() + const {getAuthorizationHeader} = useAuth() + let authHeader = getAuthorizationHeader() + const [DictInfo, setDictInfo] = useState({}) + + let RelatorioID = params.id + + const handleSave = (RelatorioInfos) => { + var myHeaders = new Headers(); + myHeaders.append("apikey", API_KEY); + myHeaders.append("Authorization", authHeader); + myHeaders.append("Content-Type", "application/json"); + + const raw = JSON.stringify({...RelatorioInfos, order_number:'REL-2025-4386'}) + + console.log(RelatorioInfos) + + var requestOptions = { + method: 'PATCH', + headers: myHeaders, + body: raw, + redirect: 'follow' + +}; + + fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?id=eq.${RelatorioID}`, requestOptions) + .then(response => response.text()) + .then(result => console.log(result)) + .catch(error => console.log('error', error)); + + } + + useEffect(() => { + var myHeaders = new Headers(); + myHeaders.append("apikey", API_KEY); + myHeaders.append("Authorization", authHeader); + + var requestOptions = { + method: 'GET', + headers: myHeaders, + redirect: 'follow' + }; + + fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports?id=eq.${RelatorioID}`, requestOptions) + .then(response => response.json()) + .then(result => setDictInfo(result[0])) + .catch(error => console.log('error', error)); + }, []) + + console.log(RelatorioID) + + return ( +
+ +
+ ) +} + +export default EditPageRelatorio \ No newline at end of file diff --git a/src/PagesMedico/FormNovoRelatorio.jsx b/src/PagesMedico/FormNovoRelatorio.jsx index 29018f7..3691793 100644 --- a/src/PagesMedico/FormNovoRelatorio.jsx +++ b/src/PagesMedico/FormNovoRelatorio.jsx @@ -1,72 +1,24 @@ -import React from 'react' + import '../PagesMedico/styleMedico/FormNovoRelatorio.css' -import { useState } from 'react' -import { useNavigate } from 'react-router-dom' -import { useAuth } from '../components/utils/AuthProvider' -import { GetPatientByCPF } from '../components/utils/Functions-Endpoints/Patient' -import { FormatCPF } from '../components/utils/Formatar/Format' import API_KEY from '../components/utils/apiKeys' -import html2pdf from "html2pdf.js"; - - +import FormRelatorio from '../components/FormRelatorio' +import { useState } from 'react' +import { useAuth } from '../components/utils/AuthProvider' const FormNovoRelatorio = () => { - const {getAuthorizationHeader} = useAuth() - let authHeader = getAuthorizationHeader() - const navigate= useNavigate() - const [DictInfo, setDictInfo] = useState({}) - const [showModal, setShowModal] = useState(false) + const [DictInfo, setDictInfo] = useState({}) - const handleChange = (e) => { - const { name, value } = e.target; - console.log(name, value) + const {getAuthorizationHeader} = useAuth() + let authHeader = getAuthorizationHeader() - - if(name === 'paciente_cpf') { - const formattedCPF = FormatCPF(value); - setDictInfo((prev) => ({ ...prev, [name]: formattedCPF })); - - const fetchPatient = async () => { - const patientData = await GetPatientByCPF(formattedCPF, authHeader); - if (patientData) { - setDictInfo((prev) => ({ - ...prev, - paciente_cpf:value, - paciente_nome: patientData.full_name, - paciente_id: patientData.id - })); - } - - }; - if(formattedCPF.length === 14){ - fetchPatient(); - } - }else{ - setDictInfo((prev) => ({ ...prev, [name]: value })); - } - } - - const handleSubmit = (e) => { - e.preventDefault(); - console.log(DictInfo) - setShowModal(true) - - var myHeaders = new Headers(); + const handleSave = (data) => { + console.log("Relatório salvo:", data); + + var myHeaders = new Headers(); myHeaders.append("apikey", API_KEY); myHeaders.append("Authorization", authHeader); myHeaders.append("Content-Type", "application/json"); -var raw = JSON.stringify({ - "patient_id": DictInfo.paciente_id, - - "exam": DictInfo.exam, - "diagnosis": DictInfo.diagnosis, - "conclusion": DictInfo.conclusao, - "status": "draft", - "requested_by": DictInfo.requested_by, - - "hide_date": false, - "hide_signature": false, -}); +var raw = JSON.stringify({...data}); var requestOptions = { method: 'POST', @@ -79,130 +31,14 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/reports", requestOptions .then(response => response.text()) .then(result => console.log(result)) .catch(error => console.log('error', error)); - } + } - return ( -
- {showModal &&( -
-
-
-
-
Relatório criado com sucesso
- -
-
-

Você também pode baixa-lo agora em pdf

-
-
- - - -
-
-
-
- )} -

Criar novo relatório

- -
- -
-
- -
- - -
- -
- - -
- - -
- - -
- -
- - -
- - -
- - -
- + return ( +
+

Criar Novo Relatorio

+
- -
-
- - -
- -
- - -
-
- - - - -
- -

Modelo do relatório

-
- -
-

Clinica Rise up

-

Dr {DictInfo.requested_by} - CRM/SP 123456

-

Avenida - (79) 9 4444-4444

-
- -
-

Paciente: {DictInfo?.paciente_nome}

-

Data de nascimento:

- -

Data do exame: {DictInfo.data_exame}

- -

Exame: {DictInfo.exame}

- -

Diagnostico: {DictInfo.diagnostico}

- -

Conclusão: {DictInfo.conclusao}

- -
- -
-

Dr {DictInfo.requested_by}

-

Emitido em: 0

-
- -
- -
- ) + ) } export default FormNovoRelatorio \ No newline at end of file diff --git a/src/PagesMedico/styleMedico/FormNovoRelatorio.css b/src/PagesMedico/styleMedico/FormNovoRelatorio.css index 7d8a5ed..a8fafa3 100644 --- a/src/PagesMedico/styleMedico/FormNovoRelatorio.css +++ b/src/PagesMedico/styleMedico/FormNovoRelatorio.css @@ -52,4 +52,4 @@ textarea{ .info-paciente{ font-weight: bold; -} \ No newline at end of file +} diff --git a/src/PagesMedico/styleMedico/geral.css b/src/PagesMedico/styleMedico/geral.css index 94918bd..6778595 100644 --- a/src/PagesMedico/styleMedico/geral.css +++ b/src/PagesMedico/styleMedico/geral.css @@ -186,4 +186,26 @@ tbody tr:hover { td { padding: 12px; border-bottom: 1px solid var(--cor-borda); -} \ No newline at end of file +} + +.modal-tabela-relatorio{ + width: 70rem; +} + +.modal-dialog.modal-tabela-relatorio { + max-width: 900px; /* largura máxima da modal */ + width: 100%; /* ocupa até o limite */ + margin: 1.75rem auto; /* centraliza vertical e horizontalmente */ +} + +.modal-content { + height: auto; /* altura variável conforme o conteúdo */ + max-height: none; /* remove limite interno */ +} + +.modal-body { + max-height: 70vh; /* limite vertical — 80% da altura da tela */ + overflow-y: auto; /* ativa rolagem vertical */ + overflow-x: hidden; /* impede rolagem horizontal */ + padding: 20px; /* espaço interno mais agradável */ +} diff --git a/src/components/FormRelatorio.jsx b/src/components/FormRelatorio.jsx new file mode 100644 index 0000000..7c04a49 --- /dev/null +++ b/src/components/FormRelatorio.jsx @@ -0,0 +1,201 @@ +import React from 'react' +import '../PagesMedico/styleMedico/FormNovoRelatorio.css' +import { useState } from 'react' +import { useNavigate } from 'react-router-dom' +import { useAuth } from '../components/utils/AuthProvider' +import { GetPatientByCPF } from '../components/utils/Functions-Endpoints/Patient' +import { FormatCPF } from '../components/utils/Formatar/Format' +import html2pdf from 'html2pdf.js' + +const FormRelatorio = ({onSave, DictInfo, setDictInfo }) => { + const {getAuthorizationHeader} = useAuth() + let authHeader = getAuthorizationHeader() + const navigate= useNavigate() + + const [showModal, setShowModal] = useState(false) + + const BaixarPDFdoRelatorio = () => { + const elemento = document.getElementById("folhaA4"); // tua div do relatório + const opt = { + margin: 0, + filename: `relatorio_${DictInfo?.paciente_nome || "paciente"}.pdf`, + html2canvas: { scale: 2 }, + jsPDF: { unit: "mm", format: "a4", orientation: "portrait" }, + }; + + html2pdf().set(opt).from(elemento).save(); + } + + const handleChange = (e) => { + const { name, value } = e.target; + console.log(name, value) + if(name === 'paciente_cpf') { + const formattedCPF = FormatCPF(value); + setDictInfo((prev) => ({ ...prev, [name]: formattedCPF })); + + const fetchPatient = async () => { + const patientData = await GetPatientByCPF(formattedCPF, authHeader); + if (patientData) { + setDictInfo((prev) => ({ + ...prev, + paciente_cpf:value, + paciente_nome: patientData.full_name, + paciente_id: patientData.id + })); + } + + }; + if(formattedCPF.length === 14){ + fetchPatient(); + } + }else{ + setDictInfo((prev) => ({ ...prev, [name]: value })); + } + } + + const handleSubmit = (e) => { + e.preventDefault(); + console.log(DictInfo) + setShowModal(true) + + +onSave({ + "patient_id": DictInfo.paciente_id, + + "exam": DictInfo.exam, + "diagnosis": DictInfo.diagnosis, + "conclusion": DictInfo.conclusao, + "status": "draft", + "requested_by": DictInfo.requested_by, + + "hide_date": false, + "hide_signature": false, +}); + + } + + return ( +
+ {showModal &&( +
+
+
+
+
Relatório criado com sucesso
+ +
+
+

Você também pode baixa-lo agora em pdf

+
+
+ + + +
+
+
+
+ )} + + +
+ +
+
+ +
+ + +
+ +
+ + +
+ + +
+ + +
+ +
+ + +
+ + +
+ + +
+ +
+ +
+
+ + +
+ +
+ + +
+
+ + + + +
+ +

Modelo do relatório

+
+ +
+

Clinica Rise up

+

Dr {DictInfo.requested_by} - CRM/SP 123456

+

Avenida - (79) 9 4444-4444

+
+ +
+

Paciente: {DictInfo?.paciente_nome}

+

Data de nascimento:

+ +

Data do exame: {DictInfo.data_exam}

+ +

Exame: {DictInfo.exam}

+ +

Diagnostico: {DictInfo.diagnostico}

+ +

Conclusão: {DictInfo.conclusao}

+ +
+ +
+

Dr {DictInfo.requested_by}

+

Emitido em: 0

+
+ +
+ +
+ ) +} + +export default FormRelatorio \ No newline at end of file diff --git a/src/perfis/Perfil_medico/PerfilMedico.jsx b/src/perfis/Perfil_medico/PerfilMedico.jsx index f34b0b7..b1b9546 100644 --- a/src/perfis/Perfil_medico/PerfilMedico.jsx +++ b/src/perfis/Perfil_medico/PerfilMedico.jsx @@ -8,6 +8,7 @@ import Agendamento from "../../PagesMedico/Agendamento"; import Chat from "../../PagesMedico/Chat"; import DoctorItems from "../../data/sidebar-items-medico.json"; import FormNovoRelatorio from "../../PagesMedico/FormNovoRelatorio"; +import EditPageRelatorio from "../../PagesMedico/EditPageRelatorio"; // ...existing code... function PerfilMedico() { @@ -19,6 +20,7 @@ function PerfilMedico() { } /> } /> + } /> } /> } /> } />
Paciente CPF ExameAções
{relatorio.order_number}{PacientesComRelatorios[index]?.full_name} {PacientesComRelatorios[index]?.cpf} {relatorio.exam}{relatorio.create_at} -
-
- -
- - Visualizar - Editar - Excluir -
+
+ + + + + + +
-
+