From 9187b41e66812b2d2ba561dd326934a0a58cff84 Mon Sep 17 00:00:00 2001
From: Shelly011s <shellysuthar.ict19@gmail.com>
Date: Tue, 1 Oct 2024 03:12:37 +0530
Subject: [PATCH 1/2] Added temporary UI for location card

---
 .../Facility/LocationManagement.tsx           | 212 +++++++++++-------
 1 file changed, 125 insertions(+), 87 deletions(-)

diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx
index abf4a056695..83124d3336a 100644
--- a/src/Components/Facility/LocationManagement.tsx
+++ b/src/Components/Facility/LocationManagement.tsx
@@ -13,16 +13,18 @@ import ConfirmDialog from "../Common/ConfirmDialog";
 import DialogModal from "../Common/Dialog";
 import Uptime from "../Common/Uptime";
 import useAuthUser from "../../Common/hooks/useAuthUser";
-
+// import useQuery from "../../Utils/request/useQuery";
 const Loading = lazy(() => import("../Common/Loading"));
 
 interface Props {
   facilityId: string;
+  // locationId: string;
 }
 
 interface LocationProps extends LocationModel {
   facilityId: string;
   disabled: boolean;
+  // locationId: string;
   setShowDeletePopup: (e: { open: boolean; name: string; id: string }) => void;
 }
 
@@ -117,6 +119,7 @@ export default function LocationManagement({ facilityId }: Props) {
                 <Location
                   setShowDeletePopup={setShowDeletePopup}
                   facilityId={facilityId}
+                  // locationId={locationId}
                   {...item}
                   disabled={
                     ["DistrictAdmin", "StateAdmin"].includes(authUser.user_type)
@@ -224,97 +227,132 @@ const Location = ({
   disabled,
   setShowDeletePopup,
   facilityId,
-}: LocationProps) => (
-  <div className="flex h-full w-full flex-col rounded border border-secondary-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
-    <div className="flex-1">
-      <div className="flex w-full items-start justify-between gap-2">
-        <div className="flex items-end gap-3">
-          <p className="break-all text-xl font-medium" id="view-location-name">
-            {name}
-          </p>
-          <div
-            className="mt-2 h-fit rounded-full border-2 border-primary-500 bg-primary-100 px-3 py-[3px]"
-            id="location-type"
-          >
-            <p className="text-xs font-bold text-primary-500">
-              {location_type}
+  // locationId
+}: LocationProps) => {
+  // const { loading, data, refetch } = useQuery(routes.listFacilityBeds, {
+  //   query: {
+  //     facility: facilityId,
+  //     // location: locationId,
+  //     // limit: resultsPerPage,
+  //     // offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage,
+  //   },
+  // });
+
+  return (
+    <div className="flex h-full w-full flex-col rounded border border-gray-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
+      <div className="flex-1">
+        <div className="flex w-full items-start justify-between gap-2">
+          <div className="flex items-start gap-3">
+            <p
+              className="break-all text-xl font-medium"
+              id="view-location-name"
+            >
+              {name}
             </p>
+            <div
+              className="mt-2 h-fit rounded-full border-2 border-primary-500 bg-primary-100 px-3 py-[3px]"
+              id="location-type"
+            >
+              <p className="text-xs font-bold text-primary-500">
+                {location_type}
+              </p>
+            </div>
           </div>
         </div>
-      </div>
-      <p
-        className="mt-3 break-all text-sm font-medium text-secondary-700"
-        id="view-location-description"
-      >
-        {description || "-"}
-      </p>
-      <p className="mt-3 text-sm font-semibold text-secondary-700">
-        Middleware Address:
-      </p>
-      <p
-        className="mt-1 break-all font-mono text-sm font-bold text-secondary-700"
-        id="view-location-middleware"
-      >
-        {middleware_address || "-"}
-      </p>
-      <Uptime
-        route={routes.listFacilityAssetLocationAvailability}
-        params={{ external_id: id, facility_external_id: facilityId }}
-        header={
-          <p className="mt-3 text-sm font-semibold text-secondary-700">
-            Middleware Uptime
-          </p>
-        }
-        centerInfoPanel
-      />
-    </div>
-
-    <ButtonV2
-      id="manage-bed-button"
-      variant="secondary"
-      border
-      className="mt-3 w-full"
-      href={`location/${id}/beds`}
-    >
-      <CareIcon icon="l-bed" className="text-lg" />
-      Manage Beds
-    </ButtonV2>
-    <div className="mt-2 flex w-full flex-col gap-2 md:flex-row">
-      <div className="w-full md:w-1/2">
-        <ButtonV2
-          id="edit-location-button"
-          variant="secondary"
-          border
-          className="w-full"
-          href={`location/${id}/update`}
-          authorizeFor={NonReadOnlyUsers}
+        <p
+          className="mt-3 break-all text-sm font-medium text-gray-700"
+          id="view-location-description"
         >
-          <CareIcon icon="l-pen" className="text-lg" />
-          Edit
-        </ButtonV2>
-      </div>
-      <div className="w-full md:w-1/2">
-        <ButtonV2
-          authorizeFor={AuthorizeFor(["DistrictAdmin", "StateAdmin"])}
-          id="delete-location-button"
-          variant="secondary"
-          border
-          className="w-full"
-          tooltip={disabled ? "Contact your admin to delete the location" : ""}
-          tooltipClassName=" text-xs w-full lg:w-auto"
-          onClick={() =>
-            setShowDeletePopup({ open: true, name: name ?? "", id: id ?? "" })
-          }
+          {description || "-"}
+        </p>
+        <p className="mt-3 text-sm font-semibold text-gray-700">
+          Middleware Address:
+        </p>
+        <p
+          className="mt-1 break-all font-mono text-sm font-bold text-gray-700"
+          id="view-location-middleware"
         >
-          <CareIcon icon="l-trash" className="text-lg" />
-          Delete
-        </ButtonV2>
+          {middleware_address || "-"}
+        </p>
+        <Uptime
+          route={routes.listFacilityAssetLocationAvailability}
+          params={{ external_id: id, facility_external_id: facilityId }}
+          header={
+            <p className="mt-3 text-sm font-semibold text-gray-700">
+              Middleware Uptime
+            </p>
+          }
+          centerInfoPanel
+        />
+      </div>
+      <p className="mt-3 text-sm font-semibold text-gray-700">Beds</p>
+      <div className="grid grid-cols-4 gap-3 rounded-md bg-gray-100 p-3 text-center text-sm text-gray-700">
+        <div>
+          <p className="font-semibold">Isolation</p>
+          <p>8 beds</p>
+        </div>
+        <div>
+          <p className="font-semibold">ICU</p>
+          <p>5 beds</p>
+        </div>
+        <div>
+          <p className="font-semibold">Oxygen Support</p>
+          <p> 8 beds</p>
+        </div>
+        <div>
+          <p className="font-semibold">Regular</p>
+          <p>20 beds</p>
+        </div>
+      </div>
+      <ButtonV2
+        id="manage-bed-button"
+        variant="secondary"
+        border
+        className="mt-3 w-full"
+        href={`location/${id}/beds`}
+      >
+        <CareIcon icon="l-bed" className="text-lg" />
+        Manage Beds
+      </ButtonV2>
+      <div className="mt-2 flex w-full flex-col gap-2 md:flex-row">
+        <div className="w-full md:w-1/2">
+          <ButtonV2
+            id="edit-location-button"
+            variant="secondary"
+            border
+            className="w-full"
+            href={`location/${id}/update`}
+            authorizeFor={NonReadOnlyUsers}
+          >
+            <CareIcon icon="l-pen" className="text-lg" />
+            Edit
+          </ButtonV2>
+        </div>
+        <div className="w-full md:w-1/2">
+          <ButtonV2
+            authorizeFor={AuthorizeFor(["DistrictAdmin", "StateAdmin"])}
+            id="delete-location-button"
+            variant="secondary"
+            border
+            className="w-full"
+            tooltip={
+              disabled ? "Contact your admin to delete the location" : ""
+            }
+            tooltipClassName=" text-xs w-full lg:w-auto"
+            onClick={() =>
+              setShowDeletePopup({ open: true, name: name ?? "", id: id ?? "" })
+            }
+          >
+            <CareIcon icon="l-trash" className="text-lg" />
+            Delete
+          </ButtonV2>
+        </div>
       </div>
-    </div>
 
-    <div className="mt-3 flex items-center justify-between gap-4 text-sm font-medium text-secondary-700">
-      <RecordMeta time={created_date} prefix="Created:" />
-      <RecordMeta time={modified_date} prefix="Modified:" />
+      <div className="mt-3 flex items-center justify-between gap-4 text-sm font-medium text-gray-700">
+        <RecordMeta time={created_date} prefix="Created:" />
+        <RecordMeta time={modified_date} prefix="Modified:" />
+      </div>
     </div>
-  </div>
-);
+  );
+};

From f695dff622f58896e8c5d1652d5e8d14eaf2b02c Mon Sep 17 00:00:00 2001
From: Shelly011s <shellysuthar.ict19@gmail.com>
Date: Tue, 1 Oct 2024 04:34:45 +0530
Subject: [PATCH 2/2] Added query calls

---
 .../Facility/LocationManagement.tsx           | 54 +++++++++----------
 1 file changed, 25 insertions(+), 29 deletions(-)

diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx
index 83124d3336a..8aa299b9ca1 100644
--- a/src/Components/Facility/LocationManagement.tsx
+++ b/src/Components/Facility/LocationManagement.tsx
@@ -3,6 +3,7 @@ import ButtonV2, { Cancel } from "../Common/components/ButtonV2";
 import AuthorizeFor, { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import Page from "../Common/components/Page";
+import { LOCATION_BED_TYPES } from "../../Common/constants";
 import routes from "../../Redux/api";
 import PaginatedList from "../../CAREUI/misc/PaginatedList";
 import { LocationModel } from "./models";
@@ -13,18 +14,16 @@ import ConfirmDialog from "../Common/ConfirmDialog";
 import DialogModal from "../Common/Dialog";
 import Uptime from "../Common/Uptime";
 import useAuthUser from "../../Common/hooks/useAuthUser";
-// import useQuery from "../../Utils/request/useQuery";
+import useQuery from "../../Utils/request/useQuery";
 const Loading = lazy(() => import("../Common/Loading"));
 
 interface Props {
   facilityId: string;
-  // locationId: string;
 }
 
 interface LocationProps extends LocationModel {
   facilityId: string;
   disabled: boolean;
-  // locationId: string;
   setShowDeletePopup: (e: { open: boolean; name: string; id: string }) => void;
 }
 
@@ -119,7 +118,6 @@ export default function LocationManagement({ facilityId }: Props) {
                 <Location
                   setShowDeletePopup={setShowDeletePopup}
                   facilityId={facilityId}
-                  // locationId={locationId}
                   {...item}
                   disabled={
                     ["DistrictAdmin", "StateAdmin"].includes(authUser.user_type)
@@ -227,16 +225,24 @@ const Location = ({
   disabled,
   setShowDeletePopup,
   facilityId,
-  // locationId
 }: LocationProps) => {
-  // const { loading, data, refetch } = useQuery(routes.listFacilityBeds, {
-  //   query: {
-  //     facility: facilityId,
-  //     // location: locationId,
-  //     // limit: resultsPerPage,
-  //     // offset: (qParams.page ? qParams.page - 1 : 0) * resultsPerPage,
-  //   },
-  // });
+  const { loading, data } = useQuery(routes.listFacilityBeds, {
+    query: {
+      facility: facilityId,
+      location: id,
+    },
+  });
+  let bedCountsByType: Record<string, number> = {};
+
+  if (!loading && data?.results?.length) {
+    bedCountsByType = data.results.reduce(
+      (acc: Record<string, number>, bed: any) => {
+        acc[bed.bed_type] = (acc[bed.bed_type] ?? 0) + 1;
+        return acc;
+      },
+      {},
+    );
+  }
 
   return (
     <div className="flex h-full w-full flex-col rounded border border-gray-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
@@ -287,22 +293,12 @@ const Location = ({
       </div>
       <p className="mt-3 text-sm font-semibold text-gray-700">Beds</p>
       <div className="grid grid-cols-4 gap-3 rounded-md bg-gray-100 p-3 text-center text-sm text-gray-700">
-        <div>
-          <p className="font-semibold">Isolation</p>
-          <p>8 beds</p>
-        </div>
-        <div>
-          <p className="font-semibold">ICU</p>
-          <p>5 beds</p>
-        </div>
-        <div>
-          <p className="font-semibold">Oxygen Support</p>
-          <p> 8 beds</p>
-        </div>
-        <div>
-          <p className="font-semibold">Regular</p>
-          <p>20 beds</p>
-        </div>
+        {LOCATION_BED_TYPES.map((type) => (
+          <div key={type.id}>
+            <p className="font-semibold">{type.name}</p>
+            <p>{bedCountsByType[type.id] || 0} beds</p>
+          </div>
+        ))}
       </div>
       <ButtonV2
         id="manage-bed-button"