From 99a729932ae95185495bff7c832123ef9122afea Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Wed, 5 Jun 2024 09:20:51 +0530
Subject: [PATCH 1/5] Updated ABHA popup UI

---
 src/Components/ABDM/ABHAProfileModal.tsx | 101 ++++++++---------------
 1 file changed, 36 insertions(+), 65 deletions(-)

diff --git a/src/Components/ABDM/ABHAProfileModal.tsx b/src/Components/ABDM/ABHAProfileModal.tsx
index be991bb8f55..cbb3db5a8c2 100644
--- a/src/Components/ABDM/ABHAProfileModal.tsx
+++ b/src/Components/ABDM/ABHAProfileModal.tsx
@@ -71,75 +71,46 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
       <div
         ref={printRef}
         id="section-to-print"
-        className="print flex items-center justify-around border-black p-4 print:w-full print:border"
+        className="print flex gap-4 border-black print:w-full print:border"
       >
-        <>
-          <div className="flex flex-col items-center justify-evenly">
-            <div className="flex items-center justify-evenly gap-2 text-lg font-semibold">
-              {abha?.name ? (
-                <span> {abha?.name}</span>
-              ) : (
-                <>
-                  <span> {abha?.first_name}</span>
-                  <span> {abha?.middle_name} </span>
-                  <span> {abha?.last_name} </span>
-                </>
-              )}
-            </div>
-            <span className="font-bold">{abha?.abha_number}</span>
-            {abha?.health_id && (
-              <div className="flex items-center gap-1 font-bold">
-                <span>{abha.health_id.split("@")[0]}</span>
-                {/* <span className="text-gray-700 text-sm">@</span>
-                <span>{abha.health_id.split("@")[1] || "care"}</span> */}
+        <QRCode
+          className="border border-black p-1"
+          value={JSON.stringify({
+            hidn: abha?.abha_number,
+            phr: abha?.health_id,
+            name: abha?.name,
+            gender: abha?.gender,
+            dob: abha?.date_of_birth,
+            address: abha?.address,
+            "state name": abha?.state,
+            "dist name": abha?.district,
+          })}
+        />
+        <div className="flex flex-wrap gap-4">
+          {[
+            {
+              label: "Name",
+              value:
+                abha?.name ||
+                `${abha?.first_name} ${abha?.middle_name} ${abha?.last_name}`,
+            },
+            { label: "DOB", value: abha?.date_of_birth },
+            { label: "Gender", value: abha?.gender },
+            { label: "ABHA Number", value: abha?.abha_number },
+            { label: "ABHA ID", value: abha?.health_id?.split("@")[0] },
+            { label: "Email", value: abha?.email },
+          ].map((item, index) =>
+            item.value ? (
+              <div key={index}>
+                <div className="text-xs text-gray-700">{item.label}</div>
+                <div>{item.value}</div>
               </div>
-            )}
-            <div className="mt-2 flex flex-col">
-              {abha?.gender && (
-                <p className="text-sm text-gray-600">
-                  Gender:
-                  <span className="ml-2 text-base font-semibold text-gray-900">
-                    {abha?.gender}
-                  </span>
-                </p>
-              )}
-              {abha?.date_of_birth && (
-                <p className="text-sm text-gray-600">
-                  DOB:
-                  <span className="ml-2 text-base font-semibold text-gray-900">
-                    {abha?.date_of_birth}
-                  </span>
-                </p>
-              )}
-              {abha?.email && (
-                <p className="text-sm text-gray-600">
-                  Email:
-                  <span className="ml-2 text-base font-semibold text-gray-900">
-                    {abha?.email}
-                  </span>
-                </p>
-              )}
-            </div>
-          </div>
-        </>
-        <>
-          <QRCode
-            className="border border-black p-1"
-            value={JSON.stringify({
-              hidn: abha?.abha_number,
-              phr: abha?.health_id,
-              name: abha?.name,
-              gender: abha?.gender,
-              dob: abha?.date_of_birth,
-              address: abha?.address,
-              "state name": abha?.state,
-              "dist name": abha?.district,
-            })}
-          />
-        </>
+            ) : null,
+          )}
+        </div>
       </div>
 
-      <div className="mt-4 flex flex-col text-sm text-gray-700">
+      <div className="mt-4 flex flex-col text-xs text-gray-700">
         {abha?.created_date && (
           <div className="flex items-center gap-1">
             <span className="">Created On: </span>

From 8eed03714b01a37cafb4488bd87e57fbd9eb9358 Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Fri, 7 Jun 2024 08:25:34 +0530
Subject: [PATCH 2/5] made responsive

---
 src/Components/ABDM/ABHAProfileModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Components/ABDM/ABHAProfileModal.tsx b/src/Components/ABDM/ABHAProfileModal.tsx
index cbb3db5a8c2..435379be5a5 100644
--- a/src/Components/ABDM/ABHAProfileModal.tsx
+++ b/src/Components/ABDM/ABHAProfileModal.tsx
@@ -71,7 +71,7 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
       <div
         ref={printRef}
         id="section-to-print"
-        className="print flex gap-4 border-black print:w-full print:border"
+        className="print flex flex-col gap-4 border-black sm:flex-row print:w-full print:border"
       >
         <QRCode
           className="border border-black p-1"

From 8856fc477c6a519c18a1b2471ffc3e54cd9b0477 Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Tue, 11 Jun 2024 17:46:53 +0530
Subject: [PATCH 3/5] popup

---
 src/Components/ABDM/ABHAProfileModal.tsx | 28 +++++++++++++-----------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/Components/ABDM/ABHAProfileModal.tsx b/src/Components/ABDM/ABHAProfileModal.tsx
index 435379be5a5..39e59b09acb 100644
--- a/src/Components/ABDM/ABHAProfileModal.tsx
+++ b/src/Components/ABDM/ABHAProfileModal.tsx
@@ -73,19 +73,21 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
         id="section-to-print"
         className="print flex flex-col gap-4 border-black sm:flex-row print:w-full print:border"
       >
-        <QRCode
-          className="border border-black p-1"
-          value={JSON.stringify({
-            hidn: abha?.abha_number,
-            phr: abha?.health_id,
-            name: abha?.name,
-            gender: abha?.gender,
-            dob: abha?.date_of_birth,
-            address: abha?.address,
-            "state name": abha?.state,
-            "dist name": abha?.district,
-          })}
-        />
+        <div className="sm:aspect-square sm:h-52">
+          <QRCode
+            className="border border-black p-1 sm:h-full sm:w-full"
+            value={JSON.stringify({
+              hidn: abha?.abha_number,
+              phr: abha?.health_id,
+              name: abha?.name,
+              gender: abha?.gender,
+              dob: abha?.date_of_birth,
+              address: abha?.address,
+              "state name": abha?.state,
+              "dist name": abha?.district,
+            })}
+          />
+        </div>
         <div className="flex flex-wrap gap-4">
           {[
             {

From e1635350b10308c45e0ac229eff44879e0cf2807 Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Sat, 15 Jun 2024 02:30:51 +0530
Subject: [PATCH 4/5] fixed qr

---
 src/Components/ABDM/ABHAProfileModal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Components/ABDM/ABHAProfileModal.tsx b/src/Components/ABDM/ABHAProfileModal.tsx
index 39e59b09acb..6077823d5a0 100644
--- a/src/Components/ABDM/ABHAProfileModal.tsx
+++ b/src/Components/ABDM/ABHAProfileModal.tsx
@@ -73,9 +73,9 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
         id="section-to-print"
         className="print flex flex-col gap-4 border-black sm:flex-row print:w-full print:border"
       >
-        <div className="sm:aspect-square sm:h-52">
+        <div className="flex-1 sm:aspect-square sm:h-40 sm:flex-auto">
           <QRCode
-            className="border border-black p-1 sm:h-full sm:w-full"
+            className="h-full w-full border border-black p-1"
             value={JSON.stringify({
               hidn: abha?.abha_number,
               phr: abha?.health_id,

From 9017d3b1b1a46de614061cd921cc5efbc53c3022 Mon Sep 17 00:00:00 2001
From: Shivank Kacker <kacker.shivank@gmail.com>
Date: Tue, 2 Jul 2024 20:14:52 +0530
Subject: [PATCH 5/5] updates

---
 src/Components/ABDM/ABHAProfileModal.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Components/ABDM/ABHAProfileModal.tsx b/src/Components/ABDM/ABHAProfileModal.tsx
index 6077823d5a0..7815165db7d 100644
--- a/src/Components/ABDM/ABHAProfileModal.tsx
+++ b/src/Components/ABDM/ABHAProfileModal.tsx
@@ -67,6 +67,8 @@ const ABHAProfileModal = ({ patientId, show, onClose, abha }: IProps) => {
       }
       show={show}
       onClose={onClose}
+      className="max-w-[500px]"
+      fixedWidth={false}
     >
       <div
         ref={printRef}