Ignore:
Timestamp:
09/04/26 19:08:08 (11 days ago)
Author:
MBK <marija.karapandzova@…>
Branches:
master
Children:
cdcff72
Parents:
e1f74f6
Message:

Fix frontend appearance

File:
1 edited

Legend:

Unmodified
Added
Removed

  • frontend/src/pages/appointments/AppointmentList.js

    re1f74f6 r9af201e  
    1515
    1616  useEffect(() => {
    17     fetchAppointments();
     17    const fetchAppointmentsData = async () => {
     18      try {
     19        setLoading(true);
     20        let response;
     21        if (patientId) {
     22          response = await appointmentService.getAppointmentsForPatient(patientId);
     23        } else if (doctorId) {
     24          response = await appointmentService.getAppointmentsForDoctor(doctorId);
     25        } else {
     26          response = await appointmentService.getAllAppointments();
     27        }
     28        setAppointments(response.data || []);
     29      } catch (err) {
     30        setError('Failed to fetch appointments');
     31        console.error(err);
     32      } finally {
     33        setLoading(false);
     34      }
     35    };
     36
     37    fetchAppointmentsData();
    1838  }, [doctorId, patientId]);
    19 
    20   const fetchAppointments = async () => {
    21     try {
    22       setLoading(true);
    23       let response;
    24       if (patientId) {
    25         response = await appointmentService.getAppointmentsForPatient(patientId);
    26       } else if (doctorId) {
    27         response = await appointmentService.getAppointmentsForDoctor(doctorId);
    28       } else if (user.role === 'PATIENT') {
    29         response = await appointmentService.getAppointmentsForPatient(user.patientId);
    30       } else if (user.role === 'DOCTOR') {
    31         response = await appointmentService.getAppointmentsForDoctor(user.doctorId);
    32       } else {
    33         response = await appointmentService.getAllAppointments();
    34       }
    35       setAppointments(response.data);
    36     } catch (err) {
    37       setError('Failed to fetch appointments');
    38       console.error(err);
    39     } finally {
    40       setLoading(false);
    41     }
    42   };
    4339
    4440  const handleCancelAppointment = async (id) => {
    … …  
    4743        await appointmentService.cancelAppointment(id);
    4844        setAppointments(appointments.map(apt =>
    49             apt.appointmentId === id ? { ...apt, status: 'CANCELLED' } : apt
     45          apt.appointmentId === id ? { ...apt, status: 'CANCELLED' } : apt
    5046        ));
    5147      } catch (err) {
    … …  
    5854
    5955  return (
    60       <div>
    61         <div className="flex justify-between items-center mb-6">
    62           <h1 className="text-3xl font-bold" style={{ color: '#7c3aed' }}>
    63             {patientId ? 'Patient Appointments' : doctorId ? 'My Appointments' : 'All Appointments'}
    64           </h1>
    65           <Link to="/appointments/new" style={{
    66             display: 'inline-block',
    67             background: '#bfdbfe',
    68             color: '#1e1035',
    69             padding: '8px 16px',
    70             borderRadius: '6px',
    71             textDecoration: 'none',
    72             fontSize: '14px',
    73             fontWeight: '400'
    74           }} onMouseEnter={(e) => e.currentTarget.style.background = '#93c5fd'} onMouseLeave={(e) => e.currentTarget.style.background = '#bfdbfe'}>
    75             New Appointment
    76           </Link>
    77         </div>
     56    <div>
     57      <div className="flex justify-between items-center mb-6">
     58        <h1 className="text-3xl font-bold" style={{ color: '#7c3aed' }}>
     59          {patientId ? 'Patient Appointments' : doctorId ? 'My Appointments' : 'All Appointments'}
     60        </h1>
     61        <Link to="/appointments/new" style={{
     62          display: 'inline-block',
     63          background: '#bfdbfe',
     64          color: '#1e1035',
     65          padding: '8px 16px',
     66          borderRadius: '6px',
     67          textDecoration: 'none',
     68          fontSize: '14px',
     69          fontWeight: '400'
     70        }} onMouseEnter={(e) => e.currentTarget.style.background = '#93c5fd'} onMouseLeave={(e) => e.currentTarget.style.background = '#bfdbfe'}>
     71          New Appointment
     72        </Link>
     73      </div>
    7874
    79         {error && <ErrorAlert message={error} onClose={() => setError(null)} />}
     75      {error && <ErrorAlert message={error} onClose={() => setError(null)} />}
    8076
    81         <div className="bg-white rounded-lg shadow overflow-hidden">
    82           <table className="w-full">
    83             <thead className="bg-gray-100">
     77      <div className="bg-white rounded-lg shadow overflow-hidden">
     78        <table className="w-full">
     79          <thead className="bg-gray-100">
    8480            <tr>
    8581              <th className="px-6 py-3 text-left text-sm font-semibold">Patient</th>
    … …  
    9086              <th className="px-6 py-3 text-left text-sm font-semibold">Actions</th>
    9187            </tr>
    92             </thead>
    93             <tbody>
     88          </thead>
     89          <tbody>
    9490            {appointments.map(appointment => (
    95                 <tr key={appointment.appointmentId} className="border-t hover:bg-gray-50">
    96                   <td className="px-6 py-3">{appointment.patient?.firstName} {appointment.patient?.lastName}</td>
    97                   <td className="px-6 py-3">Dr. {appointment.doctor?.firstName} {appointment.doctor?.lastName}</td>
    98                   <td className="px-6 py-3">{appointment.appointmentDate}</td>
    99                   <td className="px-6 py-3">{appointment.appointmentTime}</td>
    100                   <td className="px-6 py-3">
     91              <tr key={appointment.appointmentId} className="border-t hover:bg-gray-50">
     92                <td className="px-6 py-3">{appointment.patient?.firstName} {appointment.patient?.lastName}</td>
     93                <td className="px-6 py-3">Dr. {appointment.doctor?.firstName} {appointment.doctor?.lastName}</td>
     94                <td className="px-6 py-3">{appointment.appointmentDate}</td>
     95                <td className="px-6 py-3">{appointment.appointmentTime}</td>
     96                <td className="px-6 py-3">
    10197                  <span className={`px-3 py-1 rounded text-sm font-semibold ${
    102                       appointment.status === 'SCHEDULED' ? 'bg-purple-100 text-purple-800' :
    103                           appointment.status === 'COMPLETED' ? 'bg-green-100 text-green-800' :
    104                               'bg-red-100 text-red-800'
     98                    appointment.status === 'SCHEDULED' ? 'bg-purple-100 text-purple-800' :
     99                    appointment.status === 'COMPLETED' ? 'bg-green-100 text-green-800' :
     100                    'bg-red-100 text-red-800'
    105101                  }`}>
    106102                    {appointment.status}
    107103                  </span>
    108                   </td>
    109                   <td className="px-6 py-3">
    110                     {appointment.status === 'SCHEDULED' && (
    111                         (user.role === 'DOCTOR' && appointment.doctor?.doctorId !== user.doctorId) ? null : (
    112                             <button
    113                                 onClick={() => handleCancelAppointment(appointment.appointmentId)}
    114                                 className="text-red-600 hover:underline px-3 py-2 text-sm font-medium"
    115                             >
    116                               Cancel
    117                             </button>
    118                         )
    119                     )}
    120                   </td>
    121                 </tr>
     104                </td>
     105                <td className="px-6 py-3">
     106                  {appointment.status === 'SCHEDULED' && (
     107                    (user.role === 'DOCTOR' && appointment.doctor?.doctorId !== user.doctorId) ? null : (
     108                      <button
     109                        onClick={() => handleCancelAppointment(appointment.appointmentId)}
     110                        className="text-red-600 hover:underline px-3 py-2 text-sm font-medium"
     111                      >
     112                        Cancel
     113                      </button>
     114                    )
     115                  )}
     116                </td>
     117              </tr>
    122118            ))}
    123             </tbody>
    124           </table>
    125         </div>
     119          </tbody>
     120        </table>
    126121      </div>
     122    </div>
    127123  );
    128124}
Note: See TracChangeset for help on using the changeset viewer.