From 2f09f6347f26c841fb6f9051b15c51007a945be0 Mon Sep 17 00:00:00 2001
From: Ashesh <3626859+Ashesh3@users.noreply.github.com>
Date: Wed, 26 Oct 2022 11:36:05 +0530
Subject: [PATCH] Added patient search by IP number (#3761)

* Added patient search by IP number

* Fix alignment

* Change patient search ui
---
 src/Components/Patient/ManagePatients.tsx | 667 ++++++++++++----------
 1 file changed, 363 insertions(+), 304 deletions(-)

diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index 1b324a3dd8a..604aaf5a95f 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/src/Components/Patient/ManagePatients.tsx
@@ -110,6 +110,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
@@ -272,6 +273,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,
@@ -371,6 +373,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 });
   };
@@ -653,7 +659,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 && (
@@ -692,333 +698,386 @@ 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"
-            >
-              <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>
-          <div className="flex flex-col gap-2">
-            <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"
+      <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
+              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 ALL
-              PATIENTS
-            </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>
-              <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>
-                  <InputSearchBox
-                    search={searchByName}
-                    value={qParams.name}
-                    placeholder="Search by Patient Name"
-                    errors=""
-                  />
-                </div>
+              <div className="text-center">
                 <button
-                  className="btn btn-primary-ghost w-full md:w-fit mt-2"
-                  onClick={(_) => setShowFilters((show) => !show)}
+                  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"
                 >
-                  <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>
+                  <span>
+                    <i className="fa-solid fa-arrow-down-long mr-2"></i>DOWNLOAD{" "}
+                    {tabValue === 0 ? "LIVE" : "DISCHARGED"} LIST
+                  </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"
+                <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 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"
+                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"
                 >
-                  <i className="fas fa-plus mr-2 text-white"></i>
-                  Add Details of a Patient
-                </button>
+                  <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 mt-2">
+            <div className="bg-white overflow-hidden shadow rounded-lg mb-2">
+              <div className="px-4 py-5 sm:p-[35px]">
+                <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>
           </div>
-          <div className="md:flex md:gap-4">
-            <div className="grow">
-              <div className="text-sm font-semibold mt-2">
-                Search by Primary Number
+        </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-1">
+                  <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>
+                </div>
               </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="md:flex md:gap-4">
+              <div className="grow lg:max-w-sm w-full">
+                <div className="text-sm font-semibold">
+                  Search by Primary Number
+                </div>
+                <PhoneNumberField
+                  value={qParams.phone_number || "+91"}
+                  onChange={(value: string) =>
+                    searchByPhone(value, "phone_number")
+                  }
+                  turnOffAutoFormat={false}
+                  errors=""
+                />
+              </div>
+              <div className="grow lg:max-w-sm w-full">
+                <div className="text-sm font-semibold">
+                  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",
-              ]
+      </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"
             )
-          ) : (
-            <>
-              {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"
+          : 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"
             )}
-          {qParams.is_kasp &&
-            badge(
-              KASP_STRING,
-              qParams.is_kasp === "true" ? KASP_STRING : `Non ${KASP_STRING}`,
-              "is_kasp"
+            {badge(
+              "Admitted After",
+              qParams.last_consultation_admission_date_after,
+              "last_consultation_admission_date_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(
+          "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(
-            "Result after",
-            qParams.date_of_result_after,
-            "date_of_result_after"
+        {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>
+        {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}>