Botoes editar e apagar

src/PagesPaciente/CardConsultaPaciente.jsx

@@ -3,14 +3,17 @@ import { useEffect, useMemo,useState } from 'react'
 import { GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor'
 import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient'
 import { useAuth } from '../components/utils/AuthProvider'
+import { useNavigate } from 'react-router-dom'
+const CardConsultaPaciente = ({consulta, setConsulta,  setSelectedId, setShowDeleteModal}) => {
 
-const CardConsultaPaciente = ({consulta}) => {
+  const navigate = useNavigate()
-
     const [Paciente, setPaciente] = useState({})
     const [Medico, setMedico] = useState({})
     const {getAuthorizationHeader} = useAuth()
-
     const authHeader = getAuthorizationHeader()
+    
+
+    
 
      const ids = useMemo(() => {
     return {
@@ -50,6 +53,8 @@ const CardConsultaPaciente = ({consulta}) => {
 
     console.log(horario)
 
+  const deleteConsulta = () => {}
+
   return (
    <div class="card-consulta">
     <div class="horario-container">
@@ -59,10 +64,40 @@ const CardConsultaPaciente = ({consulta}) => {
         </span>
     </div>
     <div class="info-container">
-        <span class="informacao">
+        
+        <p>{`Inicio: ${horario.split(":")[0]}:${horario.split(":")[1]}`}</p>
+        
+        <p class="informacao">
+          
             Dr {Medico?.full_name} - {Medico?.specialty} 
-        </span>
+        </p>
+
+       
+         <div className='actions-container'>        
+        <button className="btn btn-sm btn-edit-custom"
+            
+           onClick={() => {navigate(`edit`)
+                setConsulta({...consulta,paciente_cpf:Paciente.cpf, paciente_nome:Paciente.full_name, nome_medico:Medico.full_name})
+            }}
+
+          >
+            <i className="bi bi-pencil me-1"></i>
+          </button>           
+            <button
+              className="btn btn-sm btn-delete-custom-style "
+                            onClick={() => {
+                console.log(consulta.id)
+                 setSelectedId(consulta.id)
+                
+               setShowDeleteModal(true);
+              }}
+            >
+              <i className="bi bi-trash me-1"></i>
+            </button>
+        </div>
     </div>
+     
+
 </div>
   )
 }

src/PagesPaciente/ConsultaEditPage.jsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import { useAuth } from '../components/utils/AuthProvider'
+import { useState, useEffect } from 'react'
+import API_KEY from '../components/utils/apiKeys'
+import { UserInfos } from '../components/utils/Functions-Endpoints/General'
+import FormConsultaPaciente from './FormConsultaPaciente'
+const ConsultaEditPage = ({dadosConsulta}) => {
+
+    console.log(dadosConsulta, "editar")
+
+      const {getAuthorizationHeader} = useAuth()
+        
+        const [idUsuario, setIDusuario] = useState("6e7f8829-0574-42df-9290-8dbb70f75ada")
+
+        const [DictInfo, setDictInfo] = useState({})
+    
+        //console.log(DictInfo, 'aqui')    
+    
+        useEffect(() => {
+          setDictInfo({...dadosConsulta})
+    
+    
+            const ColherInfoUsuario =async () => {
+              const result = await UserInfos(authHeader)
+            
+              setIDusuario(result?.profile?.id)
+            
+            }
+            ColherInfoUsuario()
+            
+    
+    
+        }, [])
+    
+    
+        
+        let authHeader = getAuthorizationHeader() 
+    
+        const handleSave = (DictParaPatch) => {
+            var myHeaders = new Headers();
+            myHeaders.append("Content-Type", "application/json");
+            myHeaders.append('apikey', API_KEY)
+            myHeaders.append("authorization", authHeader)
+    
+            console.log(DictParaPatch)
+    
+            var raw = JSON.stringify({"patient_id": DictParaPatch.patient_id,
+           "doctor_id": DictParaPatch.doctor_id,
+           
+           "duration_minutes": 30,
+        
+           "chief_complaint": "Dor de cabeça há 3 ",
+           
+           "created_by": idUsuario,
+    
+            "scheduled_at": `${DictParaPatch.dataAtendimento}T${DictParaPatch.horarioInicio}:00.000Z`,
+           
+           "appointment_type": DictParaPatch.tipo_consulta,
+           
+           "patient_notes": "Prefiro horário pela manhã",
+           "insurance_provider": DictParaPatch.convenio,
+           "status": DictParaPatch.status,
+           "created_by": idUsuario
+    
+        
+            });
+    
+    
+            var requestOptions = {
+            method: 'PATCH',
+            headers: myHeaders,
+            body: raw,
+            redirect: 'follow'
+            };
+    
+            fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${DictInfo.id}`, requestOptions)
+            .then(response => response.text())
+            .then(result => console.log(result))
+            .catch(error => console.log('error', error));
+        }
+    
+  return (
+    <div>
+        <FormConsultaPaciente agendamento={DictInfo} setAgendamento={setDictInfo} onSave={handleSave}/>
+    </div>
+  )
+}
+
+export default ConsultaEditPage

src/PagesPaciente/ConsultasPaciente.jsx

@@ -6,9 +6,12 @@ import { useEffect, useState } from 'react'
 import API_KEY from '../components/utils/apiKeys'
 import { useAuth } from '../components/utils/AuthProvider'
 
-const ConsultasPaciente = () => {
+const ConsultasPaciente = ({setConsulta}) => {
   const {getAuthorizationHeader} = useAuth()
 
+
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  const [selectedID, setSelectedId] = useState("")
   let authHeader = getAuthorizationHeader()
 
   const [consultas, setConsultas] = useState([])
@@ -56,16 +59,32 @@ const FiltrarAgendamentos = (agendamentos, id) => {
   }, [])
 
   const navigate = useNavigate()
-/*
+
-    const consultas = [
+  const deleteConsulta= (ID) => {
-    {
+     var myHeaders = new Headers();
-        "id": "497f6eca-6276-4993-bfeb-53cbbbba6f08",
+            myHeaders.append("Content-Type", "application/json");
-        "doctor_id": "eaca4372-17bc-4905-9eff-7aeda46157b4",
+            myHeaders.append('apikey', API_KEY)
-        "patient_id": "3854866a-5476-48be-8313-77029ccdd7a7",
+            myHeaders.append("authorization", authHeader)
-        "scheduled_at": "2019-08-24T14:15:22Z",
+    
-        "status": "string"
+    
-    }
+            var raw = JSON.stringify({ "status":"cancelled"      
-]*/
+            });
+    
+    
+            var requestOptions = {
+            method: 'PATCH',
+            headers: myHeaders,
+            body: raw,
+            redirect: 'follow'
+            };
+    
+            fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedID}`, requestOptions)
+            .then(response => {if(response.status !== 200)(console.log(response))})
+            .then(result => console.log(result))
+            .catch(error => console.log('error', error));
+
+    console.log("deletar", ID)
+  } 
 
   return (
     <div>
@@ -81,12 +100,52 @@ const FiltrarAgendamentos = (agendamentos, id) => {
         <h2>Seus proximos atendimentos</h2>
 
         {consultas.map((consulta) => (
-            <CardConsultaPaciente consulta={consulta}/>
+            <CardConsultaPaciente consulta={consulta} setConsulta={setConsulta} setShowDeleteModal={setShowDeleteModal} setSelectedId={ setSelectedId}/>
 
         ))}
+{showDeleteModal &&
+          <div className="modal-dialog modal-dialog-centered">
+            <div className="modal-content">
+            
+              <div className="modal-header bg-danger bg-opacity-25">
+                <h5 className="modal-title text-danger">
+                  Confirmação de Exclusão
+                </h5>
+                <button
+                  type="button"
+                  className="btn-close"
+                  onClick={() => setShowDeleteModal(false)}
+                ></button>
+              </div>
 
+              <div className="modal-body">
+                <p className="mb-0 fs-5">
+                  Tem certeza que deseja excluir este agendamento? 
+                </p>
+              </div>
 
-        <h2>Historico de consultas:</h2>
+              <div className="modal-footer">
+              
+                <button
+                  type="button"
+                  className="btn btn-primary"
+                  onClick={() => setShowDeleteModal(false)}
+                >
+                  Cancelar
+                </button>
+
+              
+                <button
+                  type="button"
+                  className="btn btn-danger"
+                  onClick={() => {deleteConsulta(selectedID);setShowDeleteModal(false)}}  
+                  
+                >
+                  <i className="bi bi-trash me-1"></i> Excluir
+                </button>
+              </div>
+            </div>
+          </div>}
 
     </div>
     </div>

src/PagesPaciente/FormConsultaPaciente.jsx

@@ -5,12 +5,13 @@ import { GetPatientByCPF } from "../components/utils/Functions-Endpoints/Patient
 import { GetDoctorByName, GetAllDoctors } from "../components/utils/Functions-Endpoints/Doctor";
 import { useAuth } from "../components/utils/AuthProvider";
 import API_KEY from "../components/utils/apiKeys";
-
+import { useNavigate } from "react-router-dom";
 const FormConsultaPaciente = ({ onCancel, onSave, setAgendamento, agendamento }) => {
   const {getAuthorizationHeader} = useAuth()
 
   console.log(agendamento, 'aqui2')
 
+  const navigate = useNavigate()
   const [selectedFile, setSelectedFile] = useState(null);
   const [anexos, setAnexos] = useState([]);
   const [loadingAnexos, setLoadingAnexos] = useState(false);
@@ -168,6 +169,7 @@ const formatarHora = (datetimeString) => {
 const handleSubmit = (e) => {
     e.preventDefault();
     alert("Agendamento salvo!");
+    navigate("/paciente/agendamento")
     onSave({...agendamento, horarioInicio:horarioInicio})
   };
 

src/PagesPaciente/style.css

@@ -6,7 +6,7 @@
     border-radius: 10px; /* Cantos arredondados */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
     overflow: hidden; /* Garante que o fundo azul não 'vaze' */
-    width: 280px; /* Largura de exemplo */
+   /* width: 280px; /* Largura de exemplo */
     margin: 20px;
     font-family: Arial, sans-serif; /* Fonte legível */
 }
@@ -37,8 +37,70 @@
     display: flex;
     align-items: center;
     flex-grow: 1; /* Faz com que a div de informações preencha o espaço restante */
+
+    gap:6rem;
+ 
 }
 
 .informacao {
     font-size: 1.1em;
-}
+}
+
+
+
+.actions-container {
+     margin: auto;
+  display: flex;
+  gap: 8px;
+  padding: 8px;
+  border-radius: 10px;
+  margin-left: 2rem;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease-in-out;
+
+  /* 🎨 Glassmorphism */
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(80px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+ 
+}
+
+/* Mostra no hover do card */
+.card-consulta:hover .actions-container {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(-2px);
+}
+
+/* 3. Estilos base para o botão de edição (amarelo) */
+.btn-edit-custom-style {
+    background-color: #ffc107; /* Amarelo da sua imagem */
+    color: #343a40;           /* Cor do ícone (cinza escuro para contraste) */
+    border: none;
+    padding: 8px 12px;       /* Ajuste o padding para o tamanho do botão */
+    border-radius: 0.25rem;  /* Leve arredondamento de borda */
+    transition: background-color 0.2s ease-in-out; /* Suaviza a transição de cor */
+}
+
+
+/* 5. Estilos base para o botão de exclusão (vermelho) */
+.btn-delete-custom-style {
+    background-color: #dc3545; /* Vermelho da sua imagem */
+    color: #ffffff;           /* Cor do ícone (branco para contraste) */
+    border: none;
+    padding: 8px 12px;       /* Ajuste o padding para o tamanho do botão */
+    border-radius: 0.25rem;  /* Leve arredondamento de borda */
+    transition: background-color 0.2s ease-in-out; /* Suaviza a transição de cor */
+
+    font-weight:bold ;
+    
+}
+
+/* 6. Estilo de hover para o botão de exclusão */
+.btn-delete-custom-style:hover {
+    background-color: #c82333; /* Um vermelho um pouco mais escuro para o hover */
+    filter: brightness(90%); /* Alternativa: escurecer um pouco mais */
+}

src/components/AgendarConsulta/TabelaAgendamentoDia.jsx

@@ -28,6 +28,7 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDel
                 
                   
                   <p>{Dia ? `${Dia?.split('-')[2]}/${Dia?.split('-')[1]}/${Dia?.split('-')[0]}`: ''}</p>
+                  
                 <button onClick={() => {if(ListaDiasComAgendamentos.length - 1 === indiceAcesso)return; else(setIndiceAcesso(indiceAcesso + 1))}}>  <i className="bi bi-chevron-compact-right"></i></button>
               </div>
             </div>

src/pages/Agendamento.jsx

@@ -185,7 +185,6 @@ const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => {
     return agendamentosFiltrados;
 };
 
- 
 
   const filteredAgendamentos = useMemo(() => {
     if (!searchTerm.trim()) {

src/perfis/Perfil_paciente/Perfilpaciente.jsx

@@ -1,21 +1,27 @@
 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 LaudoManager from "../../pages/LaudoManager";
 import ConsultaCadastroManager from "../../PagesPaciente/ConsultaCadastroManager";
 import ConsultasPaciente from "../../PagesPaciente/ConsultasPaciente";
-
+import ConsultaEditPage from "../../PagesPaciente/ConsultaEditPage";
 function PerfilPaciente({ onLogout }) {
+
+const [dadosConsulta, setConsulta] = useState({})
+
+
   return (
+
     <div id="app" className="active">
       <Sidebar onLogout={onLogout} menuItems={PacienteItems} /> 
       
       <div id="main">
         <Routes>
           <Route path="/" element={<LaudoManager />} /> 
-          <Route path="agendamento" element={<ConsultasPaciente />} />
+          <Route path="agendamento" element={<ConsultasPaciente setConsulta={setConsulta}/>} />
           <Route path="agendamento/criar" element={<ConsultaCadastroManager />} />
+          <Route path="agendamento/edit" element={<ConsultaEditPage dadosConsulta={dadosConsulta} />} />
           <Route path="laudo" element={<LaudoManager />} /> 
           <Route path="*" element={<h2>Página não encontrada</h2>} />
         </Routes>