GilenoNeto901/riseup-squad23
1
0
Fork 0
forked from RiseUP/riseup-squad23
Code Pull Requests Activity

Disponibilidades Atualizadas

Browse Source
This commit is contained in:
pedrofedericoo 2025-11-20 14:58:38 -03:00
parent 63121d6702
commit 5aaaf7d3e5
14 changed files with 577 additions and 346 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
package-lock.json generated
View File

@ -31871,23 +31871,6 @@
"node": ">= 0.8.0"
}
},
"node_modules/prettier": {
"version": "2.8.8",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
"license": "MIT",
"optional": true,
"peer": true,
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/pretty-bytes": {
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz",
@ -33013,20 +32996,6 @@
"node": ">=14.0.0"
}
},
"node_modules/react-scripts/node_modules/yaml": {
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
"integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
"license": "ISC",
"optional": true,
"peer": true,
"bin": {
"yaml": "bin.mjs"
},
"engines": {
"node": ">= 14.6"
}
},
"node_modules/react-toastify": {
"version": "11.0.5",
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",

11
src/components/doctors/DoctorForm.css
View File

@ -199,3 +199,14 @@
padding: 0.6rem 1.2rem;
}
}
@media (max-width: 576px) {
.doctor-form-container { padding: 0.75rem; }
.doctor-form-title { font-size: 1.75rem; }
.form-section { padding: 0.75rem; }
.section-header { font-size: 1.25rem; }
.form-label { font-size: 1rem; }
.form-control-custom { font-size: 1rem; }
.btns-container { display: flex; flex-direction: column; gap: 8px; }
.btn-submit, .btn-cancel { width: 100%; margin-right: 0; }
}

23
src/components/doctors/DoctorForm.jsx
View File

@ -135,14 +135,11 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
}
};
const handleAvailabilityUpdate = useCallback((newAvailability) => {
const handleAvailabilityUpdate = useCallback((newAvailability) => {
setFormData((prev) => {
if (JSON.stringify(prev.availability) !== JSON.stringify(newAvailability)) {
return { ...prev, availability: newAvailability };
}
return prev;
});
}, []);
}, [setFormData]);
const handleCepBlur = async () => {
const cep = formData.cep?.replace(/\D/g, "");
@ -326,17 +323,9 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
}
try {
const savedDoctor = await onSave({ ...formData });
if (formData.availability && formData.availability.length > 0 && savedDoctor.id) {
if (formData.availabilityId) {
await handlePatchAvailability(formData.availabilityId, formData.availability);
} else {
await handleCreateAvailability(savedDoctor.id, formData.availability);
}
}
// Chama a função onSave (handleSave no DoctorEditPage) com o formData completo.
// A lógica de salvamento do médico e da disponibilidade é responsabilidade do componente pai.
await onSave({ ...formData });
} catch (error) {
console.error("Erro ao salvar médico ou disponibilidade:", error);
@ -760,7 +749,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
Defina seus horários de atendimento para cada dia da semana.
Marque um dia para começar a adicionar blocos de tempo.
</p>
<HorariosDisponibilidade
<HorariosDisponibilidade
initialAvailability={formData.availability}
onUpdate={handleAvailabilityUpdate}
/>

14
src/components/doctors/HorariosDisponibilidade.css
View File

@ -152,3 +152,17 @@
.btn-add:hover {
background-color: #059669;
}
@media (max-width: 768px) {
.horarios-container { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
.horarios-container { grid-template-columns: 1fr; gap: 10px; }
.day-card { height: auto; }
.day-header label { font-size: 13px; }
.time-inputs { flex-direction: column; }
.input-wrapper input { font-size: 12px; }
.btn-add { font-size: 12px; }
.btn-remove { font-size: 12px; }
}

36
src/components/doctors/HorariosDisponibilidade.jsx
View File

@ -10,13 +10,13 @@ const initialBlockTemplate = {
};
const emptyAvailabilityTemplate = [
{ dia: "Segunda-feira", isChecked: false, blocos: [] },
{ dia: "Terça-feira", isChecked: false, blocos: [] },
{ dia: "Quarta-feira", isChecked: false, blocos: [] },
{ dia: "Quinta-feira", isChecked: false, blocos: [] },
{ dia: "Sexta-feira", isChecked: false, blocos: [] },
{ dia: "Sábado", isChecked: false, blocos: [] },
{ dia: "Domingo", isChecked: false, blocos: [] },
{ dia: "Domingo", weekday: 0, isChecked: false, blocos: [] },
{ dia: "Segunda-feira", weekday: 1, isChecked: false, blocos: [] },
{ dia: "Terça-feira", weekday: 2, isChecked: false, blocos: [] },
{ dia: "Quarta-feira", weekday: 3, isChecked: false, blocos: [] },
{ dia: "Quinta-feira", weekday: 4, isChecked: false, blocos: [] },
{ dia: "Sexta-feira", weekday: 5, isChecked: false, blocos: [] },
{ dia: "Sábado", weekday: 6, isChecked: false, blocos: [] },
];
const HorariosDisponibilidade = ({
@ -35,10 +35,18 @@ const HorariosDisponibilidade = ({
}
}, [initialAvailability]);
useEffect(() => {
if (isFirstRun.current) {
isFirstRun.current = false;
return;
}
if (onUpdate) onUpdate(availability);
}, [availability, onUpdate]);
const handleDayCheck = useCallback((dayIndex, currentIsChecked) => {
const isChecked = !currentIsChecked;
setAvailability((prev) =>
prev.map((day, i) =>
setAvailability((prev) => {
const updated = prev.map((day, i) =>
i === dayIndex
? {
...day,
@ -56,8 +64,10 @@ const HorariosDisponibilidade = ({
: [],
}
: day
)
);
);
console.log('handleDayCheck - updated availability:', updated);
return updated;
});
}, []);
const handleAddBlock = useCallback((dayIndex) => {
@ -107,9 +117,7 @@ const HorariosDisponibilidade = ({
);
}, []);
const handleSave = useCallback(() => {
if (onUpdate) onUpdate(availability);
}, [availability, onUpdate]);
return (
<div className="horarios-container">

322
src/pages/DisponibilidadesDoctorPage.jsx
View File

@ -7,9 +7,29 @@ import "./style/DisponibilidadesDoctorPage.css";
const ENDPOINT = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
const DOCTORS_ENDPOINT = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors";
const diasDaSemana = ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"];
const diasDaSemana = [
"Domingo",
"Segunda",
"Terça",
"Quarta",
"Quinta",
"Sexta",
"Sábado"
];
const weekdayNumToStr = {
0: "sunday",
1: "monday",
2: "tuesday",
3: "wednesday",
4: "thursday",
5: "friday",
6: "saturday",
};
const weekdayStrToNum = Object.fromEntries(
Object.entries(weekdayNumToStr).map(([num, str]) => [str, Number(num)])
);
const DisponibilidadesDoctorPage = ( ) => {
const DisponibilidadesDoctorPage = () => {
const { getAuthorizationHeader } = useAuth();
const [disponibilidades, setDisponibilidades] = useState([]);
const [doctors, setDoctors] = useState([]);
@ -17,6 +37,7 @@ const DisponibilidadesDoctorPage = ( ) => {
const [editando, setEditando] = useState(null);
const [expandedDoctors, setExpandedDoctors] = useState({});
const [showSuggestions, setShowSuggestions] = useState(false);
const [availabilityEdit, setAvailabilityEdit] = useState([]);
const getHeaders = () => {
const myHeaders = new Headers();
@ -24,6 +45,7 @@ const DisponibilidadesDoctorPage = ( ) => {
if (authHeader) myHeaders.append("Authorization", authHeader);
myHeaders.append("Content-Type", "application/json");
if (API_KEY) myHeaders.append("apikey", API_KEY);
myHeaders.append("Prefer", "return=representation");
return myHeaders;
};
@ -31,15 +53,13 @@ const DisponibilidadesDoctorPage = ( ) => {
const fetchDoctors = async () => {
try {
const requestOptions = {
method: 'GET',
method: "GET",
headers: getHeaders(),
};
const response = await fetch(DOCTORS_ENDPOINT, requestOptions);
const result = await response.json();
setDoctors(Array.isArray(result) ? result : []);
} catch (error) {
console.error("Erro ao carregar médicos:", error);
setDoctors([]);
}
};
@ -49,16 +69,12 @@ const DisponibilidadesDoctorPage = ( ) => {
useEffect(() => {
const fetchDisponibilidades = async () => {
try {
const res = await fetch(ENDPOINT, {
method: "GET",
headers: getHeaders()
});
const res = await fetch(ENDPOINT, { method: "GET", headers: getHeaders() });
if (res.ok) {
const data = await res.json();
setDisponibilidades(Array.isArray(data) ? data : []);
}
} catch (error) {
console.error("Erro ao buscar disponibilidades:", error);
setDisponibilidades([]);
}
};
@ -66,35 +82,24 @@ const DisponibilidadesDoctorPage = ( ) => {
}, [getAuthorizationHeader]);
const toggleExpandDoctor = (doctorId) => {
setExpandedDoctors((prev) => ({
...prev,
[doctorId]: !prev[doctorId],
}));
setExpandedDoctors((prev) => ({ ...prev, [doctorId]: !prev[doctorId] }));
};
const salvarTodasDisponibilidades = async (doctorId, horariosAtualizados) => {
try {
const headers = getHeaders();
// 1. Obter as disponibilidades existentes para este médico
const existingDisponibilidadesRes = await fetch(`${ENDPOINT}?doctor_id=eq.${String(doctorId)}`, {
method: "GET",
headers,
});
const existingDisponibilidades = existingDisponibilidadesRes.ok ? await existingDisponibilidadesRes.json() : [];
const disponibilidadesParaManter = new Set();
const promises = [];
const currentIds = new Set();
for (const dia of horariosAtualizados) {
if (dia.isChecked && dia.blocos.length > 0) {
// Processar blocos de horários
for (const bloco of dia.blocos) {
const inicio = bloco.inicio.includes(":") ? bloco.inicio : bloco.inicio + ":00";
const termino = bloco.termino.includes(":") ? bloco.termino : bloco.termino + ":00";
const payload = {
doctor_id: doctorId,
weekday: dia.weekday,
weekday: weekdayNumToStr[dia.weekday],
start_time: inicio,
end_time: termino,
slot_minutes: bloco.slot_minutes || 30,
@ -103,82 +108,74 @@ const DisponibilidadesDoctorPage = ( ) => {
};
if (bloco.id && !bloco.isNew) {
// Atualizar disponibilidade existente
await fetch(`${ENDPOINT}?id=eq.${bloco.id}`, {
method: "PATCH",
headers,
body: JSON.stringify(payload),
});
disponibilidadesParaManter.add(bloco.id);
currentIds.add(bloco.id);
promises.push(
fetch(`${ENDPOINT}?id=eq.${bloco.id}`, {
method: "PATCH",
headers,
body: JSON.stringify(payload),
}).then(() => ({ type: 'PATCH', id: bloco.id }))
);
} else {
// Criar nova disponibilidade
const postRes = await fetch(ENDPOINT, {
method: "POST",
headers,
body: JSON.stringify(payload),
});
if (postRes.ok) {
const newDisp = await postRes.json();
// Adicionar o ID da nova disponibilidade para evitar exclusão acidental
if (newDisp && newDisp.length > 0) {
disponibilidadesParaManter.add(newDisp[0].id);
}
}
promises.push(
fetch(ENDPOINT, {
method: "POST",
headers,
body: JSON.stringify(payload),
})
.then(res => res.json())
.then(data => {
const createdItem = Array.isArray(data) ? data[0] : data;
return { type: 'POST', id: createdItem?.id };
})
);
}
}
}
}
// 2. Excluir disponibilidades antigas que não foram mantidas
const disponibilidadesParaExcluir = existingDisponibilidades.filter(
(disp) => !disponibilidadesParaManter.has(disp.id)
);
const results = await Promise.all(promises);
for (const disp of disponibilidadesParaExcluir) {
await fetch(`${ENDPOINT}?id=eq.${disp.id}`, {
method: "DELETE",
headers,
});
results.forEach(res => {
if (res.type === 'POST' && res.id) currentIds.add(res.id);
});
const existingRes = await fetch(`${ENDPOINT}?doctor_id=eq.${String(doctorId)}`, {
method: "GET", headers
});
if (existingRes.ok) {
const existingData = await existingRes.json();
const deletePromises = existingData
.filter(dbItem => !currentIds.has(dbItem.id))
.map(dbItem =>
fetch(`${ENDPOINT}?id=eq.${dbItem.id}`, { method: "DELETE", headers })
);
await Promise.all(deletePromises);
}
alert("Horários atualizados com sucesso!");
setEditando(null);
const res = await fetch(ENDPOINT, {
method: "GET",
headers: getHeaders()
});
setAvailabilityEdit([]);
const res = await fetch(ENDPOINT, { method: "GET", headers: getHeaders() });
if (res.ok) {
const data = await res.json();
setDisponibilidades(Array.isArray(data) ? data : []);
}
} catch (error) {
console.error("Erro ao salvar disponibilidades:", error);
alert("Erro ao salvar os horários");
const data = await res.json();
setDisponibilidades(Array.isArray(data) ? data : []);
}
} catch (error) {
console.error(error);
}
};
const deletarDisponibilidade = async (id) => {
if (!window.confirm("Deseja realmente excluir esta disponibilidade?")) return;
try {
const res = await fetch(`${ENDPOINT}?id=eq.${id}`, {
method: "DELETE",
headers: getHeaders(),
});
if (res.ok) {
alert("Disponibilidade excluída com sucesso!");
setDisponibilidades((prev) => prev.filter((d) => d.id !== id));
}
} catch (error) {
console.error("Erro:", error);
alert("Erro ao conectar com o servidor");
}
const res = await fetch(`${ENDPOINT}?id=eq.${id}`, { method: "DELETE", headers: getHeaders() });
if (res.ok) setDisponibilidades((prev) => prev.filter((d) => d.id !== id));
} catch (error) {}
};
const disponibilidadesAgrupadas = useMemo(() => {
const agrupadas = {};
doctors.forEach((doctor) => {
agrupadas[doctor.id] = {
doctor_id: doctor.id,
@ -186,13 +183,9 @@ const DisponibilidadesDoctorPage = ( ) => {
disponibilidades: [],
};
});
disponibilidades.forEach((disp) => {
if (agrupadas[disp.doctor_id]) {
agrupadas[disp.doctor_id].disponibilidades.push(disp);
}
if (agrupadas[disp.doctor_id]) agrupadas[disp.doctor_id].disponibilidades.push(disp);
});
Object.values(agrupadas).forEach((grupo) => {
if (grupo.disponibilidades.length === 0) {
grupo.disponibilidades.push({
@ -203,15 +196,8 @@ const DisponibilidadesDoctorPage = ( ) => {
});
}
});
let resultado = Object.values(agrupadas);
if (searchTerm) {
resultado = resultado.filter(grupo =>
grupo.doctor_name.toLowerCase().includes(searchTerm.toLowerCase())
);
}
if (searchTerm) resultado = resultado.filter((grupo) => grupo.doctor_name.toLowerCase().includes(searchTerm.toLowerCase()));
return resultado;
}, [disponibilidades, doctors, searchTerm]);
@ -237,60 +223,66 @@ const DisponibilidadesDoctorPage = ( ) => {
friday: "Sexta",
saturday: "Sábado",
};
const key = typeof weekday === "string" ? weekday.toLowerCase() : weekday;
return dias[key] || "Desconhecido";
};
const initialAvailabilityParaEdicao = useMemo(() => {
if (!editando) return [];
const disponibilidadesMedico = disponibilidades.filter(
(d) => String(d.doctor_id) === String(editando)
);
return [1, 2, 3, 4, 5, 6, 0].map((weekday) => {
const blocosDoDia = disponibilidadesMedico
.filter((d) => d.weekday === weekday && d.active !== false)
.map((d) => ({
const disponibilidadesMedico = disponibilidades.filter((d) => String(d.doctor_id) === String(editando));
const blocosPorDia = {};
disponibilidadesMedico.forEach((d) => {
const num = typeof d.weekday === "string" ? weekdayStrToNum[d.weekday.toLowerCase()] : d.weekday;
if (num === undefined) return;
if (!blocosPorDia[num]) blocosPorDia[num] = [];
if (d.active !== false) {
blocosPorDia[num].push({
id: d.id,
inicio: formatTime(d.start_time) || "07:00",
termino: formatTime(d.end_time) || "17:00",
slot_minutes: d.slot_minutes || 30,
appointment_type: d.appointment_type || "presencial",
isNew: false,
}));
});
}
});
const resultado = [1, 2, 3, 4, 5, 6, 0].map((weekday) => {
const blocosDoDia = blocosPorDia[weekday] || [];
return {
dia: diasDaSemana[weekday],
weekday: weekday,
isChecked: blocosDoDia.length > 0,
blocos: blocosDoDia.length > 0 ? blocosDoDia : [{
id: null,
inicio: "07:00",
termino: "17:00",
slot_minutes: 30,
appointment_type: "presencial",
isNew: true,
}],
blocos:
blocosDoDia.length > 0
? blocosDoDia
: [
{
id: null,
inicio: "07:00",
termino: "17:00",
slot_minutes: 30,
appointment_type: "presencial",
isNew: true,
},
],
};
});
return resultado;
}, [disponibilidades, editando]);
const handleUpdateHorarios = (horariosAtualizados) => {
if (!editando) return;
salvarTodasDisponibilidades(editando, horariosAtualizados);
setAvailabilityEdit(horariosAtualizados || []);
};
const filteredDoctors = useMemo(() => {
if (!searchTerm) return doctors;
return doctors.filter((doc) =>
(doc.full_name || doc.name).toLowerCase().includes(searchTerm.toLowerCase())
);
return doctors.filter((doc) => (doc.full_name || doc.name).toLowerCase().includes(searchTerm.toLowerCase()));
}, [doctors, searchTerm]);
const handleCancelarEdicao = () => {
setEditando(null);
setAvailabilityEdit([]);
};
const handleDoctorSelect = (doctor) => {
@ -317,9 +309,7 @@ const DisponibilidadesDoctorPage = ( ) => {
return (
<div className="disponibilidades-container">
<h1 className="disponibilidades-title">
Disponibilidades dos Médicos
</h1>
<h1 className="disponibilidades-title">Disponibilidades dos Médicos</h1>
<div className="search-container">
<div className="search-input-container">
@ -335,10 +325,7 @@ const DisponibilidadesDoctorPage = ( ) => {
className="search-input"
/>
{searchTerm && (
<button
onClick={handleClearSearch}
className="clear-search-btn"
>
<button onClick={handleClearSearch} className="clear-search-btn">
×
</button>
)}
@ -347,11 +334,7 @@ const DisponibilidadesDoctorPage = ( ) => {
{showSuggestions && searchTerm && filteredDoctors.length > 0 && (
<div className="suggestions-dropdown">
{filteredDoctors.map((doc) => (
<div
key={doc.id}
onClick={() => handleDoctorSelect(doc)}
className="suggestion-item"
>
<div key={doc.id} onClick={() => handleDoctorSelect(doc)} className="suggestion-item">
{doc.full_name || doc.name}
</div>
))}
@ -361,9 +344,7 @@ const DisponibilidadesDoctorPage = ( ) => {
<section className="calendario-ou-filaespera">
<div className="fila-container">
<h2 className="section-title">
{editando ? `Editar Horários` : "Lista de Disponibilidades"}
</h2>
<h2 className="section-title">{editando ? `Editar Horários` : "Lista de Disponibilidades"}</h2>
{doctors.length === 0 ? (
<p className="loading-text">Carregando médicos...</p>
@ -371,13 +352,7 @@ const DisponibilidadesDoctorPage = ( ) => {
<>
<div className="edit-container">
{initialAvailabilityParaEdicao.length > 0 ? (
<HorariosDisponibilidade
initialAvailability={initialAvailabilityParaEdicao}
onUpdate={handleUpdateHorarios}
readOnly={false}
showHeader={false}
compact={false}
/>
<HorariosDisponibilidade initialAvailability={initialAvailabilityParaEdicao} onUpdate={handleUpdateHorarios} onCancel={handleCancelarEdicao} />
) : (
<p className="loading-text">Carregando horários para edição...</p>
)}
@ -385,16 +360,15 @@ const DisponibilidadesDoctorPage = ( ) => {
<div className="disp-buttons-container">
<button
onClick={() => handleUpdateHorarios(initialAvailabilityParaEdicao)}
onClick={() =>
salvarTodasDisponibilidades(editando, availabilityEdit.length > 0 ? availabilityEdit : initialAvailabilityParaEdicao)
}
className="disp-btn-primary"
>
Salvar Alterações
</button>
<button
onClick={handleCancelarEdicao}
className="disp-btn-danger"
>
<button onClick={handleCancelarEdicao} className="disp-btn-danger">
Cancelar
</button>
</div>
@ -405,33 +379,20 @@ const DisponibilidadesDoctorPage = ( ) => {
<p className="no-results">Nenhum médico encontrado</p>
) : (
disponibilidadesAgrupadas.map((grupo) => (
<div
key={grupo.doctor_id}
className={`doctor-group ${expandedDoctors[grupo.doctor_id] ? 'expanded' : ''}`}
>
<div
className="doctor-header"
onClick={() => toggleExpandDoctor(grupo.doctor_id)}
>
<div key={grupo.doctor_id} className={`doctor-group ${expandedDoctors[grupo.doctor_id] ? "expanded" : ""}`}>
<div className="doctor-header" onClick={() => toggleExpandDoctor(grupo.doctor_id)}>
<h3 className="doctor-name">
{grupo.doctor_name}
<span className="doctor-hours">
({grupo.disponibilidades.filter(d => !d.is_empty).length} horários)
</span>
<span className="doctor-hours">({grupo.disponibilidades.filter((d) => !d.is_empty).length} horários)</span>
</h3>
<span className={`expand-icon ${expandedDoctors[grupo.doctor_id] ? 'expanded' : ''}`}>
▼
</span>
<span className={`expand-icon ${expandedDoctors[grupo.doctor_id] ? "expanded" : ""}`}>▼</span>
</div>
{expandedDoctors[grupo.doctor_id] && (
<div className="doctor-content">
<div className="edit-btn-container">
<button
onClick={() => setEditando(grupo.doctor_id)}
className="disp-btn-edit"
>
{grupo.disponibilidades.some(d => !d.is_empty) ? "Editar" : "Cadastrar Horários"}
<button onClick={() => setEditando(grupo.doctor_id)} className="disp-btn-edit">
{grupo.disponibilidades.some((d) => !d.is_empty) ? "Editar" : "Cadastrar Horários"}
</button>
</div>
@ -451,36 +412,15 @@ const DisponibilidadesDoctorPage = ( ) => {
<tbody>
{grupo.disponibilidades.map((disp) => (
<tr key={disp.id}>
<td>{disp.is_empty ? "Nenhum horário cadastrado" : getDiaSemana(disp.weekday)}</td>
<td>{disp.is_empty ? "-" : formatTime(disp.start_time)}</td>
<td>{disp.is_empty ? "-" : formatTime(disp.end_time)}</td>
<td>{disp.is_empty ? "-" : disp.slot_minutes || 30}</td>
<td>{disp.is_empty ? "-" : disp.appointment_type || "presencial"}</td>
<td>
{disp.is_empty ? "Nenhum horário cadastrado" : getDiaSemana(disp.weekday)}
</td>
<td>
{disp.is_empty ? "-" : formatTime(disp.start_time)}
</td>
<td>
{disp.is_empty ? "-" : formatTime(disp.end_time)}
</td>
<td>
{disp.is_empty ? "-" : disp.slot_minutes || 30}
</td>
<td>
{disp.is_empty ? "-" : disp.appointment_type || "presencial"}
</td>
<td>
<span className={getStatusBadgeClass(disp)}>
{getStatusText(disp)}
</span>
</td>
<td>
{!disp.is_empty && (
<button
onClick={() => deletarDisponibilidade(disp.id)}
className="disp-btn-delete"
>
Excluir
</button>
)}
<span className={getStatusBadgeClass(disp)}>{getStatusText(disp)}</span>
</td>
<td>{!disp.is_empty && <button onClick={() => deletarDisponibilidade(disp.id)} className="disp-btn-delete">Excluir</button>}</td>
</tr>
))}
</tbody>

387
src/pages/DoctorEditPage.jsx
View File

@ -1,104 +1,333 @@
import React, { useEffect, useState, useCallback } from "react";
import { useParams, useSearchParams } from "react-router-dom";
import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor";
import React, { useState, useEffect, useMemo } from "react";
import { useParams, useNavigate, useLocation } from "react-router-dom";
import DoctorForm from "../components/doctors/DoctorForm";
import { useAuth } from "../components/utils/AuthProvider";
import API_KEY from "../components/utils/apiKeys";
const ENDPOINT_AVAILABILITY =
"https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
const ENDPOINT = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors";
const ENDPOINT_AVAILABILITY = "https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctor_availability";
const DoctorEditPage = ({DictInfo}) => {
const diasDaSemana = ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"];
const weekdayNumToStr = {
0: "sunday",
1: "monday",
2: "tuesday",
3: "wednesday",
4: "thursday",
5: "friday",
6: "saturday",
};
const weekdayStrToNum = Object.fromEntries(
Object.entries(weekdayNumToStr).map(([num, str]) => [str, Number(num)])
);
const EditDoctorPage = () => {
const { id } = useParams();
const navigate = useNavigate();
const location = useLocation();
const { getAuthorizationHeader } = useAuth();
const [DoctorToPUT, setDoctorPUT] = useState({});
const Parametros = useParams();
const [searchParams] = useSearchParams();
const [doctor, setDoctor] = useState(null);
const [availability, setAvailability] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [isSaving, setIsSaving] = useState(false);
const DoctorID = "b24c88b2-1d51-4c04-8fe8-e75c3f2817d1";
const availabilityId = searchParams.get("availabilityId");
const effectiveId = id;
const [availabilityToPATCH, setAvailabilityToPATCH] = useState(null);
const [mode, setMode] = useState("doctor");
console.log("teste", DictInfo)
useEffect(() => {
setDoctorPUT(DictInfo)
}, [DictInfo]);
const HandlePutDoctor = async () => {
const getHeaders = () => {
const myHeaders = new Headers();
const authHeader = getAuthorizationHeader();
var myHeaders = new Headers();
myHeaders.append("apikey", API_KEY);
myHeaders.append("Authorization", authHeader);
if (authHeader) myHeaders.append("Authorization", authHeader);
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify(DoctorToPUT);
console.log("Enviando médico para atualização (PUT):", DoctorToPUT);
var requestOptions = {
method: "PUT",
headers: myHeaders,
body: raw,
redirect: "follow",
};
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DictInfo.id}`,requestOptions)
.then(response => console.log(response))
if (API_KEY) myHeaders.append("apikey", API_KEY);
myHeaders.append("Prefer", "return=representation");
return myHeaders;
};
// 2. Função para Atualizar DISPONIBILIDADE (PATCH)
const HandlePatchAvailability = async (data) => {
const authHeader = getAuthorizationHeader();
var myHeaders = new Headers();
myHeaders.append("apikey", API_KEY);
myHeaders.append("Authorization", authHeader);
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify(data);
console.log("Enviando disponibilidade para atualização (PATCH):", data);
var requestOptions = {
method: "PATCH",
headers: myHeaders,
body: raw,
redirect: "follow",
};
const salvarDisponibilidades = async (doctorId, horariosAtualizados) => {
try {
const response = await fetch(
`${ENDPOINT_AVAILABILITY}?id=eq.${availabilityId}`,
requestOptions
const headers = getHeaders();
const promises = [];
const currentIds = new Set();
for (const dia of horariosAtualizados) {
if (dia.isChecked && dia.blocos.length > 0) {
for (const bloco of dia.blocos) {
const inicio = bloco.inicio.includes(":") ? bloco.inicio : bloco.inicio + ":00";
const termino = bloco.termino.includes(":") ? bloco.termino : bloco.termino + ":00";
const payload = {
doctor_id: doctorId,
weekday: weekdayNumToStr[dia.weekday],
start_time: inicio,
end_time: termino,
slot_minutes: bloco.slot_minutes || 30,
appointment_type: bloco.appointment_type || "presencial",
active: true,
};
if (bloco.id && !bloco.isNew) {
currentIds.add(bloco.id);
promises.push(
fetch(`${ENDPOINT_AVAILABILITY}?id=eq.${bloco.id}`, {
method: "PATCH",
headers,
body: JSON.stringify(payload),
}).then((res) => {
if (!res.ok) throw new Error(`Erro no PATCH: ${res.status}`);
return { type: "PATCH", id: bloco.id };
})
);
} else {
promises.push(
fetch(ENDPOINT_AVAILABILITY, {
method: "POST",
headers,
body: JSON.stringify(payload),
})
.then((res) => res.json())
.then((data) => {
const createdItem = Array.isArray(data) ? data[0] : data;
if (createdItem && createdItem.id) {
return { type: "POST", id: createdItem.id };
}
return { type: "POST", id: null };
})
);
}
}
}
}
const results = await Promise.all(promises);
results.forEach((res) => {
if (res.type === "POST" && res.id) currentIds.add(res.id);
});
const existingDisponibilidadesRes = await fetch(
`${ENDPOINT_AVAILABILITY}?doctor_id=eq.${String(doctorId)}`,
{ method: "GET", headers }
);
console.log("Resposta PATCH Disponibilidade:", response);
alert("Disponibilidade atualizada com sucesso!");
// Opcional: Redirecionar de volta para a lista de disponibilidades
// navigate('/disponibilidades');
if (existingDisponibilidadesRes.ok) {
const existingDisponibilidades = await existingDisponibilidadesRes.json();
const deletePromises = existingDisponibilidades
.filter((disp) => !currentIds.has(disp.id))
.map((disp) =>
fetch(`${ENDPOINT_AVAILABILITY}?id=eq.${disp.id}`, {
method: "DELETE",
headers,
})
);
await Promise.all(deletePromises);
}
const updatedResponse = await fetch(
`${ENDPOINT_AVAILABILITY}?doctor_id=eq.${doctorId}&order=weekday.asc,start_time.asc`,
{ method: "GET", headers }
);
if (updatedResponse.ok) {
const updatedData = await updatedResponse.json();
setAvailability(updatedData);
}
} catch (error) {
console.error("Erro ao atualizar disponibilidade:", error);
alert("Erro ao atualizar disponibilidade.");
throw error;
}
};
const normalizeAvailabilityForForm = (availabilityData) => {
if (!Array.isArray(availabilityData)) return [];
const disponibilidadesMedico = availabilityData.filter((d) =>
String(d.doctor_id) === String(effectiveId) && d.active !== false
);
const blocosPorDia = {};
disponibilidadesMedico.forEach((d) => {
const num = typeof d.weekday === "string" ? weekdayStrToNum[d.weekday.toLowerCase()] : d.weekday;
if (num === undefined || num === null) return;
if (!blocosPorDia[num]) blocosPorDia[num] = [];
blocosPorDia[num].push({
id: d.id,
inicio: d.start_time?.substring(0, 5) || "07:00",
termino: d.end_time?.substring(0, 5) || "17:00",
slot_minutes: d.slot_minutes || 30,
appointment_type: d.appointment_type || "presencial",
isNew: false,
});
});
const resultado = [1, 2, 3, 4, 5, 6, 0].map((weekday) => {
const blocosDoDia = blocosPorDia[weekday] || [];
return {
dia: diasDaSemana[weekday],
weekday: weekday,
isChecked: blocosDoDia.length > 0,
blocos:
blocosDoDia.length > 0
? blocosDoDia
: [
{
id: null,
inicio: "07:00",
termino: "17:00",
slot_minutes: 30,
appointment_type: "presencial",
isNew: true,
},
],
};
});
return resultado;
};
const availabilityFormatted = useMemo(() => {
return normalizeAvailabilityForForm(availability);
}, [availability, effectiveId]);
useEffect(() => {
const fetchDoctorData = async () => {
if (!effectiveId || effectiveId === "edit") {
alert("ID do médico não encontrado");
navigate("/secretaria/medicos");
return;
}
try {
const doctorResponse = await fetch(`${ENDPOINT}?id=eq.${effectiveId}`, {
method: "GET",
headers: getHeaders(),
});
if (!doctorResponse.ok) {
throw new Error("Erro ao carregar dados do médico");
}
const doctorData = await doctorResponse.json();
if (doctorData.length === 0) {
throw new Error("Médico não encontrado");
}
setDoctor(doctorData[0]);
const availabilityResponse = await fetch(
`${ENDPOINT_AVAILABILITY}?doctor_id=eq.${effectiveId}&order=weekday.asc,start_time.asc`,
{
method: "GET",
headers: getHeaders(),
}
);
if (availabilityResponse.ok) {
const availabilityData = await availabilityResponse.json();
setAvailability(availabilityData);
} else {
setAvailability([]);
}
} catch (error) {
alert("Erro ao carregar dados do médico");
navigate("/secretaria/medicos");
} finally {
setIsLoading(false);
}
};
if (effectiveId) {
fetchDoctorData();
}
}, [effectiveId, navigate]);
const handleSave = async (formData) => {
const { availability: updatedAvailability, ...doctorDataToSave } = formData;
try {
setIsSaving(true);
const response = await fetch(`${ENDPOINT}?id=eq.${effectiveId}`, {
method: "PATCH",
headers: getHeaders(),
body: JSON.stringify(doctorDataToSave),
});
if (!response.ok) {
throw new Error("Erro ao salvar dados do médico");
}
if (updatedAvailability && updatedAvailability.length > 0) {
await salvarDisponibilidades(effectiveId, updatedAvailability);
}
alert("Médico e horários atualizados com sucesso!");
navigate("/secretaria/medicos");
} catch (error) {
alert(`Erro ao salvar dados: ${error.message}`);
} finally {
setIsSaving(false);
}
console.log('Horários a serem salvos:', updatedAvailability);
};
const handleCancel = () => {
navigate("/secretaria/medicos");
};
if (isLoading) {
return (
<div className="container mt-4">
<div className="d-flex justify-content-center">
<div className="spinner-border" role="status">
<span className="visually-hidden">Carregando...</span>
</div>
</div>
<p className="text-center mt-2">
Carregando dados do médico ID: {effectiveId || "..."}
</p>
</div>
);
}
if (!doctor) {
if (!isLoading) {
return (
<div className="container mt-4">
<div className="alert alert-danger">
Médico não encontrado
</div>
</div>
);
}
return null;
}
const formData = {
...doctor,
availability: (doctor && doctor.availability) ? doctor.availability : availabilityFormatted,
};
return (
<div>
<DoctorForm
onSave={
mode === "availability" ? HandlePatchAvailability : HandlePutDoctor
}
formData={mode === "availability" ? availabilityToPATCH : DoctorToPUT}
setFormData={
mode === "availability" ? setAvailabilityToPATCH : setDoctorPUT
}
isEditingAvailability={mode === "availability"}
/>
<div className="container mt-4">
<div className="row">
<div className="col-12">
<h1>Editar Médico</h1>
<DoctorForm
formData={formData}
setFormData={setDoctor}
onSave={handleSave}
onCancel={handleCancel}
isLoading={isSaving}
isEditing={true}
/>
</div>
</div>
</div>
);
};
export default DoctorEditPage;
export default EditDoctorPage;

6
src/pages/DoctorTable.jsx
View File

@ -147,7 +147,7 @@ function TableDoctor({setDictInfo}) {
return resultado;
}) : [];
// Aplica ordenação rápida
const applySorting = (arr) => {
if (!Array.isArray(arr) || !sortKey) return arr;
const copy = [...arr];
@ -437,13 +437,13 @@ function TableDoctor({setDictInfo}) {
<td>{medico.email || 'Não informado'}</td>
<td>
<div className="d-flex gap-2">
<Link to={`details`}>
<Link to={`details/${medico.id}`}>
<button className="btn btn-sm btn-view" onClick={() => setDictInfo({...medico})}>
<i className="bi bi-eye me-1"></i> Ver Detalhes
</button>
</Link>
<Link to={`edit`}>
<Link to={`edit/${medico.id}`}>
<button className="btn btn-sm btn-edit" onClick={() => setDictInfo({...medico})}>
<i className="bi bi-pencil me-1"></i> Editar
</button>

23
src/pages/style/Agendamento.css
View File

@ -193,8 +193,8 @@
}
.appointment-actions {
display: flex;
gap: 8px;
display: flex;
gap: 8px;
}
.btn-action {
@ -221,5 +221,22 @@
color: #fff;
}
.btn-action.btn-delete:hover {
background-color: #C53030;
background-color: #C53030;
}
@media (max-width: 768px) {
.unidade-selecionarprofissional { flex-direction: column; align-items: stretch; gap: 12px; }
.calendar-wrapper { flex-direction: column; padding: 16px; }
.calendar-info-panel { flex: 0 0 auto; border-right: none; border-bottom: 1px solid #E2E8F0; padding-right: 0; padding-bottom: 16px; }
.calendar-grid { grid-template-columns: repeat(4, 1fr); }
.calendar-controls { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 576px) {
.calendar-grid { grid-template-columns: repeat(2, 1fr); }
.date-indicator h2 { font-size: 1.25rem; }
.legend-item { font-size: 0.75rem; padding: 4px 8px; }
.appointment-item { flex-direction: column; align-items: stretch; gap: 8px; }
.appointment-actions { width: 100%; }
.btn-action { width: 100%; }
}

28
src/pages/style/DisponibilidadesDoctorPage.css
View File

@ -218,6 +218,30 @@
background-color: #27ae60;
}
@media (max-width: 576px) {
.disponibilidades-container { padding: 12px; }
.disponibilidades-title { font-size: 1.25rem; }
.search-container { padding: 12px; }
.doctor-header { padding: 12px; }
.doctor-name { font-size: 1rem; }
.doctor-hours { display: none; }
.expand-icon { font-size: 0.9rem; }
.table-container { padding: 0 6px 6px 6px; }
.disponibilidades-table thead th { padding: 6px 8px; }
.disponibilidades-table td { padding: 10px 8px; font-size: 0.8125rem; }
.disponibilidades-table thead th:nth-child(4),
.disponibilidades-table thead th:nth-child(5),
.disponibilidades-table thead th:nth-child(7),
.disponibilidades-table tbody td:nth-child(4),
.disponibilidades-table tbody td:nth-child(5),
.disponibilidades-table tbody td:nth-child(7) {
display: none;
}
.disp-buttons-container { flex-direction: column; gap: 10px; }
.disp-btn-primary, .disp-btn-danger { width: 100%; }
.suggestions-dropdown { width: calc(100% - 30px); left: 15px; right: 15px; }
}
.status-inactive {
background-color: #e74c3c;
}
@ -304,7 +328,7 @@
font-size: 0.875rem;
font-weight: 600;
border-radius: 6px;
background-color: #95a5a6;
background-color: #fa273c;
color: white;
border: none;
cursor: pointer;
@ -312,7 +336,7 @@
}
.disp-btn-danger:hover {
background-color: #7f8c8d;
background-color: #f41936;
}
/* Section Titles */

9
src/pages/style/FilaEspera.css
View File

@ -256,6 +256,15 @@ html, body {
font-size: 1.5rem;
}
}
@media (max-width: 576px) {
.unidade-selecionarprofissional { flex-direction: column; gap: 10px; }
.unidade-selecionarprofissional input,
.unidade-selecionarprofissional select { width: 100%; margin-left: 0; }
.busca-fila-espera { position: static; width: 100%; margin-bottom: 8px; }
.fila-header { height: auto; flex-direction: column; gap: 8px; }
.btns-e-legenda-container { flex-direction: column; gap: 10px; }
.legenda-tabela { justify-content: center; flex-wrap: wrap; }
}
.fila-header {
position: relative;
display: flex;

11
src/pages/style/TableDoctor.css
View File

@ -160,6 +160,17 @@
gap: 0.75rem;
}
@media (max-width: 576px) {
.table-doctor-card .card-header { padding: 0.75rem 1rem; }
.table-doctor-table th, .table-doctor-table td { padding: 8px 6px; }
.table-doctor-table thead th:nth-child(2),
.table-doctor-table thead th:nth-child(4),
.table-doctor-table tbody td:nth-child(2),
.table-doctor-table tbody td:nth-child(4) { display: none; }
.filter-buttons-container { width: 100%; }
.filter-btn { width: 100%; }
}
@media (max-width: 768px) {
.table-doctor-table {
font-size: 0.875rem;

10
src/pages/style/TablePaciente.css
View File

@ -338,3 +338,13 @@
padding: 0.4em 0.65em;
margin-bottom: 0.25rem;
}
@media (max-width: 576px) {
.table-paciente-card .card-header { padding: 0.75rem 1rem; }
.table-paciente-table th, .table-paciente-table td { padding: 8px 6px; }
.table-paciente-table thead th:nth-child(2),
.table-paciente-table thead th:nth-child(4),
.table-paciente-table tbody td:nth-child(2),
.table-paciente-table tbody td:nth-child(4) { display: none; }
.table-paciente-filters .btn-sm { width: 100%; }
}

4
src/perfis/perfil_secretaria/PerfilSecretaria.jsx
View File

@ -34,8 +34,8 @@ function PerfilSecretaria({ onLogout }) {
<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 doctor={DictInfo} />} />
<Route path="medicos/edit" element={<DoctorEditPage DictInfo={DictInfo} />} />
<Route path="medicos/details/:id" element={<DoctorDetails doctor={DictInfo} />} />
<Route path="medicos/edit/:id" 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 />} />