Untitled

import React, { useEffect, useState, useMemo } from 'react';
import { generateClient } from '@aws-amplify/api';
import Table from '../pages/components/Table';
import StatusCell from './components/Status';
import { AppointmentRecord, AppointmentStatus, AppointmentType, PaymentStatus, ReportStatus } from '../API';
import { listAppointmentRecords } from '../graphql/queries';
import { createAppointmentRecord } from '../graphql/mutations';

// Columns, filters, and sorting configuration
const columns = [
  { field: 'date', headerName: 'Date' },
  { field: 'time', headerName: 'Time' },
  { field: 'officeLocation', headerName: 'Office Location' },
  { field: 'patientName', headerName: 'Patient Name' },
  { field: 'appointmentType', headerName: 'Appointment Type' },
  { field: 'caseStatus', headerName: 'Case Status', customCellRenderer: (value: any) => <StatusCell value={value} /> },
];

const filters = [
  { field: 'appointmentType', label: 'Appointment' },
  { field: 'date', label: 'Date range' },
  { field: 'officeLocation', label: 'Location' },
  { field: 'caseStatus', label: 'Status' },
];

const sortings = [
  { field: 'date', label: 'Date' },
  { field: 'time', label: 'Time' },
  { field: 'officeLocation', label: 'Office Location' },
  { field: 'patientName', label: 'Patient Name' },
  { field: 'appointmentType', label: 'Appointment Type' },
  { field: 'caseStatus', label: 'Case Status' },
];

const client = generateClient({ authMode: "userPool" });

const AppointmentListPage: React.FC = () => {
  const [appointments, setAppointments] = useState<Array<AppointmentRecord> | null>(null);

  useEffect(() => {
    fetchAppointments()
      .then((response) => {
        const fetchedAppointments = response.data.listAppointmentRecords.items as Array<AppointmentRecord>;
        setAppointments(fetchedAppointments);
      })
      .catch((err) => {
        console.error("Error fetching Appointments", err);
      });
  }, []);

  async function fetchAppointments() {
    const now = new Date().toISOString();
    return await client.graphql({
      query: listAppointmentRecords,
      variables: {
        filter: {
          active: { eq: true },
          date: { lt: now },
        },
      },
    });
  }

  const transformAndFilterData = (data: Array<AppointmentRecord>) => {
    const placeholder = '-';
    
    const toSentenceCase = (str: string) => {
      return str.toLowerCase().replace(/(^\w|\s\w)/g, m => m.toUpperCase()).replace('_', ' ');
    };

    return data.map(appointment => {
      const durationMinutes = appointment.durationMinutes ?? 0;
      const appointmentDate = appointment.date ? new Date(appointment.date) : null;
      const appointmentTime = appointment.time || placeholder;

      if (!appointmentDate || appointmentTime === placeholder) {
        return {
          id: appointment.id,
          date: placeholder,
          time: placeholder,
          officeLocation: placeholder,
          patientName: placeholder,
          appointmentType: placeholder,
          caseStatus: placeholder,
        };
      }

      const startTime = new Date(`${appointmentDate.toISOString().split('T')[0]}T${appointmentTime}`);
      const endTime = new Date(startTime.getTime() + durationMinutes * 60000);

      const formatTime = (date: Date) => {
        let hours = date.getHours();
        const minutes = date.getMinutes();
        const ampm = hours >= 12 ? 'PM' : 'AM';
        hours = hours % 12;
        hours = hours ? hours : 12; // the hour '0' should be '12'
        const strMinutes = minutes < 10 ? '0' + minutes : minutes;
        return `${hours}:${strMinutes} ${ampm}`;
      };

      return {
        id: appointment.id,
        date: appointmentDate.toISOString().split('T')[0],
        time: `${formatTime(startTime)} - ${formatTime(endTime)}`,
        officeLocation: appointment.location?.name || placeholder,
        patientName: appointment.patientCase?.patient?.name || placeholder,
        appointmentType: appointment.type ? toSentenceCase(appointment.type) : placeholder,
        caseStatus: appointment.status ? toSentenceCase(appointment.status) : placeholder,
      };
    });
  };

  const transformedData = useMemo(() => {
    return appointments ? transformAndFilterData(appointments) : [];
  }, [appointments]);

  return (
    <div className='mx-12'>
      <h1 className="font-inter text-4xl font-extrabold leading-[38.73px] text-left text-primary-900 mb-10">
        Appointments
      </h1>
      <Table columns={columns} data={transformedData} filters={filters} sortings={sortings} />
    </div>
  );
};

export default AppointmentListPage;