diff --git a/APPOINTMENT_SYSTEM_README.md b/APPOINTMENT_SYSTEM_README.md new file mode 100644 index 0000000..9cec8a3 --- /dev/null +++ b/APPOINTMENT_SYSTEM_README.md @@ -0,0 +1,148 @@ +# Appointment System - Backend & Frontend Integration + +## Overview +This document describes the complete appointment booking system implemented for the InfantCareCompass application, including both backend and frontend components. + +## Backend Implementation + +### 1. Database Model +- **File**: `server/models/Appointment.js` +- **Schema**: MongoDB schema with fields for patient, doctor, date, time, type, status, and notes +- **Features**: Automatic timestamp updates, status validation, and reference relationships + +### 2. API Controller +- **File**: `server/controller/appointmentController.js` +- **Endpoints**: + - `POST /api/appointments` - Create new appointment + - `GET /api/appointments/user/:patientId` - Get user's appointments + - `GET /api/appointments/doctor/:doctorId` - Get doctor's appointments + - `PATCH /api/appointments/:id/status` - Update appointment status + - `PATCH /api/appointments/:id/cancel` - Cancel appointment + - `DELETE /api/appointments/:id` - Delete appointment (admin only) + - `GET /api/appointments/available-slots` - Get available time slots + +### 3. Routes Configuration +- **File**: `server/routes/routes.js` +- **Middleware**: Authentication required for most endpoints +- **Admin Access**: Delete operations require admin privileges + +## Frontend Implementation + +### 1. Appointments Page +- **File**: `client/src/pages/Appointments.jsx` +- **Features**: + - Dynamic doctor loading from backend + - Real-time available time slot checking + - Form validation and error handling + - Authentication state management + - Responsive design with Tailwind CSS + +### 2. API Integration +- **Proxy Configuration**: `client/vite.config.js` forwards `/api` calls to backend +- **State Management**: Redux integration for user authentication +- **Error Handling**: Comprehensive error messages and loading states + +## Key Features + +### 1. Smart Time Slot Management +- Automatically checks for conflicts when booking +- Updates available slots based on date and doctor selection +- Prevents double-booking of time slots + +### 2. Authentication & Authorization +- Users must be logged in to book appointments +- Doctor information is fetched dynamically +- Admin-only operations for appointment management + +### 3. Real-time Validation +- Date restrictions (no past dates) +- Time slot availability checking +- Form field dependencies (time slots depend on date/doctor) + +## API Endpoints + +### Create Appointment +```http +POST /api/appointments +Authorization: Bearer +Content-Type: application/json + +{ + "patientId": "user_id", + "doctorId": "doctor_id", + "appointmentDate": "2024-01-15", + "appointmentTime": "10:00 AM", + "appointmentType": "Well-child visit", + "notes": "Optional notes" +} +``` + +### Get Available Time Slots +```http +GET /api/appointments/available-slots?doctorId=123&date=2024-01-15 +``` + +### Get User Appointments +```http +GET /api/appointments/user/:patientId +Authorization: Bearer +``` + +## Setup Instructions + +### 1. Backend Setup +1. Ensure MongoDB is running +2. Install dependencies: `npm install` +3. Set environment variables in `.env` +4. Start server: `npm start` + +### 2. Frontend Setup +1. Install dependencies: `npm install` +2. Start development server: `npm run dev` +3. Backend should be running on port 5000 + +### 3. Database Requirements +- MongoDB instance running +- User and Doctor collections populated +- Proper indexes on appointment fields + +## Security Features + +- JWT token authentication +- CORS configuration for production +- Input validation and sanitization +- Role-based access control +- Rate limiting considerations + +## Future Enhancements + +- Email notifications for appointments +- Calendar integration +- Recurring appointment support +- Payment processing +- Video call integration +- SMS reminders + +## Testing + +Test the system by: +1. Creating a user account +2. Logging in to get authentication token +3. Navigating to `/appointments` +4. Selecting date, doctor, and time +5. Submitting the appointment form +6. Verifying the appointment appears in the database + +## Troubleshooting + +### Common Issues: +1. **CORS errors**: Check backend CORS configuration +2. **Authentication failures**: Verify JWT token in localStorage +3. **Time slot conflicts**: Check appointment model validation +4. **Database connection**: Verify MongoDB connection string + +### Debug Steps: +1. Check browser console for frontend errors +2. Check server logs for backend errors +3. Verify API endpoints are accessible +4. Check database connectivity diff --git a/client/src/pages/Appointments.jsx b/client/src/pages/Appointments.jsx new file mode 100644 index 0000000..0a53f11 --- /dev/null +++ b/client/src/pages/Appointments.jsx @@ -0,0 +1,255 @@ +import React, { useState, useEffect } from "react"; +import { useSelector } from "react-redux"; + +export default function Appointments() { + const { user, isAuthenticated } = useSelector(state => state.user); + const [selectedDate, setSelectedDate] = useState(""); + const [selectedTime, setSelectedTime] = useState(""); + const [selectedDoctor, setSelectedDoctor] = useState(""); + const [appointmentType, setAppointmentType] = useState(""); + const [notes, setNotes] = useState(""); + const [loading, setLoading] = useState(false); + const [message, setMessage] = useState(""); + const [doctors, setDoctors] = useState([]); + const [availableTimeSlots, setAvailableTimeSlots] = useState([]); + + const appointmentTypes = [ + "Well-child visit", + "Sick visit", + "Vaccination", + "Follow-up", + "Consultation" + ]; + + // Fetch doctors from the backend + useEffect(() => { + const fetchDoctors = async () => { + try { + const response = await fetch('/api/doctorinfo'); + const data = await response.json(); + if (data.success) { + setDoctors(data.doctors || []); + } + } catch (error) { + console.error('Error fetching doctors:', error); + } + }; + + fetchDoctors(); + }, []); + + // Fetch available time slots when date or doctor changes + useEffect(() => { + if (selectedDate && selectedDoctor) { + fetchAvailableTimeSlots(); + } + }, [selectedDate, selectedDoctor]); + + const fetchAvailableTimeSlots = async () => { + try { + const response = await fetch(`/api/appointments/available-slots?doctorId=${selectedDoctor}&date=${selectedDate}`); + const data = await response.json(); + if (data.success) { + setAvailableTimeSlots(data.data.availableTimeSlots); + // Reset selected time if it's no longer available + if (!data.data.availableTimeSlots.includes(selectedTime)) { + setSelectedTime(""); + } + } + } catch (error) { + console.error('Error fetching available time slots:', error); + } + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + + if (!isAuthenticated) { + setMessage("Please sign in to book an appointment"); + return; + } + + setLoading(true); + setMessage(""); + + try { + const appointmentData = { + patientId: user._id, + doctorId: selectedDoctor, + appointmentDate: selectedDate, + appointmentTime: selectedTime, + appointmentType: appointmentType, + notes: notes + }; + + const response = await fetch('/api/appointments', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${localStorage.getItem('token')}` + }, + body: JSON.stringify(appointmentData) + }); + + const data = await response.json(); + + if (data.success) { + setMessage("Appointment booked successfully!"); + // Reset form + setSelectedDate(""); + setSelectedTime(""); + setSelectedDoctor(""); + setAppointmentType(""); + setNotes(""); + } else { + setMessage(data.message || "Failed to book appointment"); + } + } catch (error) { + console.error('Error booking appointment:', error); + setMessage("An error occurred while booking the appointment"); + } finally { + setLoading(false); + } + }; + + // Get minimum date (today) + const today = new Date().toISOString().split('T')[0]; + + return ( +
+
+

Book an Appointment

+

+ Schedule a consultation with our experienced pediatricians +

+
+ + {!isAuthenticated && ( +
+

+ Please sign in to book an appointment +

+
+ )} + + {message && ( +
+ {message} +
+ )} + +
+
+
+
+ + setSelectedDate(e.target.value)} + min={today} + className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" + required + disabled={!isAuthenticated} + /> +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+ +