Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Jay-byte389/AMS/llms.txt

Use this file to discover all available pages before exploring further.

AMS manages the full appointment lifecycle — from browsing a doctor’s available time slots to cancelling a booked session — using MockAPI as the backend. Appointments are stored remotely and fetched into a Redux slice on demand. Conflict detection runs locally by comparing the incoming slot against already-booked times for the same doctor and day, preventing double-bookings without a dedicated server-side check.

​
Appointment Data Shape

Every appointment record sent to and received from POST /Appointments or GET /Appointments has the following structure: 
const appointmentData = {
  // Patient & booking meta
  userId:          "user@example.com",  // email or mobile — ties record to current user
  patientType:     "Yourself",          // "Yourself" | "Another Person"
  patientName:     "John Doe",          // full name entered at booking time
  patientAge:      "30",                // string (numeric input)
  patientGender:   "Male",             // "Male" | "Female" | "Other"
  patientProblem:  "Skin rash on arm", // free-text problem description

  // Date & time
  appointmentMonth: "July",            // full month name from toLocaleString()
  appointmentDay:   24,                // numeric day of month
  appointmentWeek:  "Wed",            // short weekday name
  appointmentTime:  "10:00 AM",       // one of the 15 timeSlots
  appointmentDate:  "2024-07-24",     // ISO date string from selectedDate.dateString

  // Doctor snapshot (denormalised for display without a join)
  doctorId:            "3",
  doctorAvatar:        "https://...",
  doctorName:          "Dr. Olivia Turner",
  doctorDepartment:    "Dermato-Endocrinology",
  doctorQualification: "M.D.",

  // Status
  status:    "Upcoming",              // "Upcoming" | "Cancelled"
  createdAt: "2024-07-20T09:15:00Z", // ISO timestamp
};

​
Booking Flow

1

Open Doctor Info Screen

Navigate to a doctor’s detail screen via navigation.navigate('Info', { doctor: item }). Read the doctor’s profile, career path, experience, and focus area before proceeding.
2

Tap Schedule and Select a Date

Tap the Schedule button to switch the DoctorInfo screen into calendar mode. A react-native-calendars Calendar component shows the current month with minDate set to today. Dates where all 15 time slots are already booked are automatically disabled (greyed out) and display a snackbar warning if tapped. Tap any available date to navigate to ScheduleScreen via navigation.navigate('Schedule', { doctor, selectedDate: day.dateString }).
3

Pick a Time Slot

ScheduleScreen displays the 15 slots exported from src/utils/timeSlots.js (9:00 AM – 4:00 PM in 30-minute increments). Slots already booked for this doctor on this day are shown greyed-out and non-interactive. The default selected slot is 10:00 AM; tap any available slot to select it.
4

Enter Patient Details

Below the time grid, fill in the patient form:
  • Booking for — toggle between Yourself and Another Person
  • Full Name — free-text input
  • Age — numeric input
  • Gender — Male, Female, or Other toggle
  • Describe your problem — multi-line text area
5

Tap Book Appointment

Pressing Book Appointment validates all fields, checks isSlotDisabled(selectedTime) as a final guard, then dispatches addAppointment which calls POST /Appointments:
const savedAppointment = await dispatch(addAppointment(appointmentData)).unwrap();
On success a snackbar confirms the booking and the app navigates to YourAppointment.
6

View Confirmation (YourAppointment Screen)

YourAppointmentScreen displays the doctor card, appointment date and time, and all patient details. From here the user can confirm the booking (which also navigates to PaymentSummary) or cancel immediately.

​
Time Slots

AMS ships with a fixed set of 15 daily time slots defined in src/utils/timeSlots.js: 
export const timeSlots = [
  { id: '1',  time: '9:00 AM',  available: false },
  { id: '2',  time: '9:30 AM',  available: false },
  { id: '3',  time: '10:00 AM', available: true  },
  { id: '4',  time: '10:30 AM', available: false },
  { id: '5',  time: '11:00 AM', available: false },
  { id: '6',  time: '11:30 AM', available: true  },
  { id: '7',  time: '12:00 PM', available: false },
  { id: '8',  time: '12:30 PM', available: false },
  { id: '9',  time: '1:00 PM',  available: true  },
  { id: '10', time: '1:30 PM',  available: true  },
  { id: '11', time: '2:00 PM',  available: false },
  { id: '12', time: '2:30 PM',  available: true  },
  { id: '13', time: '3:00 PM',  available: true  },
  { id: '14', time: '3:30 PM',  available: false },
  { id: '15', time: '4:00 PM',  available: false },
];
The available field is a static hint; live availability is computed at runtime from the Redux appointments list (see below).

​
Conflict Detection

ScheduleScreen derives the set of booked times for the selected doctor and day directly from Redux state, without any additional network request: 
const bookedTimes = useMemo(() => {
  return appointments
    .filter(item =>
      item &&
      String(item.doctorId) === doctorId &&
      String(item.appointmentDay) === String(selectedDate?.day) &&
      String(item.appointmentMonth) === String(currentMonth) &&
      item.status !== 'Cancelled'
    )
    .map(item => item.appointmentTime);
}, [appointments, doctorId, selectedDate, currentMonth]);

const isSlotDisabled = (time) => bookedTimes.includes(time);
Disabled slots render with reduced opacity and reject touch events. The same isSlotDisabled check runs again inside handleBook as a final guard before dispatching.

​
All Appointments Screen

The AllAppointmentsScreen (bottom tab Appointments) shows the current user’s appointments in three tabs:
Displays the full doctor list fetched from GET /Doctors. Each card shows avatar, name, qualification, ratings, and two actions: Re-Book and Add Review.
When navigated from the HomeScreen via View All, the screen pre-selects the Upcoming tab and filters to the chosen date’s appointments only.

​
Home Screen Schedule Section

The HomeScreen displays a schedule panel when the user has at least one real appointment. A horizontal week strip lets the user pick a day; the panel then shows the nearest upcoming appointment for that day: 
// 1. Filter to the selected day
const dayAppointments = realAppointments.filter(item =>
  String(item?.appointmentDay) === String(selectedDate.day)
);

// 2. For today, exclude past times
const upcoming = dayAppointments.filter(item => {
  if (!isToday()) return true;
  return parseTime(item?.appointmentTime) > currentMinutes;
});

// 3. Pick the earliest upcoming appointment
const activeAppointment = [...upcoming].sort(
  (a, b) => parseTime(a?.appointmentTime) - parseTime(b?.appointmentTime)
)[0];
The panel shows the doctor name, department, problem summary, and appointment time. When more than one appointment exists on a day, a View All link appears.

​
Cancelling an Appointment

The CancelAppointmentScreen (route CancelAppointment) provides four preset cancellation reasons — Rescheduling, Weather Conditions, Unexpected Work, and Others — plus a free-text override field. Submitting dispatches cancelAppointment: 
// src/redux/thunk/appointmentThunk.js
export const cancelAppointment = createAsyncThunk(
  'appointments/cancelAppointment',
  async (appointment, { rejectWithValue }) => {
    const updatedAppointment = { ...appointment, status: 'Cancelled' };
    return await updateAppointmentOnApi(updatedAppointment); // PUT /Appointments/:id
  }
);
On success the user is navigated to BottomTabs with the Cancelled tab of AllAppointmentsScreen pre-selected.

​
Redux Appointments State

// appointments slice initial state
{
  list: [],      // all appointments fetched from /Appointments
  loading: false,
  error: null,
}
ThunkHTTP MethodEndpoint
fetchAppointmentsGET/Appointments
addAppointmentPOST/Appointments
cancelAppointmentPUT/Appointments/:id

Build docs developers (and LLMs) love

Get started for freeTalk to us