diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json index 95fdf99..ad40ec2 100644 --- a/Frontend/package-lock.json +++ b/Frontend/package-lock.json @@ -1844,6 +1844,7 @@ "version": "1.7.7", "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz", "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==", + "license": "MIT", "dependencies": { "follow-redirects": "^1.15.6", "form-data": "^4.0.0", diff --git a/Frontend/src/components/Appointments.jsx b/Frontend/src/components/Appointments.jsx index 93aed3f..6f9172d 100644 --- a/Frontend/src/components/Appointments.jsx +++ b/Frontend/src/components/Appointments.jsx @@ -6,193 +6,208 @@ import "react-datepicker/dist/react-datepicker.css"; import { useLocation } from 'react-router-dom'; const Appointments = () => { - const [appointments, setAppointments] = useState([]); - const [doctors, setDoctors] = useState([]); - const [showForm, setShowForm] = useState(false); - const [searchTerm, setSearchTerm] = useState(''); - const [newAppointment, setNewAppointment] = useState({ - patientName: '', - doctorId: '', - appointmentDate: new Date(), - notes: '' - }); - - const location = useLocation(); - const queryParams = new URLSearchParams(location.search); - const selectedDoctorId = queryParams.get('doctorId'); - - useEffect(() => { - // Simulating fetching doctors from an API - setDoctors([ - { id: 1, name: "Dr. Smith", specialty: "Cardiology" }, - { id: 2, name: "Dr. Johnson", specialty: "Pediatrics" }, - { id: 3, name: "Dr. Williams", specialty: "Orthopedics" }, - ]); - - // Simulating fetching appointments from an API - setAppointments([ - { id: 1, patientName: "John Doe", doctorId: 1, appointmentDate: new Date(), notes: "Regular checkup", status: "Scheduled" }, - { id: 2, patientName: "Jane Smith", doctorId: 2, appointmentDate: new Date(Date.now() + 86400000), notes: "Follow-up", status: "Scheduled" }, - ]); - - if (selectedDoctorId) { - setNewAppointment(prev => ({ ...prev, doctorId: selectedDoctorId })); - setShowForm(true); - } - }, [selectedDoctorId]); - - const handleInputChange = (e) => { - const { name, value } = e.target; - setNewAppointment(prev => ({ ...prev, [name]: value })); - }; - - const handleDateChange = (date) => { - setNewAppointment(prev => ({ ...prev, appointmentDate: date })); - }; - - const handleSubmit = (e) => { - e.preventDefault(); - const appointment = { - id: appointments.length + 1, - ...newAppointment, - status: "Scheduled" - }; - setAppointments([...appointments, appointment]); - setNewAppointment({ patientName: '', doctorId: '', appointmentDate: new Date(), notes: '' }); - setShowForm(false); - }; - - const deleteAppointment = (id) => { - setAppointments(appointments.filter(appointment => appointment.id !== id)); - }; - - const completeAppointment = (id) => { - setAppointments(appointments.map(appointment => - appointment.id === id ? { ...appointment, status: "Completed" } : appointment - )); - }; - - const filteredAppointments = appointments.filter(appointment => - appointment.patientName.toLowerCase().includes(searchTerm.toLowerCase()) || - doctors.find(d => d.id === appointment.doctorId)?.name.toLowerCase().includes(searchTerm.toLowerCase()) - ); - - return ( -
-

Appointment Management

- -
- setShowForm(!showForm)} - > - - {showForm ? 'Cancel' : 'New Appointment'} - -
- - setSearchTerm(e.target.value)} - /> -
-
- - {showForm && ( - -
- - - -