From fb0709971b669cf3f08a62936e5d4cc3d3744cc0 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <rithvik.nishad@egovernments.org>
Date: Fri, 2 Jun 2023 16:33:13 +0530
Subject: [PATCH] fix ConsultationCard padding (#5586)

---
 src/Components/Facility/ConsultationCard.tsx | 223 +++++++++----------
 1 file changed, 105 insertions(+), 118 deletions(-)

diff --git a/src/Components/Facility/ConsultationCard.tsx b/src/Components/Facility/ConsultationCard.tsx
index 2f8783d3f0a..f596cecb9b3 100644
--- a/src/Components/Facility/ConsultationCard.tsx
+++ b/src/Components/Facility/ConsultationCard.tsx
@@ -1,5 +1,4 @@
 import { navigate } from "raviger";
-import React from "react";
 import { ConsultationModel } from "./models";
 import { formatDate } from "../../Utils/utils";
 import ButtonV2 from "../Common/components/ButtonV2";
@@ -16,155 +15,143 @@ export const ConsultationCard = (props: ConsultationProps) => {
   const { itemData, isLastConsultation } = props;
   const { kasp_string } = useConfig();
   return (
-    <div className="block border rounded-lg bg-white shadow cursor-pointer hover:border-primary-500 text-black mt-4">
+    <div className="block border rounded-lg bg-white shadow cursor-pointer hover:border-primary-500 text-black mt-4 p-4">
       {itemData.is_kasp && (
         <div className="ml-3 mt-2 inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium leading-5 bg-yellow-100 text-yellow-800">
           {kasp_string}
         </div>
       )}
 
-      <>
-        <div className="grid gap-4 grid-cols-1 md:grid-cols-4 ml-2 mt-2">
+      <div className="grid gap-4 grid-cols-1 md:grid-cols-4 ml-2 mt-2">
+        <div className="sm:col-span-1">
           <div className="sm:col-span-1">
-            <>
-              <div className="sm:col-span-1">
-                <div className="text-sm leading-5 font-semibold text-zinc-400">
-                  Facility
-                </div>
-                <div className="mt-1 text-sm leading-5 font-medium whitespace-normal break-words overflow-x-scroll">
-                  {itemData.facility_name}{" "}
-                  {itemData.is_telemedicine && (
-                    <span className="ml-2">(Telemedicine)</span>
-                  )}
-                </div>
-              </div>
-            </>
+            <div className="text-sm leading-5 font-semibold text-zinc-400">
+              Facility
+            </div>
+            <div className="mt-1 text-sm leading-5 font-medium whitespace-normal break-words overflow-x-scroll">
+              {itemData.facility_name}{" "}
+              {itemData.is_telemedicine && (
+                <span className="ml-2">(Telemedicine)</span>
+              )}
+            </div>
           </div>
-          <div className="sm:col-span-1">
-            <div className="capitalize">
-              <div className="sm:col-span-1">
-                <div className="text-sm leading-5 font-semibold text-zinc-400">
-                  Suggestion{" "}
-                </div>
-                <div className="mt-1 text-sm leading-5 font-medium whitespace-normal break-words overflow-x-scroll">
-                  {itemData.suggestion_text?.toLocaleLowerCase()}
-                </div>
+        </div>
+        <div className="sm:col-span-1">
+          <div className="capitalize">
+            <div className="sm:col-span-1">
+              <div className="text-sm leading-5 font-semibold text-zinc-400">
+                Suggestion{" "}
+              </div>
+              <div className="mt-1 text-sm leading-5 font-medium whitespace-normal break-words overflow-x-scroll">
+                {itemData.suggestion_text?.toLocaleLowerCase()}
               </div>
             </div>
           </div>
-          {itemData.kasp_enabled_date && (
+        </div>
+        {itemData.kasp_enabled_date && (
+          <div className="sm:col-span-1">
             <div className="sm:col-span-1">
-              <>
-                <div className="sm:col-span-1">
-                  <div className="text-sm leading-5 font-semibold text-zinc-400">
-                    {kasp_string} Enabled date{" "}
-                  </div>
-                  <div className="mt-1 text-sm leading-5 font-medium whitespace-normal break-words overflow-x-scroll">
-                    {itemData.kasp_enabled_date
-                      ? formatDate(itemData.kasp_enabled_date)
-                      : "-"}
-                  </div>
-                </div>
-              </>
+              <div className="text-sm leading-5 font-semibold text-zinc-400">
+                {kasp_string} Enabled date{" "}
+              </div>
+              <div className="mt-1 text-sm leading-5 font-medium whitespace-normal break-words overflow-x-scroll">
+                {itemData.kasp_enabled_date
+                  ? formatDate(itemData.kasp_enabled_date)
+                  : "-"}
+              </div>
             </div>
-          )}
-          {itemData.admitted && itemData.admission_date && (
+          </div>
+        )}
+        {itemData.admitted && itemData.admission_date && (
+          <div className="sm:col-span-1">
             <div className="sm:col-span-1">
-              <>
-                <div className="sm:col-span-1">
-                  <div className="text-sm leading-5 font-semibold text-zinc-400">
-                    Admitted on
-                  </div>
-                  <div className="mt-1 text-sm leading-5 font-medium whitespace-normal break-words overflow-x-scroll">
-                    {formatDate(itemData.admission_date)}
-                  </div>
-                </div>
-              </>
+              <div className="text-sm leading-5 font-semibold text-zinc-400">
+                Admitted on
+              </div>
+              <div className="mt-1 text-sm leading-5 font-medium whitespace-normal break-words overflow-x-scroll">
+                {formatDate(itemData.admission_date)}
+              </div>
             </div>
-          )}
-          {!itemData.admitted && (
+          </div>
+        )}
+        {!itemData.admitted && (
+          <div className="sm:col-span-1">
             <div className="sm:col-span-1">
-              <>
-                <div className="sm:col-span-1">
-                  <div className="text-sm leading-5 font-semibold text-zinc-400">
-                    Admitted{" "}
-                  </div>
-                  <div className="mt-1 text-sm leading-5 font-medium whitespace-normal break-words overflow-x-scroll">
-                    No
-                  </div>
-                </div>
-              </>
+              <div className="text-sm leading-5 font-semibold text-zinc-400">
+                Admitted{" "}
+              </div>
+              <div className="mt-1 text-sm leading-5 font-medium whitespace-normal break-words overflow-x-scroll">
+                No
+              </div>
             </div>
-          )}
-          {itemData.discharge_date && (
+          </div>
+        )}
+        {itemData.discharge_date && (
+          <div className="sm:col-span-1">
             <div className="sm:col-span-1">
-              <>
-                <div className="sm:col-span-1">
-                  <div className="text-sm leading-5 font-semibold text-zinc-400">
-                    Discharged on{" "}
-                  </div>
-                  <div className="mt-1 text-sm leading-5 font-medium whitespace-normal break-words overflow-x-scroll">
-                    {formatDate(itemData.discharge_date)}
-                  </div>
-                </div>
-              </>
-            </div>
-          )}
-        </div>
-        <div className="flex flex-col mt-8">
-          {
-            <div className="text-sm text-gray-700 items-center flex flex-col md:flex-row">
-              Created:{" "}
-              <RelativeDateUserMention
-                actionDate={itemData.created_date}
-                user={itemData.created_by}
-              />
+              <div className="text-sm leading-5 font-semibold text-zinc-400">
+                Discharged on{" "}
+              </div>
+              <div className="mt-1 text-sm leading-5 font-medium whitespace-normal break-words overflow-x-scroll">
+                {formatDate(itemData.discharge_date)}
+              </div>
             </div>
-          }
+          </div>
+        )}
+      </div>
+      <div className="flex flex-col mt-8">
+        {
           <div className="text-sm text-gray-700 items-center flex flex-col md:flex-row">
-            Last Modified:{" "}
+            Created:{" "}
             <RelativeDateUserMention
-              actionDate={itemData.modified_date}
-              user={itemData.last_edited_by}
+              actionDate={itemData.created_date}
+              user={itemData.created_by}
             />
           </div>
+        }
+        <div className="text-sm text-gray-700 items-center flex flex-col md:flex-row">
+          Last Modified:{" "}
+          <RelativeDateUserMention
+            actionDate={itemData.modified_date}
+            user={itemData.last_edited_by}
+          />
         </div>
-        <div className="mt-4 flex flex-col gap-1 md:flex-row justify-between w-full">
-          <ButtonV2
-            className="bg-white hover:bg-gray-300 border border-gray-500 text-black"
-            onClick={() =>
-              navigate(
-                `/facility/${itemData.facility}/patient/${itemData.patient}/consultation/${itemData.id}`
-              )
-            }
-          >
-            View Consultation / Consultation Updates
-          </ButtonV2>
+      </div>
+      <div className="mt-4 flex flex-col gap-1 md:flex-row justify-between w-full">
+        <ButtonV2
+          className="bg-white hover:bg-gray-300 border border-gray-500 text-black"
+          onClick={() =>
+            navigate(
+              `/facility/${itemData.facility}/patient/${itemData.patient}/consultation/${itemData.id}`
+            )
+          }
+        >
+          View Consultation / Consultation Updates
+        </ButtonV2>
+        <ButtonV2
+          className="bg-white hover:bg-gray-300 border border-gray-500 text-black"
+          onClick={() =>
+            navigate(
+              `/facility/${itemData.facility}/patient/${itemData.patient}/consultation/${itemData.id}/files/`
+            )
+          }
+        >
+          View / Upload Consultation Files
+        </ButtonV2>
+        {isLastConsultation && (
           <ButtonV2
             className="bg-white hover:bg-gray-300 border border-gray-500 text-black"
             onClick={() =>
               navigate(
-                `/facility/${itemData.facility}/patient/${itemData.patient}/consultation/${itemData.id}/files/`
+                `/facility/${itemData.facility}/patient/${itemData.patient}/consultation/${itemData.id}/daily-rounds`
               )
             }
+            authorizeFor={NonReadOnlyUsers}
           >
-            View / Upload Consultation Files
+            Add Consultation Updates
           </ButtonV2>
-          {isLastConsultation && (
-            <ButtonV2
-              className="bg-white hover:bg-gray-300 border border-gray-500 text-black"
-              onClick={() =>
-                navigate(
-                  `/facility/${itemData.facility}/patient/${itemData.patient}/consultation/${itemData.id}/daily-rounds`
-                )
-              }
-              authorizeFor={NonReadOnlyUsers}
-            >
-              Add Consultation Updates
-            </ButtonV2>
-          )}
-        </div>
-      </>
+        )}
+      </div>
     </div>
   );
 };