Doctor Appointments & Medical Record Creation

[yasserhegazy]

Frontend Task: Doctor Appointments & Medical Record Creation

Overview

Build a complete workflow for doctors to view today's appointments, search patients, view patient details/history, and create medical records after visits.

---

Section 1: Today's Appointments Table with Search

1.1 Create Appointments Table Component

File: app/doctor/appointments/page.tsx

Requirements:

• Display all appointments for today in a table format
• Show columns: Time, Patient Name, Status, Actions
• Add search bar to filter by patient name (debounced)
• Highlight current/next appointment
• Show appointment count badge

UI Elements:

┌─────────────────────────────────────────────┐
│ Today's Appointments (5)          [Search] │
├─────────────────────────────────────────────┤
│ Time  │ Patient      │ Status   │ Actions  │
├─────────────────────────────────────────────┤
│ 09:00 │ Patient One  │ Approved │ [View]   │
│ 10:30 │ Patient Two  │ Approved │ [View]   │
│ 14:00 │ Ahmad Ali    │ Approved │ [View]   │
└─────────────────────────────────────────────┘

API Integration:

• GET /api/doctor/appointments?date=today
• Filter results client-side by patient name

State Management:

const [appointments, setAppointments] = useState([]);
const [searchQuery, setSearchQuery] = useState("");
const [loading, setLoading] = useState(true);

const filteredAppointments = appointments.filter((apt) =>
  apt.patient.user.name.toLowerCase().includes(searchQuery.toLowerCase())
);

Acceptance Criteria:

• Table displays today's appointments only
• Search filters by patient name in real-time
• Shows loading state while fetching
• Empty state when no appointments
• Responsive on mobile devices

---

Section 2: Appointment Details Modal with Patient History

2.1 Create Appointment Details View

File: components/doctor/AppointmentDetailsModal.tsx

Requirements:

• Modal opens when clicking "View" on appointment
• Display appointment information
• Show patient demographics
• Display previous medical history (last 5 visits)
• Provide "Create Medical Record" button

UI Layout:

┌────────────────────────────────────────────────┐
│ Appointment Details                      [×]   │
├────────────────────────────────────────────────┤
│ APPOINTMENT INFO                               │
│ Date: Dec 2, 2024                             │
│ Time: 09:00 AM                                │
│ Status: Approved                              │
│ Notes: Regular checkup                        │
│                                               │
│ PATIENT INFORMATION                           │
│ Name: Patient One                             │
│ Age: 34 years                                 │
│ Gender: Male                                  │
│ Blood Type: A+                                │
│ Phone: +970590000006                          │
│ Allergies: None                               │
│                                               │
│ PREVIOUS MEDICAL HISTORY (5 visits)           │
│ ┌──────────────────────────────────────────┐ │
│ │ Dec 1, 2024 - Dr. Two                    │ │
│ │ Diagnosis: Common cold                   │ │
│ │ Prescription: Rest, fluids               │ │
│ └──────────────────────────────────────────┘ │
│ ┌──────────────────────────────────────────┐ │
│ │ Nov 15, 2024 - Dr. One                   │ │
│ │ Diagnosis: Headache                      │ │
│ │ Prescription: Paracetamol 500mg          │ │
│ └──────────────────────────────────────────┘ │
│                                               │
│ [View Full History] [Create Medical Record]   │
└────────────────────────────────────────────────┘

Data Structure:

interface AppointmentDetails {
  appointment_id: number;
  appointment_date: string;
  appointment_time: string;
  status: string;
  notes: string;
  patient: {
    patient_id: number;
    date_of_birth: string;
    gender: string;
    blood_type: string;
    allergies: string;
    user: {
      name: string;
      phone: string;
      email: string;
    };
  };
  medicalHistory: MedicalRecord[];
}

API Integration:

• Fetch patient history: GET /api/clinic/patients/{patient_id}/history
• Use existing appointment data from parent component

Acceptance Criteria:

• Modal displays all appointment details
• Patient information is clearly organized
• Medical history shows last 5 visits
• History items are sorted by date (newest first)
• "Create Medical Record" button is prominent
• Can close modal without action

---

Section 3: Medical Record Creation Form

3.1 Create Medical Record Form Component

File: components/doctor/CreateMedicalRecordForm.tsx

Requirements:

• Form opens from appointment details modal
• Pre-fill patient_id, appointment_id, visit_date
• Collect: symptoms, diagnosis, prescription, next_visit
• Validate all required fields
• Show success/error notifications
• Auto-close on success

UI Layout:

┌────────────────────────────────────────────────┐
│ Create Medical Record                    [×]   │
├────────────────────────────────────────────────┤
│ Patient: Patient One                          │
│ Visit Date: Dec 2, 2024                       │
│                                               │
│ Symptoms *                                    │
│ ┌──────────────────────────────────────────┐ │
│ │ Describe patient complaints...           │ │
│ │                                          │ │
│ └──────────────────────────────────────────┘ │
│                                               │
│ Diagnosis *                                   │
│ ┌──────────────────────────────────────────┐ │
│ │ Your medical assessment...               │ │
│ │                                          │ │
│ └──────────────────────────────────────────┘ │
│                                               │
│ Prescription *                                │
│ ┌──────────────────────────────────────────┐ │
│ │ Medications and treatment plan...        │ │
│ │                                          │ │
│ │                                          │ │
│ └──────────────────────────────────────────┘ │
│                                               │
│ Next Visit (Optional)                         │
│ ┌──────────────────────────────────────────┐ │
│ │ [Date Picker]                            │ │
│ └──────────────────────────────────────────┘ │
│                                               │
│           [Cancel] [Save Medical Record]      │
└────────────────────────────────────────────────┘

Form Validation:

const schema = {
  symptoms: { required: true, minLength: 10 },
  diagnosis: { required: true, minLength: 10 },
  prescription: { required: true, minLength: 10 },
  next_visit: { optional: true, futureDate: true },
};

API Integration:

const handleSubmit = async (formData) => {
  const payload = {
    patient_id: appointment.patient.patient_id,
    appointment_id: appointment.appointment_id,
    visit_date: new Date().toISOString().split("T")[0],
    symptoms: formData.symptoms,
    diagnosis: formData.diagnosis,
    prescription: formData.prescription,
    next_visit: formData.next_visit || null,
  };

  const response = await fetch("/api/doctor/medical-records", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(payload),
  });

  if (response.ok) {
    toast.success("Medical record created successfully");
    onSuccess(); // Refresh appointments list
    onClose();
  } else {
    const error = await response.json();
    toast.error(error.message);
  }
};

Acceptance Criteria:

• Form pre-fills patient and date information
• All required fields show validation errors
• Textareas have minimum character requirements
• Next visit date must be in the future
• Loading state during submission
• Success toast notification
• Appointment status updates to "Completed"
• Form resets after successful submission

---

Component Hierarchy

app/doctor/appointments/page.tsx
├── AppointmentSearchBar
├── AppointmentsTable
│   └── AppointmentRow
│       └── [View Button] → Opens Modal
│
├── AppointmentDetailsModal
│   ├── AppointmentInfo
│   ├── PatientInfo
│   ├── MedicalHistoryList
│   │   └── HistoryCard
│   └── [Create Record Button] → Opens Form
│
└── CreateMedicalRecordForm
    ├── FormFields (Symptoms, Diagnosis, Prescription)
    ├── DatePicker (Next Visit)
    └── FormActions (Cancel, Submit)

---

Technical Requirements

Dependencies

• react-hot-toast - Notifications
• date-fns - Date formatting
• Existing AuthContext for user/token

Error Handling

• Network errors → Show retry option
• Validation errors → Inline field errors
• 403/401 → Redirect to login
• 404 → Show "Appointment not found"