Add OP number to treatment summary. (#6898)

* add op * Add correct borders in treatment summary * Update TreatmentSummary.tsx * add space * add extra cols
ohcnetwork · Dec 28, 2023 · 4a49768 · 4a49768
1 parent 36fa6e3
commit 4a49768
Showing 1 changed file with 22 additions and 12 deletions.
diff --git a/src/Components/Facility/TreatmentSummary.tsx b/src/Components/Facility/TreatmentSummary.tsx
@@ -122,22 +122,32 @@ const TreatmentSummary = (props: any) => {
             <div className="text-right font-bold">{formatDate(date)}</div>
 
             <div className="mb-5 mt-2 border border-gray-800">
-              <div className="grid border-b-2 border-gray-800 print:grid-cols-3 sm:grid-cols-3">
+              <div className="grid border-b-2 border-gray-800 print:grid-cols-3 sm:grid-cols-2 print:md:grid-cols-3">
                 <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 print:border-b-0 print:border-r-2 sm:border-b-0 sm:border-r-2">
                   <b>Name :</b> {patientData.name}
                 </div>
                 <div className="col-span-1 px-3 py-2">
-                  <b>Address :</b> {patientData.address}
+                  <b>Address : </b> {patientData.address}
                 </div>
               </div>
 
-              <div className="grid border-b-2 border-gray-800 print:grid-cols-3 sm:grid-cols-2 md:grid-cols-3">
-                <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 print:border-b-0 print:border-r-2 sm:border-r-2 md:border-b-0 ">
-                  <b>Age :</b>{" "}
-                  {formatAge(patientData.age, patientData.date_of_birth, true)}
+              <div className="grid border-b-2 border-gray-800 print:grid-cols-3 sm:grid-cols-2 print:md:grid-cols-3">
+                <div className="col-span-1 grid print:grid-cols-2 sm:grid-cols-2 ">
+                  <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 print:border-b-0 print:border-r-2 sm:border-b-0 sm:border-r-2">
+                    <b>Age :</b>{" "}
+                    {formatAge(
+                      patientData.age,
+                      patientData.date_of_birth,
+                      true
+                    )}
+                  </div>
+                  <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 print:border-b-0 print:border-r-2 sm:border-b-0 sm:border-r-2">
+                    <b>OP :</b> {consultationData.patient_no}
+                  </div>
                 </div>
-                <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 print:border-b-0  md:border-b-0 ">
-                  <b>Date of admission :</b>
+
+                <div className="col-span-1 px-3 py-2">
+                  <b>Date of admission : </b>
                   <span>
                     {consultationData.admitted
                       ? formatDateTime(consultationData.encounter_date)
@@ -146,13 +156,13 @@ const TreatmentSummary = (props: any) => {
                 </div>
               </div>
 
-              <div className="grid border-b-2 border-gray-800 print:grid-cols-3 sm:grid-cols-2 md:grid-cols-3">
-                <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 print:border-b-0 print:border-r-2 sm:border-r-2 md:border-b-0">
-                  <b>Gender :</b>
+              <div className="grid border-b-2 border-gray-800 print:grid-cols-3 sm:grid-cols-2 print:md:grid-cols-3">
+                <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 print:border-b-0 print:border-r-2 sm:border-b-0 sm:border-r-2">
+                  <b>Gender : </b>
                   {GENDER_TYPES.find((i) => i.id === patientData.gender)?.text}
                 </div>
 
-                <div className="col-span-1 border-b-2 border-gray-800 px-3 py-2 print:border-b-0  md:border-b-0 ">
+                <div className="col-span-1 px-3 py-2">
                   <b>Contact person :</b>
                   <span>
                     {" "}