Appointment Scheduling

// Navigate between months
function changeMonth(delta) {
  const newDate = new Date(viewDate);
  newDate.setMonth(newDate.getMonth() + delta);
  viewDate = newDate;
}

CREATE TABLE appointments (
    id INT AUTO_INCREMENT PRIMARY KEY,
    patient_id INT NOT NULL,
    doctor_id INT NOT NULL,
    branch_id INT NOT NULL,
    appointment_date DATE NOT NULL,
    appointment_time TIME NOT NULL,
    duration_minutes INT DEFAULT 30,
    status ENUM('scheduled', 'confirmed', 'waiting', 'completed', 'cancelled') DEFAULT 'scheduled',
    notes TEXT,
    uuid CHAR(36) UNIQUE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (patient_id) REFERENCES patients(id) ON DELETE CASCADE,
    FOREIGN KEY (doctor_id) REFERENCES doctors(id) ON DELETE CASCADE,
    FOREIGN KEY (branch_id) REFERENCES branches(id) ON DELETE CASCADE
);

.badge-scheduled { background: #f1f5f9; color: #475569; }
.badge-confirmed { background: #eff6ff; color: #1e40af; }
.badge-waiting { background: #fffbeb; color: #92400e; }
.badge-completed { background: #f0fdf4; color: #15803d; }
.badge-cancelled { background: #fef2f2; color: #b91c1c; }

PATCH /api/appointments/{id}

Body: {
  status: 'scheduled' | 'confirmed' | 'waiting' | 'completed' | 'cancelled'
}

const filters = {
  doctor_id: 'all',
  branch_id: 'all', 
  status: 'all'
};

// API call with filters
const params = new URLSearchParams({
  date: dateStr,
  doctor_id: filters.doctor_id,
  branch_id: filters.branch_id,
  status: filters.status
});

fetch(`/api/appointments?${params.toString()}`);

.apt-block-premium {
  border-left: 6px solid var(--status-color);
  transition: all 0.2s;
}

.apt-block-premium:hover {
  transform: translateX(4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

const stats = {
  total: appointments.length,
  completed: appointments.filter(a => a.status === 'completed').length,
  pending: appointments.filter(a => 
    ['scheduled', 'confirmed', 'waiting'].includes(a.status)
  ).length
};

POST /api/appointments

Body: {
  patient_id: number,
  doctor_id: number,
  branch_id: number,
  appointment_date: string, // YYYY-MM-DD
  appointment_time: string, // HH:MM:SS
  duration_minutes: number,
  notes?: string
}

uuid CHAR(36) UNIQUE -- For reminder URLs and WhatsApp links

const hours = [
  '08:00', '08:30', '09:00', '09:30', '10:00', '10:30',
  '11:00', '11:30', '12:00', '12:30', '13:00', '13:30',
  '14:00', '14:30', '15:00', '15:30', '16:00', '16:30',
  '17:00', '17:30', '18:00', '18:30'
];

const slotApts = appointments.filter(a => {
  const [ah, am] = a.appointment_time.split(':').map(Number);
  const [sh, sm] = h.split(':').map(Number);
  // Match hour and minute range (0-29 or 30-59)
  return ah === sh && (sm === 0 ? am < 30 : am >= 30);
});

GET /api/appointments?date={YYYY-MM-DD}&doctor_id={id}&branch_id={id}&status={status}

Response: {
  success: true,
  appointments: [
    {
      id: number,
      patient_id: number,
      patient_first_name: string,
      patient_last_name: string,
      doctor_id: number,
      doctor_name: string,
      branch_id: number,
      branch_name: string,
      appointment_date: string,
      appointment_time: string,
      duration_minutes: number,
      status: string,
      notes: string | null,
      uuid: string
    }
  ]
}

PATCH /api/appointments/{id}

Body: { status: string }

Response: {
  success: true,
  message: 'Appointment updated'
}

@media (max-width: 1024px) {
  .agenda-layout {
    grid-template-columns: 1fr;
  }
}