From f4e57c9e3de7dcce01404d192e66ef95cc619c62 Mon Sep 17 00:00:00 2001
From: Ashesh3 <3626859+Ashesh3@users.noreply.github.com>
Date: Sun, 16 Oct 2022 02:08:15 +0530
Subject: [PATCH 1/3] Added patient search by IP number

---
 src/Components/Patient/ManagePatients.tsx | 663 ++++++++++++----------
 1 file changed, 362 insertions(+), 301 deletions(-)

diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index 73dc008acd3..41bb84d15a9 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -93,6 +93,7 @@ export const PatientManager = (props: any) => {
     page: qParams.page || 1,
     limit: RESULT_LIMIT,
     name: qParams.name || undefined,
+    ip_no: qParams.ip_no || undefined,
     is_active: qParams.is_active || "True",
     disease_status: qParams.disease_status || undefined,
     phone_number: qParams.phone_number
@@ -255,6 +256,7 @@ export const PatientManager = (props: any) => {
     qParams.is_active,
     qParams.disease_status,
     qParams.name,
+    qParams.ip_no,
     qParams.page,
     qParams.phone_number,
     qParams.emergency_phone_number,
@@ -354,6 +356,10 @@ export const PatientManager = (props: any) => {
     updateQuery({ name: value, page: 1 });
   };
 
+  const searchByIpNo = (value: string) => {
+    updateQuery({ ip_no: value, page: 1 });
+  };
+
   const searchByPhone = (value: string, name: string) => {
     updateQuery({ [name]: value, page: 1 });
   };
@@ -626,7 +632,7 @@ export const PatientManager = (props: any) => {
   } else if (data && data.length) {
     managePatients = (
       <>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
+        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-4 mt-4">
           {patientList}
         </div>
         {totalCount > RESULT_LIMIT && (
@@ -665,332 +671,387 @@ export const PatientManager = (props: any) => {
         breadcrumbs={!!facilityId}
         crumbsReplacements={{ [facilityId]: { name: facilityCrumbName } }}
       />
-      <div className="mt-5 manualGrid grid-cols-1 gap-3 sm:grid-cols-3 my-4 px-2 md:px-0 relative">
-        <div className="title-text sm:flex align-center gap-2">
-          <div className="text-center">
-            <button
-              onClick={handleDownloadFiltered}
-              disabled={!isDownloadAllowed}
-              className="btn text-green-500 disabled:text-gray-500 disabled:hover:bg-gray-50 font-medium hover:bg-green-50 border border-solid w-full sm:w-fit mb-2 sm:mb-0 sm:mr-2"
+      <div className="mt-5 manualGrid grid-cols-1 gap-3 sm:grid-cols-3 my-4 px-2 md:px-0 ">
+        <div>
+          <div className="flex flex-col right-3 top-0 gap-2 my-3 mr-3 sm:absolute sm:flex-row">
+            <Tooltip
+              title={
+                !isDownloadAllowed ? (
+                  <p className="self-end text-sm italic ">
+                    * Select a 7 day period
+                  </p>
+                ) : (
+                  ""
+                )
+              }
+              arrow={true}
+              interactive={true}
+              enterNextDelay={100}
+              enterTouchDelay={0}
+              leaveTouchDelay={1000}
             >
-              <i className="fa-solid fa-arrow-down-long mr-2"></i>DOWNLOAD{" "}
-              {tabValue === 0 ? "LIVE" : "DISCHARGED"} LIST
-            </button>
-            <CSVLink
-              id="downloadlink"
-              className="hidden"
-              data={DownloadFile}
-              filename={`patients-${now}.csv`}
-              target="_blank"
-            ></CSVLink>
+              <div className="text-center">
+                <button
+                  onClick={handleDownloadFiltered}
+                  disabled={!isDownloadAllowed}
+                  className="btn bg-green-500 hover:bg-green-600 text-white disabled:text-gray-50 disabled:bg-gray-500 disabled:hover:bg-gray-600 font-medium border border-solid w-full sm:w-fit mb-2 sm:mb-0 sm:mr-2"
+                >
+                  <span>
+                    <i className="fa-solid fa-arrow-down-long mr-2"></i>DOWNLOAD{" "}
+                    {tabValue === 0 ? "LIVE" : "DISCHARGED"} LIST
+                  </span>
+                </button>
+                <CSVLink
+                  id="downloadlink"
+                  className="hidden"
+                  data={DownloadFile}
+                  filename={`patients-${now}.csv`}
+                  target="_blank"
+                ></CSVLink>
+              </div>
+            </Tooltip>
+            <div className="flex flex-col gap-2">
+              <Tooltip
+                title={
+                  !isDownloadAllowed ? (
+                    <p className="self-end text-sm italic ">
+                      * Select a 7 day period
+                    </p>
+                  ) : (
+                    ""
+                  )
+                }
+                arrow={true}
+                interactive={true}
+                enterNextDelay={100}
+                enterTouchDelay={0}
+                leaveTouchDelay={1000}
+              >
+                <div>
+                  <button
+                    disabled={!isDownloadAllowed}
+                    onClick={handleDownloadAll}
+                    className="btn bg-green-500 hover:bg-green-600 text-white disabled:text-gray-50 disabled:bg-gray-500 disabled:hover:bg-gray-600 font-medium border border-solid w-full sm:w-fit mb-2 sm:mb-0 sm:mr-2"
+                  >
+                    <span>
+                      <i className="fa-solid fa-arrow-down-long mr-2"></i>
+                      DOWNLOAD ALL PATIENTS
+                    </span>
+                  </button>
+                </div>
+              </Tooltip>
+            </div>
+            <div>
+              <button
+                className="btn btn-primary-ghost w-full md:w-fit"
+                onClick={(_) => setShowFilters((show) => !show)}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="fill-current w-4 h-4 mr-2"
+                >
+                  <line x1="8" y1="6" x2="21" y2="6"></line>
+                  <line x1="8" y1="12" x2="21" y2="12">
+                    {" "}
+                  </line>
+                  <line x1="8" y1="18" x2="21" y2="18">
+                    {" "}
+                  </line>
+                  <line x1="3" y1="6" x2="3.01" y2="6">
+                    {" "}
+                  </line>
+                  <line x1="3" y1="12" x2="3.01" y2="12">
+                    {" "}
+                  </line>
+                  <line x1="3" y1="18" x2="3.01" y2="18">
+                    {" "}
+                  </line>
+                </svg>
+                <span>Advanced Filters</span>
+              </button>
+            </div>
           </div>
-          <div className="flex flex-col gap-2">
+          <div className="flex flex-col mt-2">
+            <div className="bg-white overflow-hidden shadow rounded-lg mb-2">
+              <div className="px-4 py-5 sm:p-6">
+                <dl>
+                  <dt className="text-sm leading-5 font-medium text-gray-500 truncate">
+                    Total Patients
+                  </dt>
+                  {/* Show spinner until count is fetched from server */}
+                  {isLoading ? (
+                    <dd className="mt-4 text-5xl leading-9">
+                      <svg
+                        className="animate-spin -ml-1 mr-3 h-10 w-10 text-primary-500"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                      >
+                        <circle
+                          className="opacity-25"
+                          cy="12"
+                          cx="12"
+                          r="10"
+                          stroke="currentColor"
+                          strokeWidth="4"
+                        ></circle>
+                        <path
+                          className="opacity-75"
+                          fill="currentColor"
+                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        ></path>
+                      </svg>
+                    </dd>
+                  ) : (
+                    <dd className="mt-4 text-5xl leading-9 font-semibold text-gray-900">
+                      {totalCount}
+                    </dd>
+                  )}
+                </dl>
+              </div>
+            </div>
             <button
-              disabled={!isDownloadAllowed}
-              onClick={handleDownloadAll}
-              className="btn text-green-500 disabled:text-gray-500 disabled:hover:bg-gray-50 hover:bg-green-50 font-medium border border-solid"
+              className="btn-primary btn w-full md:w-fit"
+              onClick={() => {
+                if (facilityId) {
+                  navigate(`/facility/${facilityId}/patient`);
+                } else {
+                  setShowDialog(true);
+                }
+              }}
+              data-testid="add-patient-button"
             >
-              <i className="fa-solid fa-arrow-down-long mr-2"></i>DOWNLOAD ALL
-              PATIENTS
+              <i className="fas fa-plus mr-2 text-white"></i>
+              Add Details of a Patient
             </button>
-            {!isDownloadAllowed && (
-              <p className="self-end text-sm italic text-red-400">
-                * Select a 7 day period
-              </p>
-            )}
-          </div>
-        </div>
-        <div className="bg-white overflow-hidden shadow rounded-lg">
-          <div className="px-4 py-5 sm:p-6">
-            <dl>
-              <dt className="text-sm leading-5 font-medium text-gray-500 truncate">
-                Total Patients
-              </dt>
-              {/* Show spinner until count is fetched from server */}
-              {isLoading ? (
-                <dd className="mt-4 text-5xl leading-9">
-                  <svg
-                    className="animate-spin -ml-1 mr-3 h-10 w-10 text-primary-500"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                  >
-                    <circle
-                      className="opacity-25"
-                      cx="12"
-                      cy="12"
-                      r="10"
-                      stroke="currentColor"
-                      strokeWidth="4"
-                    ></circle>
-                    <path
-                      className="opacity-75"
-                      fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                    ></path>
-                  </svg>
-                </dd>
-              ) : (
-                <dd className="mt-4 text-5xl leading-9 font-semibold text-gray-900">
-                  {totalCount}
-                </dd>
-              )}
-            </dl>
           </div>
         </div>
-        <div className="col-span-2 mt-2">
-          <div>
+        <div className="w-full col-span-2">
+          <div className="col-span-2 mt-2">
             <div>
-              <div className="md:flex flex-wrap items-end gap-2 lg:mb-2">
-                <div className="grow">
-                  <div className="text-sm font-semibold mb-2">
-                    Search by Name
+              <div>
+                <div className="md:flex md:gap-4 mt-2">
+                  <div className="grow lg:max-w-sm w-full mb-2">
+                    <div className="text-sm font-semibold mb-2">
+                      Search by Name
+                    </div>
+                    <InputSearchBox
+                      search={searchByName}
+                      value={qParams.name}
+                      placeholder="Search by Patient Name"
+                      errors=""
+                    />
+                  </div>
+                  <div className="grow lg:max-w-sm w-full mb-2">
+                    <div className="text-sm font-semibold mb-2">
+                      Search by IP number
+                    </div>
+                    <InputSearchBox
+                      search={searchByIpNo}
+                      value={qParams.ip_no}
+                      placeholder="Search by IP number"
+                      errors=""
+                    />
                   </div>
-                  <InputSearchBox
-                    search={searchByName}
-                    value={qParams.name}
-                    placeholder="Search by Patient Name"
-                    errors=""
-                  />
                 </div>
-                <button
-                  className="btn btn-primary-ghost w-full md:w-fit mt-2"
-                  onClick={(_) => setShowFilters((show) => !show)}
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    className="fill-current w-4 h-4 mr-2"
-                  >
-                    <line x1="8" y1="6" x2="21" y2="6"></line>
-                    <line x1="8" y1="12" x2="21" y2="12">
-                      {" "}
-                    </line>
-                    <line x1="8" y1="18" x2="21" y2="18">
-                      {" "}
-                    </line>
-                    <line x1="3" y1="6" x2="3.01" y2="6">
-                      {" "}
-                    </line>
-                    <line x1="3" y1="12" x2="3.01" y2="12">
-                      {" "}
-                    </line>
-                    <line x1="3" y1="18" x2="3.01" y2="18">
-                      {" "}
-                    </line>
-                  </svg>
-                  <span>Advanced Filters</span>
-                </button>
-                <button
-                  className="btn-primary btn mt-2 w-full md:w-fit"
-                  onClick={() => {
-                    if (facilityId) {
-                      navigate(`/facility/${facilityId}/patient`);
-                    } else {
-                      setShowDialog(true);
-                    }
-                  }}
-                  data-testid="add-patient-button"
-                >
-                  <i className="fas fa-plus mr-2 text-white"></i>
-                  Add Details of a Patient
-                </button>
               </div>
             </div>
-          </div>
-          <div className="md:flex md:gap-4">
-            <div className="grow">
-              <div className="text-sm font-semibold mt-2">
-                Search by Primary Number
+            <div className="md:flex md:gap-4 mt-2">
+              <div className="grow lg:max-w-sm w-full">
+                <div className="text-sm font-semibold mt-2">
+                  Search by Primary Number
+                </div>
+                <PhoneNumberField
+                  value={qParams.phone_number || "+91"}
+                  onChange={(value: string) =>
+                    searchByPhone(value, "phone_number")
+                  }
+                  turnOffAutoFormat={false}
+                  errors=""
+                />
               </div>
-              <PhoneNumberField
-                value={qParams.phone_number || "+91"}
-                onChange={(value: string) =>
-                  searchByPhone(value, "phone_number")
-                }
-                turnOffAutoFormat={false}
-                errors=""
-              />
-            </div>
-            <div className="grow">
-              <div className="text-sm font-semibold mt-2">
-                Search by Emergency Number
+              <div className="grow lg:max-w-sm w-full">
+                <div className="text-sm font-semibold mt-2">
+                  Search by Emergency Number
+                </div>
+                <PhoneNumberField
+                  value={qParams.emergency_phone_number || "+91"}
+                  onChange={(value: string) =>
+                    searchByPhone(value, "emergency_phone_number")
+                  }
+                  turnOffAutoFormat={false}
+                  errors=""
+                />
               </div>
-              <PhoneNumberField
-                value={qParams.emergency_phone_number || "+91"}
-                onChange={(value: string) =>
-                  searchByPhone(value, "emergency_phone_number")
-                }
-                turnOffAutoFormat={false}
-                errors=""
-              />
             </div>
           </div>
-        </div>
-        <div className="flex flex-wrap w-full col-span-3">
-          {qParams.phone_number?.trim().split(" ").length - 1
-            ? badge("Primary Number", qParams.phone_number, "phone_number")
-            : null}
-          {qParams.emergency_phone_number?.trim().split(" ").length - 1
-            ? badge(
-                "Emergency Number",
-                qParams.emergency_phone_number,
-                "emergency_phone_number"
-              )
-            : null}
-          {badge("Patient Name", qParams.name, "name")}
-          {badge(
-            "Modified After",
-            qParams.modified_date_after,
-            "modified_date_after"
-          )}
-          {badge(
-            "Modified Before",
-            qParams.modified_date_before,
-            "modified_date_before"
-          )}
-          {badge(
-            "Created Before",
-            qParams.created_date_before,
-            "created_date_before"
-          )}
-          {badge(
-            "Created After",
-            qParams.created_date_after,
-            "created_date_after"
-          )}
-          {qParams.last_consultation_admission_date_before ===
-          qParams.last_consultation_admission_date_after ? (
-            badge(
-              "Admission Date",
-              qParams.last_consultation_admission_date_before,
-              [
-                "last_consultation_admission_date_before",
-                "last_consultation_admission_date_after",
-              ]
-            )
-          ) : (
-            <>
-              {badge(
-                "Admitted Before",
+          <div className="flex flex-wrap w-full col-span-3 ml-[-10px]">
+            {qParams.phone_number?.trim().split(" ").length - 1
+              ? badge("Primary Number", qParams.phone_number, "phone_number")
+              : null}
+            {qParams.emergency_phone_number?.trim().split(" ").length - 1
+              ? badge(
+                  "Emergency Number",
+                  qParams.emergency_phone_number,
+                  "emergency_phone_number"
+                )
+              : null}
+            {badge("Patient Name", qParams.name, "name")}
+            {badge("IP number", qParams.ip_no, "ip_no")}
+            {badge(
+              "Modified After",
+              qParams.modified_date_after,
+              "modified_date_after"
+            )}
+            {badge(
+              "Modified Before",
+              qParams.modified_date_before,
+              "modified_date_before"
+            )}
+            {badge(
+              "Created Before",
+              qParams.created_date_before,
+              "created_date_before"
+            )}
+            {badge(
+              "Created After",
+              qParams.created_date_after,
+              "created_date_after"
+            )}
+            {qParams.last_consultation_admission_date_before ===
+            qParams.last_consultation_admission_date_after ? (
+              badge(
+                "Admission Date",
                 qParams.last_consultation_admission_date_before,
-                "last_consultation_admission_date_before"
+                [
+                  "last_consultation_admission_date_before",
+                  "last_consultation_admission_date_after",
+                ]
+              )
+            ) : (
+              <>
+                {badge(
+                  "Admitted Before",
+                  qParams.last_consultation_admission_date_before,
+                  "last_consultation_admission_date_before"
+                )}
+                {badge(
+                  "Admitted After",
+                  qParams.last_consultation_admission_date_after,
+                  "last_consultation_admission_date_after"
+                )}
+              </>
+            )}
+            {badge(
+              "Discharged Before",
+              qParams.last_consultation_discharge_date_before,
+              "last_consultation_discharge_date_before"
+            )}
+            {badge(
+              "Discharged After",
+              qParams.last_consultation_discharge_date_after,
+              "last_consultation_discharge_date_after"
+            )}
+            {qParams.last_consultation_admitted_to_list &&
+              LastAdmittedToTypeBadges()}
+            {qParams.number_of_doses &&
+              badge(
+                "Number of Vaccination Doses",
+                qParams.number_of_doses,
+                "number_of_doses"
               )}
-              {badge(
-                "Admitted After",
-                qParams.last_consultation_admission_date_after,
-                "last_consultation_admission_date_after"
+            {qParams.is_kasp &&
+              badge(
+                KASP_STRING,
+                qParams.is_kasp === "true" ? KASP_STRING : `Non ${KASP_STRING}`,
+                "is_kasp"
               )}
-            </>
-          )}
-          {badge(
-            "Discharged Before",
-            qParams.last_consultation_discharge_date_before,
-            "last_consultation_discharge_date_before"
-          )}
-          {badge(
-            "Discharged After",
-            qParams.last_consultation_discharge_date_after,
-            "last_consultation_discharge_date_after"
-          )}
-          {qParams.last_consultation_admitted_to_list &&
-            LastAdmittedToTypeBadges()}
-          {qParams.number_of_doses &&
-            badge(
-              "Number of Vaccination Doses",
-              qParams.number_of_doses,
-              "number_of_doses"
+            {badge("COWIN ID", qParams.covin_id, "covin_id")}
+            {badge("Is Antenatal", qParams.is_antenatal, "is_antenatal")}
+            {badge("Facility", facilityBadgeName, "facility")}
+            {badge("Facility Type", qParams.facility_type, "facility_type")}
+            {badge("District", districtName, "district")}
+            {badge("Ordering", qParams.ordering, "ordering")}
+            {badge("Category", qParams.category, "category")}
+            {badge("Disease Status", qParams.disease_status, "disease_status")}
+            {badge(
+              "Gender",
+              parseOptionId(GENDER_TYPES, qParams.gender),
+              "gender"
+            )}
+            {badge(
+              "Admitted to",
+              ADMITTED_TO[qParams.last_consultation_admitted_to],
+              "last_consultation_admitted_to"
+            )}
+            {badge("Age min", qParams.age_min, "age_min")}
+            {badge("Age max", qParams.age_max, "age_max")}
+            {badge("SRF ID", qParams.srf_id, "srf_id")}
+            {badge("LSG Body", localbodyName, "lsgBody")}
+            {badge(
+              "Declared Status",
+              qParams.is_declared_positive,
+              "is_declared_positive"
+            )}
+            {badge(
+              "Result before",
+              qParams.date_of_result_before,
+              "date_of_result_before"
             )}
-          {qParams.is_kasp &&
-            badge(
-              KASP_STRING,
-              qParams.is_kasp === "true" ? KASP_STRING : `Non ${KASP_STRING}`,
-              "is_kasp"
+            {badge(
+              "Result after",
+              qParams.date_of_result_after,
+              "date_of_result_after"
             )}
-          {badge("COWIN ID", qParams.covin_id, "covin_id")}
-          {badge("Is Antenatal", qParams.is_antenatal, "is_antenatal")}
-          {badge("Facility", facilityBadgeName, "facility")}
-          {badge("Facility Type", qParams.facility_type, "facility_type")}
-          {badge("District", districtName, "district")}
-          {badge("Ordering", qParams.ordering, "ordering")}
-          {badge("Category", qParams.category, "category")}
-          {badge("Disease Status", qParams.disease_status, "disease_status")}
-          {badge(
-            "Gender",
-            parseOptionId(GENDER_TYPES, qParams.gender),
-            "gender"
-          )}
-          {badge(
-            "Admitted to",
-            ADMITTED_TO[qParams.last_consultation_admitted_to],
-            "last_consultation_admitted_to"
-          )}
-          {badge("Age min", qParams.age_min, "age_min")}
-          {badge("Age max", qParams.age_max, "age_max")}
-          {badge("SRF ID", qParams.srf_id, "srf_id")}
-          {badge("LSG Body", localbodyName, "lsgBody")}
-          {badge(
-            "Declared Status",
-            qParams.is_declared_positive,
-            "is_declared_positive"
-          )}
-          {badge(
-            "Result before",
-            qParams.date_of_result_before,
-            "date_of_result_before"
-          )}
-          {badge(
-            "Result after",
-            qParams.date_of_result_after,
-            "date_of_result_after"
-          )}
 
-          {badge(
-            "Declared positive before",
-            qParams.date_declared_positive_before,
-            "date_declared_positive_before"
-          )}
+            {badge(
+              "Declared positive before",
+              qParams.date_declared_positive_before,
+              "date_declared_positive_before"
+            )}
 
-          {badge(
-            "Declared positive after",
-            qParams.date_declared_positive_after,
-            "date_declared_positive_after"
-          )}
+            {badge(
+              "Declared positive after",
+              qParams.date_declared_positive_after,
+              "date_declared_positive_after"
+            )}
 
-          {badge(
-            "Onset of symptoms before",
-            qParams.last_consultation_symptoms_onset_date_before,
-            "last_consultation_symptoms_onset_date_before"
-          )}
+            {badge(
+              "Onset of symptoms before",
+              qParams.last_consultation_symptoms_onset_date_before,
+              "last_consultation_symptoms_onset_date_before"
+            )}
 
-          {badge(
-            "Onset of symptoms after",
-            qParams.last_consultation_symptoms_onset_date_after,
-            "last_consultation_symptoms_onset_date_after"
-          )}
-          {badge(
-            "Vaccinated Date before",
-            qParams.last_vaccinated_date_before,
-            "last_vaccinated_date_before"
-          )}
+            {badge(
+              "Onset of symptoms after",
+              qParams.last_consultation_symptoms_onset_date_after,
+              "last_consultation_symptoms_onset_date_after"
+            )}
+            {badge(
+              "Vaccinated Date before",
+              qParams.last_vaccinated_date_before,
+              "last_vaccinated_date_before"
+            )}
 
-          {badge(
-            "Vaccinated Date after",
-            qParams.last_vaccinated_date_after,
-            "last_vaccinated_date_after"
-          )}
-          {badge(
-            "Telemedicine",
-            qParams.last_consultation_is_telemedicine,
-            "last_consultation_is_telemedicine"
-          )}
+            {badge(
+              "Vaccinated Date after",
+              qParams.last_vaccinated_date_after,
+              "last_vaccinated_date_after"
+            )}
+            {badge(
+              "Telemedicine",
+              qParams.last_consultation_is_telemedicine,
+              "last_consultation_is_telemedicine"
+            )}
+          </div>
         </div>
       </div>
       <div>

From 0213222bef374bbbca254e3dde5198835c79e436 Mon Sep 17 00:00:00 2001
From: Ashesh3 <3626859+Ashesh3@users.noreply.github.com>
Date: Fri, 21 Oct 2022 10:40:19 +0530
Subject: [PATCH 2/3] Fix alignment

---
 src/Components/Patient/ManagePatients.tsx | 302 +++++++++++-----------
 1 file changed, 149 insertions(+), 153 deletions(-)

diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index 41bb84d15a9..2c7184fdf67 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -671,7 +671,7 @@ export const PatientManager = (props: any) => {
         breadcrumbs={!!facilityId}
         crumbsReplacements={{ [facilityId]: { name: facilityCrumbName } }}
       />
-      <div className="mt-5 manualGrid grid-cols-1 gap-3 sm:grid-cols-3 my-4 px-2 md:px-0 ">
+      <div className="mt-5 manualGrid grid-cols-1 gap-3 sm:grid-cols-3 my-4 px-2 md:px-0 mb-[-24px]">
         <div>
           <div className="flex flex-col right-3 top-0 gap-2 my-3 mr-3 sm:absolute sm:flex-row">
             <Tooltip
@@ -864,7 +864,7 @@ export const PatientManager = (props: any) => {
                 </div>
               </div>
             </div>
-            <div className="md:flex md:gap-4 mt-2">
+            <div className="md:flex md:gap-4 mt-4">
               <div className="grow lg:max-w-sm w-full">
                 <div className="text-sm font-semibold mt-2">
                   Search by Primary Number
@@ -893,166 +893,162 @@ export const PatientManager = (props: any) => {
               </div>
             </div>
           </div>
-          <div className="flex flex-wrap w-full col-span-3 ml-[-10px]">
-            {qParams.phone_number?.trim().split(" ").length - 1
-              ? badge("Primary Number", qParams.phone_number, "phone_number")
-              : null}
-            {qParams.emergency_phone_number?.trim().split(" ").length - 1
-              ? badge(
-                  "Emergency Number",
-                  qParams.emergency_phone_number,
-                  "emergency_phone_number"
-                )
-              : null}
-            {badge("Patient Name", qParams.name, "name")}
-            {badge("IP number", qParams.ip_no, "ip_no")}
-            {badge(
-              "Modified After",
-              qParams.modified_date_after,
-              "modified_date_after"
-            )}
-            {badge(
-              "Modified Before",
-              qParams.modified_date_before,
-              "modified_date_before"
-            )}
-            {badge(
-              "Created Before",
-              qParams.created_date_before,
-              "created_date_before"
-            )}
-            {badge(
-              "Created After",
-              qParams.created_date_after,
-              "created_date_after"
-            )}
-            {qParams.last_consultation_admission_date_before ===
-            qParams.last_consultation_admission_date_after ? (
-              badge(
-                "Admission Date",
-                qParams.last_consultation_admission_date_before,
-                [
-                  "last_consultation_admission_date_before",
-                  "last_consultation_admission_date_after",
-                ]
-              )
-            ) : (
-              <>
-                {badge(
-                  "Admitted Before",
-                  qParams.last_consultation_admission_date_before,
-                  "last_consultation_admission_date_before"
-                )}
-                {badge(
-                  "Admitted After",
-                  qParams.last_consultation_admission_date_after,
-                  "last_consultation_admission_date_after"
-                )}
-              </>
-            )}
-            {badge(
-              "Discharged Before",
-              qParams.last_consultation_discharge_date_before,
-              "last_consultation_discharge_date_before"
-            )}
-            {badge(
-              "Discharged After",
-              qParams.last_consultation_discharge_date_after,
-              "last_consultation_discharge_date_after"
-            )}
-            {qParams.last_consultation_admitted_to_list &&
-              LastAdmittedToTypeBadges()}
-            {qParams.number_of_doses &&
-              badge(
-                "Number of Vaccination Doses",
-                qParams.number_of_doses,
-                "number_of_doses"
-              )}
-            {qParams.is_kasp &&
-              badge(
-                KASP_STRING,
-                qParams.is_kasp === "true" ? KASP_STRING : `Non ${KASP_STRING}`,
-                "is_kasp"
-              )}
-            {badge("COWIN ID", qParams.covin_id, "covin_id")}
-            {badge("Is Antenatal", qParams.is_antenatal, "is_antenatal")}
-            {badge("Facility", facilityBadgeName, "facility")}
-            {badge("Facility Type", qParams.facility_type, "facility_type")}
-            {badge("District", districtName, "district")}
-            {badge("Ordering", qParams.ordering, "ordering")}
-            {badge("Category", qParams.category, "category")}
-            {badge("Disease Status", qParams.disease_status, "disease_status")}
-            {badge(
-              "Gender",
-              parseOptionId(GENDER_TYPES, qParams.gender),
-              "gender"
-            )}
-            {badge(
-              "Admitted to",
-              ADMITTED_TO[qParams.last_consultation_admitted_to],
-              "last_consultation_admitted_to"
-            )}
-            {badge("Age min", qParams.age_min, "age_min")}
-            {badge("Age max", qParams.age_max, "age_max")}
-            {badge("SRF ID", qParams.srf_id, "srf_id")}
-            {badge("LSG Body", localbodyName, "lsgBody")}
-            {badge(
-              "Declared Status",
-              qParams.is_declared_positive,
-              "is_declared_positive"
-            )}
+        </div>
+      </div>
+      <div className="flex flex-wrap w-full col-span-3 ml-[-10px]">
+        {qParams.phone_number?.trim().split(" ").length - 1
+          ? badge("Primary Number", qParams.phone_number, "phone_number")
+          : null}
+        {qParams.emergency_phone_number?.trim().split(" ").length - 1
+          ? badge(
+              "Emergency Number",
+              qParams.emergency_phone_number,
+              "emergency_phone_number"
+            )
+          : null}
+        {badge("Patient Name", qParams.name, "name")}
+        {badge("IP number", qParams.ip_no, "ip_no")}
+        {badge(
+          "Modified After",
+          qParams.modified_date_after,
+          "modified_date_after"
+        )}
+        {badge(
+          "Modified Before",
+          qParams.modified_date_before,
+          "modified_date_before"
+        )}
+        {badge(
+          "Created Before",
+          qParams.created_date_before,
+          "created_date_before"
+        )}
+        {badge(
+          "Created After",
+          qParams.created_date_after,
+          "created_date_after"
+        )}
+        {qParams.last_consultation_admission_date_before ===
+        qParams.last_consultation_admission_date_after ? (
+          badge(
+            "Admission Date",
+            qParams.last_consultation_admission_date_before,
+            [
+              "last_consultation_admission_date_before",
+              "last_consultation_admission_date_after",
+            ]
+          )
+        ) : (
+          <>
             {badge(
-              "Result before",
-              qParams.date_of_result_before,
-              "date_of_result_before"
+              "Admitted Before",
+              qParams.last_consultation_admission_date_before,
+              "last_consultation_admission_date_before"
             )}
             {badge(
-              "Result after",
-              qParams.date_of_result_after,
-              "date_of_result_after"
+              "Admitted After",
+              qParams.last_consultation_admission_date_after,
+              "last_consultation_admission_date_after"
             )}
+          </>
+        )}
+        {badge(
+          "Discharged Before",
+          qParams.last_consultation_discharge_date_before,
+          "last_consultation_discharge_date_before"
+        )}
+        {badge(
+          "Discharged After",
+          qParams.last_consultation_discharge_date_after,
+          "last_consultation_discharge_date_after"
+        )}
+        {qParams.last_consultation_admitted_to_list &&
+          LastAdmittedToTypeBadges()}
+        {qParams.number_of_doses &&
+          badge(
+            "Number of Vaccination Doses",
+            qParams.number_of_doses,
+            "number_of_doses"
+          )}
+        {qParams.is_kasp &&
+          badge(
+            KASP_STRING,
+            qParams.is_kasp === "true" ? KASP_STRING : `Non ${KASP_STRING}`,
+            "is_kasp"
+          )}
+        {badge("COWIN ID", qParams.covin_id, "covin_id")}
+        {badge("Is Antenatal", qParams.is_antenatal, "is_antenatal")}
+        {badge("Facility", facilityBadgeName, "facility")}
+        {badge("Facility Type", qParams.facility_type, "facility_type")}
+        {badge("District", districtName, "district")}
+        {badge("Ordering", qParams.ordering, "ordering")}
+        {badge("Category", qParams.category, "category")}
+        {badge("Disease Status", qParams.disease_status, "disease_status")}
+        {badge("Gender", parseOptionId(GENDER_TYPES, qParams.gender), "gender")}
+        {badge(
+          "Admitted to",
+          ADMITTED_TO[qParams.last_consultation_admitted_to],
+          "last_consultation_admitted_to"
+        )}
+        {badge("Age min", qParams.age_min, "age_min")}
+        {badge("Age max", qParams.age_max, "age_max")}
+        {badge("SRF ID", qParams.srf_id, "srf_id")}
+        {badge("LSG Body", localbodyName, "lsgBody")}
+        {badge(
+          "Declared Status",
+          qParams.is_declared_positive,
+          "is_declared_positive"
+        )}
+        {badge(
+          "Result before",
+          qParams.date_of_result_before,
+          "date_of_result_before"
+        )}
+        {badge(
+          "Result after",
+          qParams.date_of_result_after,
+          "date_of_result_after"
+        )}
 
-            {badge(
-              "Declared positive before",
-              qParams.date_declared_positive_before,
-              "date_declared_positive_before"
-            )}
+        {badge(
+          "Declared positive before",
+          qParams.date_declared_positive_before,
+          "date_declared_positive_before"
+        )}
 
-            {badge(
-              "Declared positive after",
-              qParams.date_declared_positive_after,
-              "date_declared_positive_after"
-            )}
+        {badge(
+          "Declared positive after",
+          qParams.date_declared_positive_after,
+          "date_declared_positive_after"
+        )}
 
-            {badge(
-              "Onset of symptoms before",
-              qParams.last_consultation_symptoms_onset_date_before,
-              "last_consultation_symptoms_onset_date_before"
-            )}
+        {badge(
+          "Onset of symptoms before",
+          qParams.last_consultation_symptoms_onset_date_before,
+          "last_consultation_symptoms_onset_date_before"
+        )}
 
-            {badge(
-              "Onset of symptoms after",
-              qParams.last_consultation_symptoms_onset_date_after,
-              "last_consultation_symptoms_onset_date_after"
-            )}
-            {badge(
-              "Vaccinated Date before",
-              qParams.last_vaccinated_date_before,
-              "last_vaccinated_date_before"
-            )}
+        {badge(
+          "Onset of symptoms after",
+          qParams.last_consultation_symptoms_onset_date_after,
+          "last_consultation_symptoms_onset_date_after"
+        )}
+        {badge(
+          "Vaccinated Date before",
+          qParams.last_vaccinated_date_before,
+          "last_vaccinated_date_before"
+        )}
 
-            {badge(
-              "Vaccinated Date after",
-              qParams.last_vaccinated_date_after,
-              "last_vaccinated_date_after"
-            )}
-            {badge(
-              "Telemedicine",
-              qParams.last_consultation_is_telemedicine,
-              "last_consultation_is_telemedicine"
-            )}
-          </div>
-        </div>
+        {badge(
+          "Vaccinated Date after",
+          qParams.last_vaccinated_date_after,
+          "last_vaccinated_date_after"
+        )}
+        {badge(
+          "Telemedicine",
+          qParams.last_consultation_is_telemedicine,
+          "last_consultation_is_telemedicine"
+        )}
       </div>
       <div>
         <SlideOver show={showFilters} setShow={setShowFilters}>

From f168458e449bf27c32c2003dd43af559c37df5b0 Mon Sep 17 00:00:00 2001
From: Ashesh3 <3626859+Ashesh3@users.noreply.github.com>
Date: Sat, 22 Oct 2022 12:31:01 +0530
Subject: [PATCH 3/3] Change patient search ui

---
 src/Components/Patient/ManagePatients.tsx | 40 ++++++++++++-----------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index 2c7184fdf67..74076ed265a 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -741,6 +741,22 @@ export const PatientManager = (props: any) => {
                 </div>
               </Tooltip>
             </div>
+            <div>
+              <button
+                className="btn btn-primary w-full md:w-fit sm:w-fit mb-2 sm:mb-0 sm:mr-2"
+                onClick={() => {
+                  if (facilityId) {
+                    navigate(`/facility/${facilityId}/patient`);
+                  } else {
+                    setShowDialog(true);
+                  }
+                }}
+                data-testid="add-patient-button"
+              >
+                <i className="fas fa-plus mr-2 text-white"></i>
+                <span className="pt-[2px]">Add Details of a Patient</span>
+              </button>
+            </div>
             <div>
               <button
                 className="btn btn-primary-ghost w-full md:w-fit"
@@ -781,7 +797,7 @@ export const PatientManager = (props: any) => {
           </div>
           <div className="flex flex-col mt-2">
             <div className="bg-white overflow-hidden shadow rounded-lg mb-2">
-              <div className="px-4 py-5 sm:p-6">
+              <div className="px-4 py-5 sm:p-[35px]">
                 <dl>
                   <dt className="text-sm leading-5 font-medium text-gray-500 truncate">
                     Total Patients
@@ -818,27 +834,13 @@ export const PatientManager = (props: any) => {
                 </dl>
               </div>
             </div>
-            <button
-              className="btn-primary btn w-full md:w-fit"
-              onClick={() => {
-                if (facilityId) {
-                  navigate(`/facility/${facilityId}/patient`);
-                } else {
-                  setShowDialog(true);
-                }
-              }}
-              data-testid="add-patient-button"
-            >
-              <i className="fas fa-plus mr-2 text-white"></i>
-              Add Details of a Patient
-            </button>
           </div>
         </div>
         <div className="w-full col-span-2">
           <div className="col-span-2 mt-2">
             <div>
               <div>
-                <div className="md:flex md:gap-4 mt-2">
+                <div className="md:flex md:gap-4 mt-1">
                   <div className="grow lg:max-w-sm w-full mb-2">
                     <div className="text-sm font-semibold mb-2">
                       Search by Name
@@ -864,9 +866,9 @@ export const PatientManager = (props: any) => {
                 </div>
               </div>
             </div>
-            <div className="md:flex md:gap-4 mt-4">
+            <div className="md:flex md:gap-4">
               <div className="grow lg:max-w-sm w-full">
-                <div className="text-sm font-semibold mt-2">
+                <div className="text-sm font-semibold">
                   Search by Primary Number
                 </div>
                 <PhoneNumberField
@@ -879,7 +881,7 @@ export const PatientManager = (props: any) => {
                 />
               </div>
               <div className="grow lg:max-w-sm w-full">
-                <div className="text-sm font-semibold mt-2">
+                <div className="text-sm font-semibold">
                   Search by Emergency Number
                 </div>
                 <PhoneNumberField