From 2a457943a39e8fc3ef0722c1dda56cc5039e7b66 Mon Sep 17 00:00:00 2001 From: rohitja26 Date: Wed, 23 Oct 2024 00:19:35 +0530 Subject: [PATCH] feact/Showing the appointment section updated --- Frontend/src/App.jsx | 202 +++++++++---- Frontend/src/components/Appointments.jsx | 342 ++++++++++++++--------- Frontend/src/components/Login.jsx | 177 ++++++------ Frontend/src/context/LoginContext.jsx | 3 + Frontend/src/main.jsx | 21 +- 5 files changed, 469 insertions(+), 276 deletions(-) create mode 100644 Frontend/src/context/LoginContext.jsx diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx index b1faa45..e637082 100644 --- a/Frontend/src/App.jsx +++ b/Frontend/src/App.jsx @@ -1,64 +1,162 @@ -import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; -import Header from './components/Header'; -import Home from './components/Home'; -import Appointments from './components/Appointments'; -import Patients from './components/Patients'; -import Doctors from './components/Doctors'; -import DoctorProfile from './components/DoctorProfile'; -import Admin from './components/Admin'; -import Footer from './components/Footer'; +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import Header from "./components/Header"; +import Home from "./components/Home"; +import Appointments from "./components/Appointments"; +import Patients from "./components/Patients"; +import Doctors from "./components/Doctors"; +import DoctorProfile from "./components/DoctorProfile"; +import Admin from "./components/Admin"; +import Footer from "./components/Footer"; import NotFound from "./components/NotFound"; import ScrollToTopButton from "./components/ScrollToTopButton"; import ScrollToTop from "./components/ScrollToTop"; -import AboutUs from './pages/AboutUs'; -import Services from './pages/Services'; -import PrivacyPolicy from './pages/PrivacyPolicy'; -import TermsOfService from './pages/TermsOfService'; -import ContactUs from './pages/ContactUs'; -import SignUp from './components/SignUp'; -import Login from './components/Login'; -import { useState } from 'react'; +import AboutUs from "./pages/AboutUs"; +import Services from "./pages/Services"; +import PrivacyPolicy from "./pages/PrivacyPolicy"; +import TermsOfService from "./pages/TermsOfService"; +import ContactUs from "./pages/ContactUs"; +import SignUp from "./components/SignUp"; +import Login from "./components/Login"; +import { useState } from "react"; +import LoginContext from "./context/LoginContext"; function App() { const [doctors, setDoctors] = useState([ - { id: 1, name: "Dr. Smith", specialty: "Cardiology", patients: 120, appointments: 450, experience: 15, qualifications: "MD, FACC", image: "https://randomuser.me/api/portraits/men/1.jpg", bio: "Dr. Smith is a renowned cardiologist with over 15 years of experience in treating complex heart conditions." }, - { id: 2, name: "Dr. Johnson", specialty: "Pediatrics", patients: 200, appointments: 600, experience: 10, qualifications: "MD, FAAP", image: "https://randomuser.me/api/portraits/women/2.jpg", bio: "Dr. Johnson is a compassionate pediatrician dedicated to providing comprehensive care for children of all ages." }, - { id: 3, name: "Dr. Williams", specialty: "Orthopedics", patients: 150, appointments: 500, experience: 12, qualifications: "MD, FAAOS", image: "https://randomuser.me/api/portraits/men/3.jpg", bio: "Dr. Williams specializes in sports medicine and joint replacement surgeries, helping patients regain mobility and improve their quality of life." }, - { id: 4, name: "Dr. Brown", specialty: "Neurology", patients: 100, appointments: 350, experience: 18, qualifications: "MD, PhD", image: "https://randomuser.me/api/portraits/women/4.jpg", bio: "Dr. Brown is a leading neurologist with expertise in treating a wide range of neurological disorders and conducting groundbreaking research." }, - { id: 5, name: "Dr. Taylor", specialty: "Dermatology", patients: 180, appointments: 550, experience: 8, qualifications: "MD, FAAD", image: "https://randomuser.me/api/portraits/men/5.jpg", bio: "Dr. Taylor is a skilled dermatologist specializing in both medical and cosmetic dermatology, helping patients achieve healthy and beautiful skin." }, - { id: 6, name: "Dr. Alex", specialty: "Gynecologist", patients: 350, appointments: 650, experience: 10, qualifications: "MD, PhD", image: "https://randomuser.me/api/portraits/men/94.jpg", bio: "Dr. Alex is an experienced gynecologist providing comprehensive women's health care, specializing in reproductive health, pregnancy care, and preventive medicine for women of all ages."}, - { id: 7, name: "Dr. Wilson", specialty: "General practitioner", patients: 250, appointments: 620, experience: 12, qualifications: "MD, PHD", image: "https://randomuser.me/api/portraits/women/6.jpg", bio: "Dr. Wilson is an experienced general practitioner providing comprehensive primary care and preventive medicine for patients of all ages." }, - { id: 8, name: "Dennis Schmidt", specialty: "Anesthesiologist", patients: 350, appointments: 750, experience: 17, qualifications: "MD, PHD", image: "https://randomuser.me/api/portraits/men/26.jpg", bio: "Dr. Dennis Schmidt is an experienced general practitioner providing comprehensive primary care and preventive medicine for patients of all ages." }, - { id: 9, name: "Reginald Bennett", specialty: "Ophthalmologist", patients: 150, appointments: 450, experience: 15, qualifications: "MD, PHD", image: "https://randomuser.me/api/portraits/men/18.jpg", bio: "Dr. Reginald Bennett is an experienced general practitioner providing comprehensive primary care and preventive medicine for patients of all ages." }, + { + id: 1, + name: "Dr. Smith", + specialty: "Cardiology", + patients: 120, + appointments: 450, + experience: 15, + qualifications: "MD, FACC", + image: "https://randomuser.me/api/portraits/men/1.jpg", + bio: "Dr. Smith is a renowned cardiologist with over 15 years of experience in treating complex heart conditions.", + }, + { + id: 2, + name: "Dr. Johnson", + specialty: "Pediatrics", + patients: 200, + appointments: 600, + experience: 10, + qualifications: "MD, FAAP", + image: "https://randomuser.me/api/portraits/women/2.jpg", + bio: "Dr. Johnson is a compassionate pediatrician dedicated to providing comprehensive care for children of all ages.", + }, + { + id: 3, + name: "Dr. Williams", + specialty: "Orthopedics", + patients: 150, + appointments: 500, + experience: 12, + qualifications: "MD, FAAOS", + image: "https://randomuser.me/api/portraits/men/3.jpg", + bio: "Dr. Williams specializes in sports medicine and joint replacement surgeries, helping patients regain mobility and improve their quality of life.", + }, + { + id: 4, + name: "Dr. Brown", + specialty: "Neurology", + patients: 100, + appointments: 350, + experience: 18, + qualifications: "MD, PhD", + image: "https://randomuser.me/api/portraits/women/4.jpg", + bio: "Dr. Brown is a leading neurologist with expertise in treating a wide range of neurological disorders and conducting groundbreaking research.", + }, + { + id: 5, + name: "Dr. Taylor", + specialty: "Dermatology", + patients: 180, + appointments: 550, + experience: 8, + qualifications: "MD, FAAD", + image: "https://randomuser.me/api/portraits/men/5.jpg", + bio: "Dr. Taylor is a skilled dermatologist specializing in both medical and cosmetic dermatology, helping patients achieve healthy and beautiful skin.", + }, + { + id: 6, + name: "Dr. Alex", + specialty: "Gynecologist", + patients: 350, + appointments: 650, + experience: 10, + qualifications: "MD, PhD", + image: "https://randomuser.me/api/portraits/men/94.jpg", + bio: "Dr. Alex is an experienced gynecologist providing comprehensive women's health care, specializing in reproductive health, pregnancy care, and preventive medicine for women of all ages.", + }, + { + id: 7, + name: "Dr. Wilson", + specialty: "General practitioner", + patients: 250, + appointments: 620, + experience: 12, + qualifications: "MD, PHD", + image: "https://randomuser.me/api/portraits/women/6.jpg", + bio: "Dr. Wilson is an experienced general practitioner providing comprehensive primary care and preventive medicine for patients of all ages.", + }, + { + id: 8, + name: "Dennis Schmidt", + specialty: "Anesthesiologist", + patients: 350, + appointments: 750, + experience: 17, + qualifications: "MD, PHD", + image: "https://randomuser.me/api/portraits/men/26.jpg", + bio: "Dr. Dennis Schmidt is an experienced general practitioner providing comprehensive primary care and preventive medicine for patients of all ages.", + }, + { + id: 9, + name: "Reginald Bennett", + specialty: "Ophthalmologist", + patients: 150, + appointments: 450, + experience: 15, + qualifications: "MD, PHD", + image: "https://randomuser.me/api/portraits/men/18.jpg", + bio: "Dr. Reginald Bennett is an experienced general practitioner providing comprehensive primary care and preventive medicine for patients of all ages.", + }, ]); + const [isLoggedIn, setIsLoggedIn] = useState(false); + return ( - - -
-
-
- - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - -
- -
-
- + + + +
+
+
+ + } /> + } /> + } /> + } /> + } + /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + +
+ +
+
+ + ); } diff --git a/Frontend/src/components/Appointments.jsx b/Frontend/src/components/Appointments.jsx index 6f9172d..fee4bba 100644 --- a/Frontend/src/components/Appointments.jsx +++ b/Frontend/src/components/Appointments.jsx @@ -1,25 +1,34 @@ -import React, { useState, useEffect } from 'react'; -import { motion } from 'framer-motion'; -import { FaCalendarPlus, FaSearch, FaEdit, FaTrash, FaCheckCircle } from 'react-icons/fa'; -import DatePicker from 'react-datepicker'; +import React, { useState, useEffect, useContext } from "react"; +import { motion } from "framer-motion"; +import Login from "./Login"; +import { + FaCalendarPlus, + FaSearch, + FaEdit, + FaTrash, + FaCheckCircle, +} from "react-icons/fa"; +import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; -import { useLocation } from 'react-router-dom'; +import { useLocation } from "react-router-dom"; +import LoginContext from "../context/LoginContext"; const Appointments = () => { + const { isLoggedIn } = useContext(LoginContext); const [appointments, setAppointments] = useState([]); const [doctors, setDoctors] = useState([]); const [showForm, setShowForm] = useState(false); - const [searchTerm, setSearchTerm] = useState(''); + const [searchTerm, setSearchTerm] = useState(""); const [newAppointment, setNewAppointment] = useState({ - patientName: '', - doctorId: '', + patientName: "", + doctorId: "", appointmentDate: new Date(), - notes: '' + notes: "", }); const location = useLocation(); const queryParams = new URLSearchParams(location.search); - const selectedDoctorId = queryParams.get('doctorId'); + const selectedDoctorId = queryParams.get("doctorId"); useEffect(() => { setDoctors([ @@ -29,23 +38,37 @@ const Appointments = () => { ]); 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" }, + { + 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 })); + setNewAppointment((prev) => ({ ...prev, doctorId: selectedDoctorId })); setShowForm(true); } }, [selectedDoctorId]); const handleInputChange = (e) => { const { name, value } = e.target; - setNewAppointment(prev => ({ ...prev, [name]: value })); + setNewAppointment((prev) => ({ ...prev, [name]: value })); }; const handleDateChange = (date) => { - setNewAppointment(prev => ({ ...prev, appointmentDate: date })); + setNewAppointment((prev) => ({ ...prev, appointmentDate: date })); }; const validateName = (name) => { @@ -60,7 +83,9 @@ const Appointments = () => { const handleSubmit = (e) => { e.preventDefault(); if (!validateName(newAppointment.patientName)) { - alert("Patient name must start with a letter and be at least 4 characters long."); + alert( + "Patient name must start with a letter and be at least 4 characters long." + ); return; } if (!validateDate(newAppointment.appointmentDate)) { @@ -70,143 +95,190 @@ const Appointments = () => { const appointment = { id: appointments.length + 1, ...newAppointment, - status: "Scheduled" + status: "Scheduled", }; setAppointments([...appointments, appointment]); - setNewAppointment({ patientName: '', doctorId: '', appointmentDate: new Date(), notes: '' }); + setNewAppointment({ + patientName: "", + doctorId: "", + appointmentDate: new Date(), + notes: "", + }); setShowForm(false); }; const deleteAppointment = (id) => { - setAppointments(appointments.filter(appointment => appointment.id !== id)); + setAppointments( + appointments.filter((appointment) => appointment.id !== id) + ); }; const completeAppointment = (id) => { - setAppointments(appointments.map(appointment => - appointment.id === id ? { ...appointment, status: "Completed" } : appointment - )); + 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()) + 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 && ( - -
- - - -