From 4a497688142a4a8f440b657e06bfd83bace147d4 Mon Sep 17 00:00:00 2001
From: Ashraf Mohammed <98876115+AshrafMd-1@users.noreply.github.com>
Date: Thu, 28 Dec 2023 17:04:46 +0530
Subject: [PATCH] Add OP number to treatment summary. (#6898)

* add op

* Add correct borders in treatment summary

* Update TreatmentSummary.tsx

* add space

* add extra cols
---
 src/Components/Facility/TreatmentSummary.tsx | 34 +++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/Components/Facility/TreatmentSummary.tsx b/src/Components/Facility/TreatmentSummary.tsx
index 8291e0e8ba4..8f1589cdf6f 100644
--- 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>
                     {" "}