Skip to content

Commit e575f61

Browse files
aditya241104aditya241104
committed
refactor(ui): improve UI and responsiveness for patient prescription (closes #66)
1 parent 7e39347 commit e575f61

7 files changed

Lines changed: 73 additions & 40 deletions

File tree

‎client/src/components/Patient/AppointmentDetails/PrescriptionSection.jsx‎

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,28 +23,45 @@ const PrescriptionSection = ({ prescription, appointment }) => {
2323
};
2424

2525
return (
26-
<div className="bg-white rounded-lg shadow-sm border p-6">
27-
<div className="flex items-center justify-between mb-6">
28-
<h2 className="text-lg font-semibold text-gray-900 flex items-center">
29-
<Pill className="h-5 w-5 mr-2 text-blue-600" />
30-
Prescription Details
31-
</h2>
32-
<button
26+
<div className="w-full bg-gray-50 p-2 sm:p-3 min-h-screen flex flex-col">
27+
{/* Professional Prescription Header */}
28+
<div className="flex justify-between items-center px-3 sm:px-4 py-2.5 sm:py-3 bg-gradient-to-r rounded-t-lg">
29+
<div className="flex items-center gap-2">
30+
<Pill className="text-black" size={20} />
31+
<h2 className="text-black text-base sm:text-lg font-semibold m-0">
32+
Medical Prescription
33+
</h2>
34+
</div>
35+
<button
3336
onClick={handleDownloadPDF}
3437
disabled={downloadLoading}
35-
className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
38+
className="flex items-center gap-1.5 px-2.5 sm:px-3 py-1.5 sm:py-2 bg-white text-indigo-600 border-0 rounded-md text-xs sm:text-sm font-medium cursor-pointer hover:-translate-y-0.5 hover:shadow-lg transition-all disabled:opacity-60 disabled:cursor-not-allowed"
3639
>
37-
<Download className="h-4 w-4 mr-2" />
38-
{downloadLoading ? 'Generating PDF...' : 'Download PDF'}
40+
<Download size={14} />
41+
<span className="hidden sm:inline">{downloadLoading ? 'Generating...' : 'Download'}</span>
42+
<span className="sm:hidden">PDF</span>
3943
</button>
4044
</div>
4145

42-
<Diagnosis diagnosis={prescription.diagnosis} />
43-
<Medications medications={prescription.medications} />
44-
<Tests tests={prescription.tests} />
45-
<Notes notes={prescription.notes} />
46-
<FollowUp followUpDate={prescription.followUpDate} />
47-
<PrescriptionDate date={prescription.date} />
46+
{/* Prescription Content */}
47+
<div className="bg-white rounded-b-lg shadow-md overflow-hidden flex-1">
48+
<div className="p-3 sm:p-4 space-y-3 sm:space-y-4">
49+
<PrescriptionDate date={prescription.date} />
50+
<Diagnosis diagnosis={prescription.diagnosis} />
51+
<Medications medications={prescription.medications} />
52+
<Tests tests={prescription.tests} />
53+
<Notes notes={prescription.notes} />
54+
<FollowUp followUpDate={prescription.followUpDate} />
55+
56+
{/* Doctor Signature */}
57+
<div className="mt-6 sm:mt-8 pt-3 sm:pt-4 border-t border-gray-200 text-right">
58+
<p className='text-ls text-gray-500 m-0'>Dr.{appointment.doctorId.firstName}{appointment.doctorId.lastName}</p>
59+
<div className="w-32 sm:w-40 h-px bg-gray-700 ml-auto mb-1"></div>
60+
<p className="text-xs text-gray-500 m-0">Doctor's Signature</p>
61+
{console.log(appointment)}
62+
</div>
63+
</div>
64+
</div>
4865
</div>
4966
);
5067
};

‎client/src/components/Patient/AppointmentDetails/prescription/Diagnosis.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@ const Diagnosis = ({ diagnosis }) => {
33

44
return (
55
<div className="mb-4">
6-
<h3 className="font-medium text-gray-900 mb-2">Diagnosis</h3>
7-
<p className="text-gray-600 bg-blue-50 p-3 rounded-md">{diagnosis}</p>
6+
<h3 className="font-medium text-gray-900 mb-2 text-sm sm:text-base">Diagnosis</h3>
7+
<p className="text-gray-600 bg-blue-50 p-2 sm:p-3 rounded-md text-xs sm:text-sm">
8+
{diagnosis}
9+
</p>
810
</div>
911
);
1012
};

‎client/src/components/Patient/AppointmentDetails/prescription/FollowUp.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ const FollowUp = ({ followUpDate }) => {
55

66
return (
77
<div className="mb-4">
8-
<h3 className="font-medium text-gray-900 mb-2">Follow-up Date</h3>
9-
<p className="text-gray-600">{formatDate(followUpDate)}</p>
8+
<h3 className="font-medium text-gray-900 mb-2 text-sm sm:text-base">Follow-up Date</h3>
9+
<p className="text-gray-600 text-xs sm:text-sm">{formatDate(followUpDate)}</p>
1010
</div>
1111
);
1212
};

‎client/src/components/Patient/AppointmentDetails/prescription/Medications.jsx‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,35 @@ const Medications = ({ medications }) => {
44
return (
55
<div className="mb-4">
66
<h3 className="font-medium text-gray-900 mb-3">Medications</h3>
7-
<div className="overflow-x-auto">
8-
<table className="w-full text-sm">
7+
<div className="overflow-hidden">
8+
<table className="w-full text-xs sm:text-sm">
99
<thead>
1010
<tr className="bg-gray-50">
11-
<th className="text-left p-3 font-medium">Medication</th>
12-
<th className="text-left p-3 font-medium">Dosage</th>
13-
<th className="text-left p-3 font-medium">Frequency</th>
14-
<th className="text-left p-3 font-medium">Duration</th>
15-
<th className="text-left p-3 font-medium">Instructions</th>
11+
<th className="text-left p-1.5 sm:p-3 font-medium text-[10px] sm:text-sm">Med</th>
12+
<th className="text-left p-1.5 sm:p-3 font-medium text-[10px] sm:text-sm">Dose</th>
13+
<th className="text-left p-1.5 sm:p-3 font-medium text-[10px] sm:text-sm">Freq</th>
14+
<th className="text-left p-1.5 sm:p-3 font-medium text-[10px] sm:text-sm">Days</th>
15+
<th className="text-left p-1.5 sm:p-3 font-medium text-[10px] sm:text-sm">Notes</th>
1616
</tr>
1717
</thead>
1818
<tbody className="divide-y divide-gray-200">
1919
{medications.map((med, index) => (
2020
<tr key={index}>
21-
<td className="p-3 font-medium text-gray-900">{med.name}</td>
22-
<td className="p-3 text-gray-600">{med.dosage}</td>
23-
<td className="p-3 text-gray-600">{med.frequency}</td>
24-
<td className="p-3 text-gray-600">{med.duration}</td>
25-
<td className="p-3 text-gray-600">{med.instructions || 'Take as directed'}</td>
21+
<td className="p-1.5 sm:p-3 font-medium text-gray-900 text-[10px] sm:text-sm">
22+
{med.name}
23+
</td>
24+
<td className="p-1.5 sm:p-3 text-gray-600 text-[10px] sm:text-sm">
25+
{med.dosage}
26+
</td>
27+
<td className="p-1.5 sm:p-3 text-gray-600 text-[10px] sm:text-sm">
28+
{med.frequency}
29+
</td>
30+
<td className="p-1.5 sm:p-3 text-gray-600 text-[10px] sm:text-sm">
31+
{med.duration}
32+
</td>
33+
<td className="p-1.5 sm:p-3 text-gray-600 text-[10px] sm:text-sm">
34+
{med.instructions || 'As directed'}
35+
</td>
2636
</tr>
2737
))}
2838
</tbody>

‎client/src/components/Patient/AppointmentDetails/prescription/Notes.jsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@ const Notes = ({ notes }) => {
33

44
return (
55
<div className="mb-4">
6-
<h3 className="font-medium text-gray-900 mb-2">Additional Notes</h3>
7-
<p className="text-gray-600 bg-yellow-50 p-3 rounded-md">{notes}</p>
6+
<h3 className="font-medium text-gray-900 mb-2 text-sm sm:text-base">Additional Notes</h3>
7+
<p className="text-gray-600 bg-yellow-50 p-2 sm:p-3 rounded-md text-xs sm:text-sm">
8+
{notes}
9+
</p>
810
</div>
911
);
1012
};

‎client/src/components/Patient/AppointmentDetails/prescription/PrescriptionDate.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { formatDate } from '../utils/formatters';
22

33
const PrescriptionDate = ({ date }) => {
44
return (
5-
<div className="pt-4 border-t border-gray-200 text-sm text-gray-500">
5+
<div className="pt-3 sm:pt-4 border-t border-gray-200 text-xs sm:text-sm text-gray-500">
66
<p>Prescription Date: {formatDate(date)}</p>
77
</div>
88
);

‎client/src/components/Patient/AppointmentDetails/prescription/Tests.jsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ const Tests = ({ tests }) => {
33

44
return (
55
<div className="mb-4">
6-
<h3 className="font-medium text-gray-900 mb-3">Recommended Tests</h3>
7-
<ul className="space-y-2">
6+
<h3 className="font-medium text-gray-900 mb-2 sm:mb-3 text-sm sm:text-base">Recommended Tests</h3>
7+
<ul className="space-y-1.5 sm:space-y-2">
88
{tests.map((test, index) => (
9-
<li key={index} className="bg-green-50 p-3 rounded-md">
10-
<span className="font-medium text-green-800">{test.name}</span>
9+
<li key={index} className="bg-green-50 p-2 sm:p-3 rounded-md">
10+
<span className="font-medium text-green-800 text-xs sm:text-sm">{test.name}</span>
1111
{test.instructions && (
12-
<p className="text-green-600 text-sm mt-1">Instructions: {test.instructions}</p>
12+
<p className="text-green-600 text-[10px] sm:text-sm mt-0.5 sm:mt-1">
13+
Instructions: {test.instructions}
14+
</p>
1315
)}
1416
</li>
1517
))}

0 commit comments

Comments
 (0)