Skip to content

Refactor/patient appointments page UI #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aditya241104 merged 3 commits into from
Nov 3, 2025
Merged

Refactor/patient appointments page UI #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5098d3b
refactor:uses correct profilePicture path
aditya241104 Oct 30, 2025
84f73e4
fix:fixes prettier coding standard
aditya241104 Oct 30, 2025
414737e
refactor:patinet appointment UI
aditya241104 Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 82 additions & 91 deletions client/src/components/Patient/PatientAppointments/AppointmentCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,130 +29,121 @@ const AppointmentCard = ({ appointment, prescriptionStatus, onAppointmentClick }
const getStatusBadge = (status) => {
const statusConfig = {
pending: {
color: 'bg-yellow-100 text-yellow-800 border-yellow-200',
icon: <Clock3 className="w-3 h-3" />,
text: 'Pending',
color: 'bg-blue-50 text-blue-700 border-blue-100',
icon: <Clock className="w-3 h-3" strokeWidth={2} />,
label: 'Pending',
},
confirmed: {
color: 'bg-blue-100 text-blue-800 border-blue-200',
icon: <CheckCircle className="w-3 h-3" />,
text: 'Confirmed',
color: 'bg-blue-600 text-white border-blue-600',
icon: <CheckCircle className="w-3 h-3" strokeWidth={2} />,
label: 'Confirmed',
},
completed: {
color: 'bg-green-100 text-green-800 border-green-200',
icon: <CheckCircle className="w-3 h-3" />,
text: 'Completed',
color: 'bg-gray-100 text-black border-gray-200',
icon: <CheckCircle className="w-3 h-3" strokeWidth={2} />,
label: 'Completed',
},
cancelled: {
color: 'bg-red-100 text-red-800 border-red-200',
icon: <XCircle className="w-3 h-3" />,
text: 'Cancelled',
},
'no-show': {
color: 'bg-gray-100 text-gray-800 border-gray-200',
icon: <AlertCircle className="w-3 h-3" />,
text: 'No Show',
color: 'bg-gray-100 text-gray-600 border-gray-200',
icon: <XCircle className="w-3 h-3" strokeWidth={2} />,
label: 'Cancelled',
},
};

const config = statusConfig[status] || statusConfig.pending;

return (
<span
className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium border ${config.color}`}
className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-light border ${config.color}`}
>
{config.icon}
{config.text}
{config.label}
</span>
);
};

const { date: formattedDate, time: formattedTime } = formatDateTime(
appointment.date,
appointment.startTime
);
const { date, time } = formatDateTime(appointment.date, appointment.startTime);
const hasPrescription = prescriptionStatus[appointment._id];

return (
<div
onClick={() => onAppointmentClick(appointment._id)}
className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md hover:border-blue-200 transition-all duration-200 cursor-pointer group"
>
{/* Header */}
<div className="flex items-start justify-between mb-4">
<div className="flex items-center gap-3">
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-full flex items-center justify-center text-white font-semibold">
{appointment.doctorId?.firstName?.[0]}
{appointment.doctorId?.lastName?.[0]}
</div>
<div>
<h3 className="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
Dr. {appointment.doctorId?.firstName} {appointment.doctorId?.lastName}
</h3>
<p className="text-sm text-gray-600">{appointment.doctorId?.specialization}</p>
</div>
</div>
{getStatusBadge(appointment.status)}
</div>
<div className="bg-white border border-gray-200 rounded-lg hover:shadow-md transition-all duration-200">
<div className="p-4 sm:p-5">
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-4">
<div className="flex items-start gap-3 flex-1 min-w-0">
<div className="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0 overflow-hidden border border-gray-200">
{appointment.doctorId?.profilePicture ? (
<img
src={appointment.doctorId.profilePicture}
alt={`${appointment.doctorId?.firstName} ${appointment.doctorId?.lastName}`}
className="w-full h-full object-cover"
/>
) : (
<User className="w-6 h-6 text-gray-400" strokeWidth={1.5} />
)}
</div>

{/* Appointment Details */}
<div className="space-y-3">
{/* Date and Time */}
<div className="flex items-center gap-4">
<div className="flex items-center gap-2 text-gray-700">
<Calendar className="w-4 h-4" />
<span className="text-sm">{formattedDate}</span>
</div>
<div className="flex items-center gap-2 text-gray-700">
<Clock className="w-4 h-4" />
<span className="text-sm">{formattedTime}</span>
<div className="flex-1 min-w-0">
<h3 className="text-base font-normal text-black mb-0.5 truncate">
Dr. {appointment.doctorId?.firstName} {appointment.doctorId?.lastName}
</h3>
<p className="text-xs text-gray-500 font-light mb-2">
{appointment.doctorId?.specialization}
</p>
<div className="flex items-center gap-1.5 text-xs text-gray-600">
<AlertCircle className="w-3.5 h-3.5 flex-shrink-0" strokeWidth={1.5} />
<span className="font-light truncate">{appointment.reason}</span>
</div>
</div>
</div>
</div>

{/* Clinic */}
<div className="flex items-center gap-2 text-gray-700">
<MapPin className="w-4 h-4 flex-shrink-0" />
<span className="text-sm truncate">{appointment.clinicId?.name}</span>
<div className="flex sm:flex-col items-start gap-2">
{getStatusBadge(appointment.status)}
</div>
</div>

{/* Consultation Type */}
<div className="flex items-center gap-2">
{appointment.isTeleconsultation ? (
<>
<Video className="w-4 h-4 text-green-600" />
<span className="text-sm text-green-600 font-medium">Video Consultation</span>
</>
) : (
<>
<User className="w-4 h-4 text-blue-600" />
<span className="text-sm text-blue-600 font-medium">In-Person Visit</span>
</>
)}
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-4 pt-4 border-t border-gray-100">
<div className="flex items-center gap-2 text-sm">
<Calendar className="w-4 h-4 text-gray-400 flex-shrink-0" strokeWidth={1.5} />
<span className="text-gray-600 font-light">{date}</span>
</div>

{/* Reason */}
{appointment.reason && (
<div className="bg-gray-50 rounded-lg p-3">
<p className="text-sm text-gray-700">
<span className="font-medium">Reason: </span>
{appointment.reason}
</p>
<div className="flex items-center gap-2 text-sm">
<Clock3 className="w-4 h-4 text-gray-400 flex-shrink-0" strokeWidth={1.5} />
<span className="text-gray-600 font-light">
{time} - {format(new Date(`2000-01-01T${appointment.endTime}`), 'hh:mm a')}
</span>
</div>
)}

{/* Prescription Status */}
<div className="flex items-center justify-between pt-3 border-t border-gray-100">
<div className="flex items-center gap-2">
<FileText className="w-4 h-4" />
<span className="text-sm text-gray-600">Prescription:</span>
{hasPrescription ? (
<span className="text-sm text-green-600 font-medium">Available</span>
<div className="flex items-center gap-2 text-sm">
{appointment.appointmentType === 'virtual' ? (
<>
<Video className="w-4 h-4 text-blue-600 flex-shrink-0" strokeWidth={1.5} />
<span className="text-gray-600 font-light">Virtual</span>
</>
) : (
<span className="text-sm text-gray-400">Not available</span>
<>
<MapPin className="w-4 h-4 text-gray-400 flex-shrink-0" strokeWidth={1.5} />
<span className="text-gray-600 font-light truncate">
{appointment.clinicId?.name || 'In-Person'}
</span>
</>
)}
</div>
<Eye className="w-4 h-4 text-gray-400 group-hover:text-blue-600 transition-colors" />

{hasPrescription && (
<div className="flex items-center gap-2 text-sm">
<FileText className="w-4 h-4 text-blue-600 flex-shrink-0" strokeWidth={1.5} />
<span className="text-blue-600 font-light">Prescription Available</span>
</div>
)}
</div>

<button
onClick={() => onAppointmentClick(appointment._id)}
className="w-full py-2.5 px-4 text-sm font-light text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 transition-all flex items-center justify-center gap-2"
>
<Eye className="w-4 h-4" strokeWidth={1.5} />
View Details
</button>
</div>
</div>
);
Expand Down
65 changes: 33 additions & 32 deletions client/src/components/Patient/PatientAppointments/AppointmentHeader.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,41 @@ import { Search, Filter } from 'lucide-react';

const AppointmentHeader = ({ searchTerm, setSearchTerm, filterStatus, setFilterStatus }) => {
return (
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-8">
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
<div>
<h1 className="text-2xl font-bold text-gray-900 mb-2">My Appointments</h1>
<p className="text-gray-600">Manage and view your medical appointments</p>
</div>
<div className="mb-8">
<div className="mb-6">
<h1 className="text-2xl sm:text-3xl font-light text-black tracking-tight">
My Appointments
</h1>
<p className="mt-1 text-sm text-gray-500 font-light">
Manage and view your medical appointments
</p>
</div>

{/* Search and Filter */}
<div className="flex flex-col sm:flex-row gap-3 lg:w-96">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<input
type="text"
placeholder="Search by doctor, clinic, or reason..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div className="flex flex-col sm:flex-row gap-3">
<div className="flex-1 relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<input
type="text"
placeholder="Search by doctor, clinic, or reason..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 transition-all"
/>
</div>

<div className="relative">
<Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
<select
value={filterStatus}
onChange={(e) => setFilterStatus(e.target.value)}
className="pl-10 pr-8 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent appearance-none bg-white"
>
<option value="all">All Status</option>
<option value="pending">Pending</option>
<option value="confirmed">Confirmed</option>
<option value="completed">Completed</option>
<option value="cancelled">Cancelled</option>
</select>
</div>
<div className="relative sm:w-48">
<Filter className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4 pointer-events-none" />
<select
value={filterStatus}
onChange={(e) => setFilterStatus(e.target.value)}
className="w-full pl-10 pr-4 py-2.5 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 appearance-none bg-white cursor-pointer transition-all"
>
<option value="all">All Status</option>
<option value="pending">Pending</option>
<option value="confirmed">Confirmed</option>
<option value="completed">Completed</option>
<option value="cancelled">Cancelled</option>
</select>
</div>
</div>
</div>
Expand Down
56 changes: 0 additions & 56 deletions client/src/components/Patient/PatientAppointments/AppointmentStats.jsx
View file
Open in desktop

This file was deleted.

Loading