forked from RiseUP/riseup-squad23
agendamento resolvido
This commit is contained in:
commit
23a912e1c0
@ -25,8 +25,16 @@ function Sidebar({ menuItems }) {
|
||||
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
let pathname = window.location.pathname.split("/")[1]
|
||||
|
||||
|
||||
// useEffect para definir quais toggle da sidebar devem aparecer
|
||||
useEffect(() => {
|
||||
let teste = localStorage.getItem("roleUser")
|
||||
setRoleUser(teste)
|
||||
|
||||
}, [authHeader])
|
||||
|
||||
|
||||
|
||||
// Detecta se é mobile/tablet
|
||||
@ -37,14 +45,6 @@ function Sidebar({ menuItems }) {
|
||||
setIsActive(!mobile);
|
||||
};
|
||||
|
||||
const fetchInfoUser = async () => {
|
||||
const InfoUser = await UserInfos(authHeader);
|
||||
console.log(InfoUser.roles, "dados")
|
||||
|
||||
setRoleUser(InfoUser.roles)
|
||||
}
|
||||
|
||||
fetchInfoUser()
|
||||
|
||||
checkScreenSize();
|
||||
window.addEventListener("resize", checkScreenSize);
|
||||
@ -117,13 +117,6 @@ function Sidebar({ menuItems }) {
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if(roleUser.includes("admin")){
|
||||
console.log("tem")
|
||||
}
|
||||
console.log(roleUser)
|
||||
}, [roleUser])
|
||||
|
||||
const handleLogoutCancel = () => setShowLogoutModal(false);
|
||||
|
||||
|
||||
@ -251,26 +244,26 @@ function Sidebar({ menuItems }) {
|
||||
<ul className="menu">
|
||||
|
||||
{roleUser.includes("admin") &&
|
||||
<ToggleSidebar perfil={"administrador"} items={admItems}/>
|
||||
<ToggleSidebar perfil={"administrador"} items={admItems} defaultOpen={pathname.includes("admin") } />
|
||||
}
|
||||
{roleUser.includes("admin") || roleUser.includes("secretaria") ?
|
||||
<ToggleSidebar perfil={"secretaria"} items={SecretariaItems}/>
|
||||
<ToggleSidebar perfil={"secretaria"} items={SecretariaItems} defaultOpen={pathname.includes("secretaria")} />
|
||||
:
|
||||
null
|
||||
}
|
||||
|
||||
{roleUser.includes("admin") || roleUser.includes("medico") ?
|
||||
<ToggleSidebar perfil={"medico"} items={DoctorItems}/>
|
||||
<ToggleSidebar perfil={"medico"} items={DoctorItems} defaultOpen={pathname.includes("medico") } />
|
||||
:null
|
||||
}
|
||||
|
||||
{roleUser.includes("admin") || roleUser.includes("financeiro") ?
|
||||
<ToggleSidebar perfil={"financeiro"} items={FinanceiroItems}/>
|
||||
<ToggleSidebar perfil={"financeiro"} items={FinanceiroItems} defaultOpen={pathname.includes("financeiro") } />
|
||||
:null
|
||||
}
|
||||
|
||||
{roleUser.includes("admin") || roleUser.includes("paciente") ?
|
||||
<ToggleSidebar perfil={"paciente"} items={PacienteItems}/>
|
||||
<ToggleSidebar perfil={"paciente"} items={PacienteItems} defaultOpen={pathname.includes("paciente") } />
|
||||
: null
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,14 @@
|
||||
[
|
||||
{
|
||||
{
|
||||
"name": "Início",
|
||||
"icon": "house-fill",
|
||||
"url": "/paciente"
|
||||
},
|
||||
{
|
||||
"name": "Minhas consulta",
|
||||
"icon": "calendar-plus-fill",
|
||||
"url": "/paciente/agendamento"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Meus laudos",
|
||||
"icon": "table",
|
||||
|
||||
@ -276,15 +276,30 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Agendar nova consulta</h1>
|
||||
<h1>Gerenciar consultas</h1>
|
||||
<div className="btns-gerenciamento-e-consulta" style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
|
||||
{/* LIMPA O OBJETO DE EDIÇÃO AO CLICAR EM "ADICIONAR" */}
|
||||
<<<<<<< HEAD
|
||||
<button className="btn btn-primary" onClick={() => {
|
||||
setPageConsulta(true);
|
||||
setEditingAppointmentId(null);
|
||||
=======
|
||||
{!PageNovaConsulta ?
|
||||
<button className="btn btn-primary" onClick={() => {
|
||||
setPageConsulta(true);
|
||||
setEditingAppointmentId(null);
|
||||
>>>>>>> b64b664621626393863bd367709ca331df3ec00c
|
||||
setAppointmentToEdit(null); // <-- LIMPA O OBJETO AQUI PARA GARANTIR MODO CADASTRO
|
||||
}}><i className="bi bi-plus-circle"></i> Adicionar Consulta</button>
|
||||
<button className="manage-button btn" onClick={() => navigate("/secretaria/excecoes-disponibilidade")}><i className="bi bi-gear-fill me-1"></i> Gerenciar Exceções</button>
|
||||
:
|
||||
<button className={"btn btn-primary"} onClick={() => {
|
||||
setPageConsulta(false);
|
||||
}}>
|
||||
Ver consultas
|
||||
</button>
|
||||
|
||||
}
|
||||
<button className="manage-button btn" onClick={() => navigate("/secretaria/excecoes-disponibilidade")}><i className="bi bi-gear-fill me-1"></i> Gerenciar Exceções</button>
|
||||
<button className='manage-button btn' onClick={() => navigate('/secretaria/disponibilidade')}><i className="bi bi-gear-fill me-1"></i> Mudar Disponibilidade</button>
|
||||
</div>
|
||||
{!PageNovaConsulta ? (
|
||||
@ -458,6 +473,11 @@ const Agendamento = ({ setDictInfo }) => {
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<<<<<<< HEAD
|
||||
|
||||
export default Agendamento;
|
||||
|
||||
=======
|
||||
|
||||
export default Agendamento;
|
||||
>>>>>>> b64b664621626393863bd367709ca331df3ec00c
|
||||
|
||||
@ -4,36 +4,22 @@ import { useParams,Link, useNavigate, useLocation } from "react-router-dom";
|
||||
import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor";
|
||||
import { useAuth } from "../components/utils/AuthProvider";
|
||||
|
||||
const Details = () => {
|
||||
const DoctorDetails = ({doctor}) => {
|
||||
const {getAuthorizationHeader} = useAuth();
|
||||
const [doctor, setDoctor] = useState({});
|
||||
const Parametros = useParams()
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const Voltar = () => {
|
||||
|
||||
const Voltar = () => {
|
||||
const prefixo = location.pathname.split("/")[1];
|
||||
navigate(`/${prefixo}/medicos`);
|
||||
}
|
||||
|
||||
const doctorID = Parametros.id
|
||||
useEffect(() => {
|
||||
if (!doctorID) return;
|
||||
|
||||
const authHeader = getAuthorizationHeader()
|
||||
|
||||
GetDoctorByID(doctorID, authHeader)
|
||||
.then((data) => {
|
||||
console.log(data, "médico vindo da API");
|
||||
setDoctor(data[0])
|
||||
; // supabase retorna array
|
||||
})
|
||||
.catch((err) => console.error("Erro ao buscar paciente:", err));
|
||||
|
||||
|
||||
}, [doctorID]);
|
||||
|
||||
//if (!doctor) return <p style={{ textAlign: "center" }}>Carregando...</p>;
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -156,4 +142,4 @@ const Details = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Details;
|
||||
export default DoctorDetails;
|
||||
|
||||
@ -8,49 +8,23 @@ import API_KEY from "../components/utils/apiKeys";
|
||||
const ENDPOINT_AVAILABILITY =
|
||||
"https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
|
||||
|
||||
const DoctorEditPage = () => {
|
||||
const DoctorEditPage = ({DictInfo}) => {
|
||||
const { getAuthorizationHeader } = useAuth();
|
||||
const [DoctorToPUT, setDoctorPUT] = useState({});
|
||||
|
||||
const Parametros = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
const DoctorID = Parametros.id;
|
||||
|
||||
const DoctorID = "b24c88b2-1d51-4c04-8fe8-e75c3f2817d1";
|
||||
const availabilityId = searchParams.get("availabilityId");
|
||||
|
||||
const [availabilityToPATCH, setAvailabilityToPATCH] = useState(null);
|
||||
const [mode, setMode] = useState("doctor");
|
||||
console.log("teste", DictInfo)
|
||||
|
||||
useEffect(() => {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
if (availabilityId) {
|
||||
setMode("availability");
|
||||
|
||||
fetch(`${ENDPOINT_AVAILABILITY}?id=eq.${availabilityId}&select=*`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
apikey: API_KEY,
|
||||
Authorization: authHeader,
|
||||
},
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((data) => {
|
||||
if (data && data.length > 0) {
|
||||
setAvailabilityToPATCH(data[0]);
|
||||
console.log("Disponibilidade vinda da API:", data[0]);
|
||||
}
|
||||
})
|
||||
.catch((err) => console.error("Erro ao buscar disponibilidade:", err));
|
||||
} else {
|
||||
setMode("doctor");
|
||||
GetDoctorByID(DoctorID, authHeader)
|
||||
.then((data) => {
|
||||
console.log(data, "médico vindo da API");
|
||||
setDoctorPUT(data[0]);
|
||||
})
|
||||
.catch((err) => console.error("Erro ao buscar paciente:", err));
|
||||
}
|
||||
}, [DoctorID, availabilityId, getAuthorizationHeader]);
|
||||
setDoctorPUT(DictInfo)
|
||||
}, [DictInfo]);
|
||||
|
||||
const HandlePutDoctor = async () => {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
@ -4,7 +4,7 @@ import { useAuth } from "../components/utils/AuthProvider";
|
||||
import { Link } from "react-router-dom";
|
||||
import "./style/TableDoctor.css";
|
||||
|
||||
function TableDoctor() {
|
||||
function TableDoctor({setDictInfo}) {
|
||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||
|
||||
const [medicos, setMedicos] = useState([]);
|
||||
@ -437,14 +437,14 @@ function TableDoctor() {
|
||||
<td>{medico.email || 'Não informado'}</td>
|
||||
<td>
|
||||
<div className="d-flex gap-2">
|
||||
<Link to={`${medico.id}`}>
|
||||
<button className="btn btn-sm btn-view">
|
||||
<Link to={`details`}>
|
||||
<button className="btn btn-sm btn-view" onClick={() => setDictInfo({...medico})}>
|
||||
<i className="bi bi-eye me-1"></i> Ver Detalhes
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<Link to={`${medico.id}/edit`}>
|
||||
<button className="btn btn-sm btn-edit">
|
||||
<Link to={`edit`}>
|
||||
<button className="btn btn-sm btn-edit" onClick={() => setDictInfo({...medico})}>
|
||||
<i className="bi bi-pencil me-1"></i> Editar
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
@ -1,40 +1,21 @@
|
||||
import React from 'react'
|
||||
|
||||
import PatientForm from '../components/patients/PatientForm'
|
||||
|
||||
import {useEffect, useState} from 'react'
|
||||
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'
|
||||
|
||||
const EditPage = (DictInfo) => {
|
||||
const EditPage = ({DictInfo}) => {
|
||||
const navigate = useNavigate()
|
||||
const Parametros = useParams()
|
||||
const [PatientToPUT, setPatientPUT] = useState({})
|
||||
|
||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||
console.log(DictInfo, "usuario vindo do set")
|
||||
const PatientID = Parametros.id
|
||||
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const authHeader = getAuthorizationHeader()
|
||||
console.log(DictInfo.DictInfo.id, "id do cabra")
|
||||
|
||||
GetPatientByID(DictInfo.DictInfo.id, authHeader)
|
||||
.then((data) => {
|
||||
console.log(data[0], "paciente vindo da API");
|
||||
setPatientPUT(data[0]); // supabase retorna array
|
||||
})
|
||||
.catch((err) => console.error("Erro ao buscar paciente:", err));
|
||||
|
||||
|
||||
|
||||
setPatientPUT(DictInfo)
|
||||
}, [DictInfo])
|
||||
|
||||
|
||||
const HandlePutPatient = async () => {
|
||||
const authHeader = getAuthorizationHeader()
|
||||
|
||||
@ -44,9 +25,9 @@ const HandlePutPatient = async () => {
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
|
||||
var raw = JSON.stringify(PatientToPUT);
|
||||
var raw = JSON.stringify({...PatientToPUT, bmi:Number(PatientToPUT) || null});
|
||||
|
||||
console.log("Enviando paciente para atualização:", PatientToPUT);
|
||||
console.log("Enviando atualização:", PatientToPUT);
|
||||
|
||||
var requestOptions = {
|
||||
method: 'PATCH',
|
||||
@ -55,25 +36,10 @@ const HandlePutPatient = async () => {
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${PatientID}`,requestOptions);
|
||||
console.log(response)
|
||||
|
||||
|
||||
if(response.ok === false){
|
||||
console.error("Erro ao atualizar paciente:");
|
||||
}
|
||||
else{
|
||||
console.log("ATUALIZADO COM SUCESSO");
|
||||
navigate('/secretaria/pacientes')
|
||||
}
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error("Erro ao atualizar paciente:", error);
|
||||
throw error;
|
||||
}
|
||||
|
||||
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients?id=eq.${PatientToPUT.id}`,requestOptions)
|
||||
.then(response => response.json)
|
||||
.then(result => console.log(result))
|
||||
.catch(console.log("erro"))
|
||||
|
||||
};
|
||||
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { FaUser, FaUserPlus, FaCalendarAlt, FaCalendarCheck } from 'react-icons/fa';
|
||||
import { useAuth } from '../components/utils/AuthProvider';
|
||||
import API_KEY from '../components/utils/apiKeys';
|
||||
import './style/Inicio.css';
|
||||
|
||||
import { Link } from 'react-router-dom';
|
||||
@ -8,19 +10,142 @@ import { Link } from 'react-router-dom';
|
||||
function Inicio() {
|
||||
|
||||
const navigate = useNavigate();
|
||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||
const [pacientes, setPacientes] = useState([]);
|
||||
const [medicos, setMedicos] = useState([]);
|
||||
const [agendamentos, setAgendamentos] = useState([]);
|
||||
const [agendamentosComPacientes, setAgendamentosComPacientes] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPacientes = async () => {
|
||||
try {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
const myHeaders = new Headers();
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
|
||||
const requestOptions = {
|
||||
method: 'GET',
|
||||
headers: myHeaders,
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setPacientes(data);
|
||||
console.log('Pacientes carregados:', data.length);
|
||||
} else {
|
||||
console.error(' Erro ao buscar pacientes:', response.status);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(' Erro ao buscar pacientes:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchMedicos = async () => {
|
||||
try {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
const myHeaders = new Headers();
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
|
||||
const requestOptions = {
|
||||
method: 'GET',
|
||||
headers: myHeaders,
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setMedicos(data);
|
||||
console.log(' Médicos carregados:', data.length);
|
||||
} else {
|
||||
console.error('Erro ao buscar médicos:', response.status);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(' Erro ao buscar médicos:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAgendamentos = async () => {
|
||||
try {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
const myHeaders = new Headers();
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
|
||||
const requestOptions = {
|
||||
method: 'GET',
|
||||
headers: myHeaders,
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setAgendamentos(data);
|
||||
console.log(' Agendamentos carregados:', data.length);
|
||||
} else {
|
||||
console.error(' Erro ao buscar agendamentos:', response.status);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(' Erro ao buscar agendamentos:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isAuthenticated) {
|
||||
fetchPacientes();
|
||||
fetchMedicos();
|
||||
fetchAgendamentos();
|
||||
}
|
||||
}, [isAuthenticated, getAuthorizationHeader]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if (agendamentos.length > 0 && pacientes.length > 0 && medicos.length > 0) {
|
||||
const agendamentosComNomes = agendamentos.map(agendamento => {
|
||||
const paciente = pacientes.find(p => p.id === agendamento.patient_id);
|
||||
const medico = medicos.find(m => m.id === agendamento.doctor_id);
|
||||
return {
|
||||
...agendamento,
|
||||
nomePaciente: paciente?.full_name || 'Paciente não encontrado',
|
||||
nomeMedico: medico?.full_name || 'Médico não encontrado',
|
||||
especialidadeMedico: medico?.specialty || ''
|
||||
};
|
||||
});
|
||||
setAgendamentosComPacientes(agendamentosComNomes);
|
||||
}
|
||||
}, [agendamentos, pacientes, medicos]);
|
||||
|
||||
const totalPacientes = pacientes.length;
|
||||
const novosEsseMes = pacientes.filter(p => p.createdAt && new Date(p.createdAt).getMonth() === new Date().getMonth()).length;
|
||||
const novosEsseMes = pacientes.filter(p => p.created_at && new Date(p.created_at).getMonth() === new Date().getMonth()).length;
|
||||
|
||||
const hoje = new Date();
|
||||
const agendamentosDoDia = agendamentos.filter(
|
||||
a => a.data && new Date(a.data).getDate() === hoje.getDate()
|
||||
);
|
||||
hoje.setHours(0, 0, 0, 0);
|
||||
|
||||
const agendamentosDoDia = agendamentosComPacientes.filter(a => {
|
||||
if (!a.scheduled_at) return false;
|
||||
const dataAgendamento = new Date(a.scheduled_at);
|
||||
dataAgendamento.setHours(0, 0, 0, 0);
|
||||
return dataAgendamento.getTime() === hoje.getTime();
|
||||
});
|
||||
|
||||
const agendamentosHoje = agendamentosDoDia.length;
|
||||
|
||||
|
||||
const pendencias = agendamentos.filter(a => a.status === 'pending' || a.status === 'scheduled').length;
|
||||
|
||||
return (
|
||||
<div className="dashboard-container">
|
||||
<div className="dashboard-header">
|
||||
@ -57,7 +182,7 @@ function Inicio() {
|
||||
<div className="stat-card">
|
||||
<div className="stat-info">
|
||||
<span className="stat-label">PENDÊNCIAS</span>
|
||||
<span className="stat-value">0</span>
|
||||
<span className="stat-value">{loading ? '...' : pendencias}</span>
|
||||
</div>
|
||||
<div className="stat-icon-wrapper orange"><FaCalendarAlt className="stat-icon" /></div>
|
||||
</div>
|
||||
@ -92,14 +217,54 @@ function Inicio() {
|
||||
|
||||
<div className="appointments-section">
|
||||
<h2>Próximos Agendamentos</h2>
|
||||
{agendamentosHoje > 0 ? (
|
||||
<div>
|
||||
{agendamentosDoDia.map(agendamento => (
|
||||
{loading ? (
|
||||
<div className="no-appointments-content">
|
||||
<p>Carregando agendamentos...</p>
|
||||
</div>
|
||||
) : agendamentosHoje > 0 ? (
|
||||
<div className="agendamentos-list">
|
||||
{agendamentosDoDia.slice(0, 5).map(agendamento => (
|
||||
<div key={agendamento.id} className="agendamento-item">
|
||||
<p>{agendamento.nomePaciente}</p>
|
||||
<p>{new Date(agendamento.data).toLocaleTimeString()}</p>
|
||||
<div className="agendamento-info">
|
||||
<div className="agendamento-time-date">
|
||||
<p className="agendamento-hora">
|
||||
{new Date(agendamento.scheduled_at).toLocaleTimeString('pt-BR', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</p>
|
||||
<p className="agendamento-data">
|
||||
{new Date(agendamento.scheduled_at).toLocaleDateString('pt-BR', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<div className="agendamento-detalhes">
|
||||
<p className="agendamento-paciente">
|
||||
<strong>Paciente:</strong> {agendamento.nomePaciente}
|
||||
</p>
|
||||
<p className="agendamento-medico">
|
||||
<strong>Dr(a):</strong> {agendamento.nomeMedico}
|
||||
{agendamento.especialidadeMedico && ` - ${agendamento.especialidadeMedico}`}
|
||||
</p>
|
||||
</div>
|
||||
<span className={`agendamento-status status-${agendamento.status}`}>
|
||||
{agendamento.status === 'scheduled' ? 'Agendado' :
|
||||
agendamento.status === 'completed' ? 'Concluído' :
|
||||
agendamento.status === 'pending' ? 'Pendente' :
|
||||
agendamento.status === 'cancelled' ? 'Cancelado' :
|
||||
agendamento.status === 'requested' ? '' : agendamento.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{agendamentosHoje > 5 && (
|
||||
<button className="view-all-button" onClick={() => navigate('/secretaria/agendamento')}>
|
||||
Ver todos os {agendamentosHoje} agendamentos
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="no-appointments-content">
|
||||
|
||||
@ -118,6 +118,7 @@ function Login({ onEnterSystem }) {
|
||||
if (data.access_token) {
|
||||
const UserData = await UserInfos(`bearer ${data.access_token}`);
|
||||
console.log(UserData, "Dados do usuário");
|
||||
localStorage.setItem("roleUser", UserData.roles)
|
||||
|
||||
if (UserData?.roles?.includes("admin")) {
|
||||
navigate(`/admin/`);
|
||||
@ -131,7 +132,7 @@ function Login({ onEnterSystem }) {
|
||||
navigate(`/paciente/`);
|
||||
}
|
||||
}else{
|
||||
console.log("ERROROROROROOR")
|
||||
console.log("Erro na tentativa de login")
|
||||
setShowCabecalho(true)
|
||||
}
|
||||
} else {
|
||||
|
||||
273
src/pages/inicioPaciente.jsx
Normal file
273
src/pages/inicioPaciente.jsx
Normal file
@ -0,0 +1,273 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { FaCalendarAlt, FaCalendarCheck, FaFileAlt, FaUserMd, FaClock } from 'react-icons/fa';
|
||||
import { useAuth } from '../components/utils/AuthProvider';
|
||||
import API_KEY from '../components/utils/apiKeys';
|
||||
import './style/inicioPaciente.css';
|
||||
|
||||
function InicioPaciente() {
|
||||
const navigate = useNavigate();
|
||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||
const [agendamentos, setAgendamentos] = useState([]);
|
||||
const [medicos, setMedicos] = useState([]);
|
||||
const [agendamentosComMedicos, setAgendamentosComMedicos] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [pacienteId, setPacienteId] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const userId = localStorage.getItem('user_id') || localStorage.getItem('patient_id');
|
||||
setPacienteId(userId);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchMedicos = async () => {
|
||||
try {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
const myHeaders = new Headers();
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
|
||||
const requestOptions = {
|
||||
method: 'GET',
|
||||
headers: myHeaders,
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setMedicos(data);
|
||||
console.log(' Médicos carregados:', data.length);
|
||||
} else {
|
||||
console.error(' Erro ao buscar médicos:', response.status);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(' Erro ao buscar médicos:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchAgendamentos = async () => {
|
||||
try {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
const myHeaders = new Headers();
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
|
||||
const requestOptions = {
|
||||
method: 'GET',
|
||||
headers: myHeaders,
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
// Buscar todos os agendamentos (depois filtraremos pelo paciente)
|
||||
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments", requestOptions);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setAgendamentos(data);
|
||||
console.log(' Agendamentos carregados:', data.length);
|
||||
} else {
|
||||
console.error(' Erro ao buscar agendamentos:', response.status);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(' Erro ao buscar agendamentos:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (isAuthenticated) {
|
||||
fetchMedicos();
|
||||
fetchAgendamentos();
|
||||
}
|
||||
}, [isAuthenticated, getAuthorizationHeader]);
|
||||
|
||||
useEffect(() => {
|
||||
if (agendamentos.length > 0 && medicos.length > 0) {
|
||||
const agendamentosComNomes = agendamentos.map(agendamento => {
|
||||
const medico = medicos.find(m => m.id === agendamento.doctor_id);
|
||||
return {
|
||||
...agendamento,
|
||||
nomeMedico: medico?.full_name || 'Médico não encontrado',
|
||||
especialidadeMedico: medico?.specialty || ''
|
||||
};
|
||||
});
|
||||
setAgendamentosComMedicos(agendamentosComNomes);
|
||||
}
|
||||
}, [agendamentos, medicos]);
|
||||
|
||||
const meusAgendamentos = agendamentosComMedicos.filter(a =>
|
||||
pacienteId ? a.patient_id === pacienteId : true
|
||||
);
|
||||
|
||||
const hoje = new Date();
|
||||
hoje.setHours(0, 0, 0, 0);
|
||||
|
||||
const agendamentosFuturos = meusAgendamentos.filter(a => {
|
||||
if (!a.scheduled_at) return false;
|
||||
const dataAgendamento = new Date(a.scheduled_at);
|
||||
return dataAgendamento >= hoje && a.status !== 'cancelled' && a.status !== 'completed';
|
||||
}).sort((a, b) => new Date(a.scheduled_at) - new Date(b.scheduled_at));
|
||||
|
||||
const proximasConsultas = agendamentosFuturos.length;
|
||||
const consultasHoje = agendamentosFuturos.filter(a => {
|
||||
const dataAgendamento = new Date(a.scheduled_at);
|
||||
dataAgendamento.setHours(0, 0, 0, 0);
|
||||
return dataAgendamento.getTime() === hoje.getTime();
|
||||
}).length;
|
||||
|
||||
const consultasPendentes = meusAgendamentos.filter(a =>
|
||||
a.status === 'pending' || a.status === 'requested'
|
||||
).length;
|
||||
|
||||
const historicoConsultas = meusAgendamentos.filter(a =>
|
||||
a.status === 'completed'
|
||||
).length;
|
||||
|
||||
return (
|
||||
<div className="dashboard-paciente-container">
|
||||
<div className="dashboard-paciente-header">
|
||||
<h1>Bem-vindo ao MediConnect</h1>
|
||||
<p>Gerencie suas consultas e acompanhe seu histórico médico</p>
|
||||
</div>
|
||||
|
||||
<div className="stats-paciente-grid">
|
||||
<div className="stat-paciente-card">
|
||||
<div className="stat-paciente-info">
|
||||
<span className="stat-paciente-label">Próximas Consultas</span>
|
||||
<span className="stat-paciente-value">{proximasConsultas}</span>
|
||||
</div>
|
||||
<div className="stat-paciente-icon-wrapper blue">
|
||||
<FaCalendarAlt className="stat-paciente-icon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="stat-paciente-card">
|
||||
<div className="stat-paciente-info">
|
||||
<span className="stat-paciente-label">Consultas Hoje</span>
|
||||
<span className="stat-paciente-value">{consultasHoje}</span>
|
||||
</div>
|
||||
<div className="stat-paciente-icon-wrapper green">
|
||||
<FaCalendarCheck className="stat-paciente-icon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="stat-paciente-card">
|
||||
<div className="stat-paciente-info">
|
||||
<span className="stat-paciente-label">Aguardando</span>
|
||||
<span className="stat-paciente-value">{loading ? '...' : consultasPendentes}</span>
|
||||
</div>
|
||||
<div className="stat-paciente-icon-wrapper purple">
|
||||
<FaClock className="stat-paciente-icon" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="stat-paciente-card">
|
||||
<div className="stat-paciente-info">
|
||||
<span className="stat-paciente-label">Realizadas</span>
|
||||
<span className="stat-paciente-value">{historicoConsultas}</span>
|
||||
</div>
|
||||
<div className="stat-paciente-icon-wrapper orange">
|
||||
<FaFileAlt className="stat-paciente-icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="quick-actions-paciente">
|
||||
<h2>Acesso Rápido</h2>
|
||||
<div className="actions-paciente-grid">
|
||||
<div className="action-paciente-button" onClick={() => navigate('/paciente/agendamento')}>
|
||||
<FaCalendarCheck className="action-paciente-icon" />
|
||||
<div className="action-paciente-info">
|
||||
<span className="action-paciente-title">Minhas Consultas</span>
|
||||
<span className="action-paciente-desc">Ver todos os agendamentos</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="action-paciente-button" onClick={() => navigate('/paciente/laudo')}>
|
||||
<FaFileAlt className="action-paciente-icon" />
|
||||
<div className="action-paciente-info">
|
||||
<span className="action-paciente-title">Meus Laudos</span>
|
||||
<span className="action-paciente-desc">Acessar documentos médicos</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="action-paciente-button" onClick={() => navigate('/paciente/agendamento')}>
|
||||
<FaUserMd className="action-paciente-icon" />
|
||||
<div className="action-paciente-info">
|
||||
<span className="action-paciente-title">Meus Médicos</span>
|
||||
<span className="action-paciente-desc">Ver histórico de atendimentos</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="proximas-consultas-section">
|
||||
<h2>Próximas Consultas</h2>
|
||||
{loading ? (
|
||||
<div className="no-consultas-content">
|
||||
<p>Carregando suas consultas...</p>
|
||||
</div>
|
||||
) : agendamentosFuturos.length > 0 ? (
|
||||
<div className="consultas-paciente-list">
|
||||
{agendamentosFuturos.slice(0, 3).map(agendamento => (
|
||||
<div key={agendamento.id} className="consulta-paciente-item">
|
||||
<div className="consulta-paciente-info">
|
||||
<div className="consulta-paciente-time-date">
|
||||
<p className="consulta-paciente-hora">
|
||||
{new Date(agendamento.scheduled_at).toLocaleTimeString('pt-BR', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</p>
|
||||
<p className="consulta-paciente-data">
|
||||
{new Date(agendamento.scheduled_at).toLocaleDateString('pt-BR', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<div className="consulta-paciente-detalhes">
|
||||
<p className="consulta-paciente-medico">
|
||||
<FaUserMd className="consulta-icon" />
|
||||
<strong>Dr(a):</strong> {agendamento.nomeMedico}
|
||||
</p>
|
||||
{agendamento.especialidadeMedico && (
|
||||
<p className="consulta-paciente-especialidade">
|
||||
{agendamento.especialidadeMedico}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<span className={`consulta-paciente-status status-${agendamento.status}`}>
|
||||
{agendamento.status === 'scheduled' ? 'Confirmado' :
|
||||
agendamento.status === 'pending' ? 'Aguardando' :
|
||||
agendamento.status === 'requested' ? 'Solicitado' : agendamento.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{agendamentosFuturos.length > 3 && (
|
||||
<button className="view-all-paciente-button" onClick={() => navigate('/paciente/agendamento')}>
|
||||
Ver todas as consultas
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="no-consultas-content">
|
||||
<FaCalendarCheck className="no-consultas-icon" />
|
||||
<p>Você não tem consultas agendadas</p>
|
||||
<button className="agendar-paciente-button" onClick={() => navigate('/paciente/agendamento/criar')}>
|
||||
Agendar Consulta
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default InicioPaciente;
|
||||
@ -229,3 +229,191 @@ html[data-bs-theme="dark"] .manage-button {
|
||||
html[data-bs-theme="dark"] .manage-button:hover {
|
||||
background-color: #2323b0;
|
||||
}
|
||||
|
||||
/* Lista de Agendamentos */
|
||||
.agendamentos-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.agendamento-item {
|
||||
background-color: #f9fafb;
|
||||
border-left: 4px solid #5d5dff;
|
||||
border-radius: 8px;
|
||||
padding: 1rem 1.25rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.agendamento-item:hover {
|
||||
background-color: #f0f2f5;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.agendamento-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.agendamento-time-date {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
.agendamento-hora {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: #5d5dff;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.agendamento-data {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
color: #888;
|
||||
margin: 0;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.agendamento-detalhes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.agendamento-paciente,
|
||||
.agendamento-medico {
|
||||
font-size: 0.95rem;
|
||||
color: #444;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.agendamento-paciente strong,
|
||||
.agendamento-medico strong {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.agendamento-status {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.agendamento-status.status-scheduled {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.agendamento-status.status-completed {
|
||||
background-color: #e8f5e9;
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
.agendamento-status.status-pending {
|
||||
background-color: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
.agendamento-status.status-cancelled {
|
||||
background-color: #ffebee;
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.agendamento-status.status-requested {
|
||||
background-color: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
}
|
||||
|
||||
.view-all-button {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
background-color: #f0f2f5;
|
||||
color: #5d5dff;
|
||||
border: 2px solid #5d5dff;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.view-all-button:hover {
|
||||
background-color: #5d5dff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Dark Mode - Agendamentos */
|
||||
html[data-bs-theme="dark"] .agendamento-item {
|
||||
background-color: #2a2a2a;
|
||||
border-left-color: #6c6cff;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-item:hover {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-hora {
|
||||
color: #8888ff;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-data {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-paciente,
|
||||
html[data-bs-theme="dark"] .agendamento-medico {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-paciente strong,
|
||||
html[data-bs-theme="dark"] .agendamento-medico strong {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-status.status-scheduled {
|
||||
background-color: #1a3a52;
|
||||
color: #64b5f6;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-status.status-completed {
|
||||
background-color: #1b3a1f;
|
||||
color: #81c784;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-status.status-pending {
|
||||
background-color: #3d2817;
|
||||
color: #ffb74d;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-status.status-cancelled {
|
||||
background-color: #3d1f1f;
|
||||
color: #e57373;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendamento-status.status-requested {
|
||||
background-color: #2d1f3d;
|
||||
color: #ba68c8;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .view-all-button {
|
||||
background-color: #2a2a2a;
|
||||
color: #8888ff;
|
||||
border-color: #6c6cff;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .view-all-button:hover {
|
||||
background-color: #6c6cff;
|
||||
color: #fff;
|
||||
}
|
||||
454
src/pages/style/inicioPaciente.css
Normal file
454
src/pages/style/inicioPaciente.css
Normal file
@ -0,0 +1,454 @@
|
||||
.dashboard-paciente-container {
|
||||
padding: 2rem;
|
||||
background-color: #f7f9fc;
|
||||
flex-grow: 1;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Header - Paciente */
|
||||
.dashboard-paciente-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.dashboard-paciente-header h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.dashboard-paciente-header p {
|
||||
font-size: 1rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Estatísticas - Paciente */
|
||||
.stats-paciente-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.stat-paciente-card {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.stat-paciente-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stat-paciente-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-paciente-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
margin-bottom: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.stat-paciente-value {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.stat-paciente-icon-wrapper {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.stat-paciente-icon {
|
||||
font-size: 1.4rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Cores dos ícones - Paciente */
|
||||
.stat-paciente-icon-wrapper.blue { background-color: #5d5dff; }
|
||||
.stat-paciente-icon-wrapper.green { background-color: #30d158; }
|
||||
.stat-paciente-icon-wrapper.purple { background-color: #a272ff; }
|
||||
.stat-paciente-icon-wrapper.orange { background-color: #f1952e; }
|
||||
|
||||
/* Ações Rápidas - Paciente */
|
||||
.quick-actions-paciente h2 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.actions-paciente-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.action-paciente-button {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.action-paciente-button:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.action-paciente-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-right: 1.2rem;
|
||||
color: #5d5dff;
|
||||
}
|
||||
|
||||
.action-paciente-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.action-paciente-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
color: #444;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.action-paciente-desc {
|
||||
font-size: 0.85rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* Próximas Consultas - Paciente */
|
||||
.proximas-consultas-section {
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.proximas-consultas-section h2 {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Lista de Consultas - Paciente */
|
||||
.consultas-paciente-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.consulta-paciente-item {
|
||||
background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
|
||||
border-left: 5px solid #5d5dff;
|
||||
border-radius: 10px;
|
||||
padding: 1.25rem 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.consulta-paciente-item:hover {
|
||||
background: linear-gradient(135deg, #f0f2f5 0%, #fafbfc 100%);
|
||||
transform: translateX(8px);
|
||||
box-shadow: 0 4px 12px rgba(93, 93, 255, 0.15);
|
||||
}
|
||||
|
||||
.consulta-paciente-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.consulta-paciente-time-date {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-width: 90px;
|
||||
padding: 0.5rem;
|
||||
background-color: #f0f2ff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.consulta-paciente-hora {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: #5d5dff;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.consulta-paciente-data {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: #7777aa;
|
||||
margin: 0;
|
||||
margin-top: 0.25rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.consulta-paciente-detalhes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.consulta-paciente-medico {
|
||||
font-size: 1rem;
|
||||
color: #444;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.consulta-icon {
|
||||
color: #5d5dff;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.consulta-paciente-medico strong {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.consulta-paciente-especialidade {
|
||||
font-size: 0.85rem;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
margin-left: 1.6rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.consulta-paciente-status {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 20px;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.consulta-paciente-status.status-scheduled {
|
||||
background-color: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.consulta-paciente-status.status-pending {
|
||||
background-color: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
.consulta-paciente-status.status-requested {
|
||||
background-color: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
}
|
||||
|
||||
/* Sem Consultas */
|
||||
.no-consultas-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
}
|
||||
|
||||
.no-consultas-icon {
|
||||
font-size: 4rem;
|
||||
color: #bbb;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.no-consultas-content p {
|
||||
font-size: 1.1rem;
|
||||
color: #666;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.agendar-paciente-button,
|
||||
.view-all-paciente-button {
|
||||
background-color: #5d5dff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 0.875rem 2rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.agendar-paciente-button:hover,
|
||||
.view-all-paciente-button:hover {
|
||||
background-color: #4444ff;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(93, 93, 255, 0.3);
|
||||
}
|
||||
|
||||
.view-all-paciente-button {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
background-color: #f0f2f5;
|
||||
color: #5d5dff;
|
||||
border: 2px solid #5d5dff;
|
||||
}
|
||||
|
||||
.view-all-paciente-button:hover {
|
||||
background-color: #5d5dff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Dark Mode - Paciente */
|
||||
html[data-bs-theme="dark"] .dashboard-paciente-container {
|
||||
background-color: #121212;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .dashboard-paciente-header h1,
|
||||
html[data-bs-theme="dark"] .dashboard-paciente-header p,
|
||||
html[data-bs-theme="dark"] .quick-actions-paciente h2,
|
||||
html[data-bs-theme="dark"] .proximas-consultas-section h2,
|
||||
html[data-bs-theme="dark"] .action-paciente-title,
|
||||
html[data-bs-theme="dark"] .stat-paciente-value {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .stat-paciente-card,
|
||||
html[data-bs-theme="dark"] .action-paciente-button,
|
||||
html[data-bs-theme="dark"] .proximas-consultas-section {
|
||||
background-color: #1e1e1e;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .stat-paciente-label,
|
||||
html[data-bs-theme="dark"] .action-paciente-desc,
|
||||
html[data-bs-theme="dark"] .no-consultas-content p {
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-item {
|
||||
background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
|
||||
border-left-color: #6c6cff;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-item:hover {
|
||||
background: linear-gradient(135deg, #333 0%, #252525 100%);
|
||||
box-shadow: 0 4px 12px rgba(108, 108, 255, 0.2);
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-time-date {
|
||||
background-color: #2a2a3a;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-hora {
|
||||
color: #8888ff;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-data {
|
||||
color: #9999cc;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-medico,
|
||||
html[data-bs-theme="dark"] .consulta-paciente-especialidade {
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-medico strong {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-icon,
|
||||
html[data-bs-theme="dark"] .action-paciente-icon {
|
||||
color: #8888ff;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-status.status-scheduled {
|
||||
background-color: #1a3a52;
|
||||
color: #64b5f6;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-status.status-pending {
|
||||
background-color: #3d2817;
|
||||
color: #ffb74d;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .consulta-paciente-status.status-requested {
|
||||
background-color: #2d1f3d;
|
||||
color: #ba68c8;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .no-consultas-icon {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendar-paciente-button {
|
||||
background-color: #6c6cff;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .agendar-paciente-button:hover {
|
||||
background-color: #5555dd;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .view-all-paciente-button {
|
||||
background-color: #2a2a2a;
|
||||
color: #8888ff;
|
||||
border-color: #6c6cff;
|
||||
}
|
||||
|
||||
html[data-bs-theme="dark"] .view-all-paciente-button:hover {
|
||||
background-color: #6c6cff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Responsivo */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-paciente-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.stats-paciente-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.actions-paciente-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.consulta-paciente-info {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.consulta-paciente-time-date {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
@ -14,11 +14,14 @@ import DoctorEditPage from "../../pages/DoctorEditPage";
|
||||
import UserDashboard from '../../PagesAdm/gestao.jsx';
|
||||
import PainelAdministrativo from '../../PagesAdm/painel.jsx';
|
||||
import admItems from "../../data/sidebar-items-adm.json";
|
||||
|
||||
import {useState} from "react"
|
||||
|
||||
// ...restante do código...
|
||||
function Perfiladm() {
|
||||
return (
|
||||
|
||||
const [DictInfo, setDictInfo] = useState({})
|
||||
|
||||
return (
|
||||
|
||||
<div id="app" className="active">
|
||||
<Sidebar menuItems={admItems} />
|
||||
@ -27,12 +30,12 @@ function Perfiladm() {
|
||||
<Route path="/" element={<UserDashboard />} />
|
||||
<Route path="/pacientes/cadastro" element={<PatientCadastroManager />} />
|
||||
<Route path="/medicos/cadastro" element={<DoctorCadastroManager />} />
|
||||
<Route path="/pacientes" element={<TablePaciente />} />
|
||||
<Route path="/medicos" element={<DoctorTable />} />
|
||||
<Route path="/pacientes/:id" element={<Details />} />
|
||||
<Route path="/pacientes/:id/edit" element={<EditPage />} />
|
||||
<Route path="/medicos/:id" element={<DoctorDetails />} />
|
||||
<Route path="/medicos/:id/edit" element={<DoctorEditPage />} />
|
||||
<Route path="/pacientes" element={<TablePaciente setDictInfo={setDictInfo}/>} />
|
||||
<Route path="/medicos" element={<DoctorTable setDictInfo={setDictInfo} />} />
|
||||
<Route path="/pacientes/details" element={<Details DictInfo={DictInfo} />} />
|
||||
<Route path="/pacientes/edit" element={<EditPage DictInfo={DictInfo} />} />
|
||||
<Route path="/medicos/details" element={<DoctorDetails DictInfo={DictInfo}/>} />
|
||||
<Route path="/medicos/edit" element={<DoctorEditPage DictInfo={DictInfo}/>} />
|
||||
<Route path="/agendamento" element={<Agendamento />} />
|
||||
<Route path="/laudo" element={<LaudoManager />} />
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@ import { Routes, Route } from "react-router-dom";
|
||||
import Sidebar from "../../components/Sidebar";
|
||||
import PacienteItems from "../../data/sidebar-items-paciente.json";
|
||||
import { useState } from "react";
|
||||
import InicioPaciente from "../../pages/inicioPaciente";
|
||||
import LaudoManager from "../../pages/LaudoManager";
|
||||
import ConsultaCadastroManager from "../../PagesPaciente/ConsultaCadastroManager";
|
||||
import ConsultasPaciente from "../../PagesPaciente/ConsultasPaciente";
|
||||
@ -16,7 +17,7 @@ const [dadosConsulta, setConsulta] = useState({})
|
||||
|
||||
<div id="main">
|
||||
<Routes>
|
||||
<Route path="/" element={<LaudoManager />} />
|
||||
<Route path="/" element={<InicioPaciente />} />
|
||||
<Route path="agendamento" element={<ConsultasPaciente setConsulta={setConsulta}/>} />
|
||||
<Route path="agendamento/criar" element={<ConsultaCadastroManager />} />
|
||||
<Route path="agendamento/edit" element={<ConsultaEditPage dadosConsulta={dadosConsulta} />} />
|
||||
|
||||
@ -31,11 +31,11 @@ function PerfilSecretaria({ onLogout }) {
|
||||
<Route path="pacientes/cadastro" element={<PatientCadastroManager />} />
|
||||
<Route path="medicos/cadastro" element={<DoctorCadastroManager />} />
|
||||
<Route path="pacientes" element={<TablePaciente setDictInfo={setDictInfo}/>} />
|
||||
<Route path="medicos" element={<DoctorTable />} />
|
||||
<Route path="medicos" element={<DoctorTable setDictInfo={setDictInfo} />} />
|
||||
<Route path="pacientes/details" element={<Details DictInfo={DictInfo}/>} />
|
||||
<Route path="pacientes/edit" element={<EditPage DictInfo={DictInfo}/>} />
|
||||
<Route path="medicos/:id" element={<DoctorDetails />} />
|
||||
<Route path="medicos/:id/edit" element={<DoctorEditPage />} />
|
||||
<Route path="medicos/details" element={<DoctorDetails doctor={DictInfo} />} />
|
||||
<Route path="medicos/edit" element={<DoctorEditPage DictInfo={DictInfo} />} />
|
||||
<Route path="agendamento" element={<Agendamento setDictInfo={setDictInfo}/>} />
|
||||
<Route path="agendamento/edit" element={<AgendamentoEditPage setDictInfo={setDictInfo} DictInfo={DictInfo}/>} />
|
||||
<Route path="laudo" element={<LaudoManager />} />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user