diff --git a/src/Components/Facility/LocationManagement.tsx b/src/Components/Facility/LocationManagement.tsx index 83bf335aff2..80dcef87dfc 100644 --- a/src/Components/Facility/LocationManagement.tsx +++ b/src/Components/Facility/LocationManagement.tsx @@ -13,6 +13,7 @@ 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")); @@ -23,6 +24,7 @@ interface Props { interface LocationProps extends LocationModel { facilityId: string; disabled: boolean; + totalBeds?: number; setShowDeletePopup: (e: { open: boolean; name: string; id: string }) => void; } @@ -73,6 +75,20 @@ export default function LocationManagement({ facilityId }: Props) { setShowDeletePopup({ ...showDeletePopup, open: false }); }; + function BedsData(facilityId: string, locationId: string) { + const { loading, data } = useQuery(routes.listFacilityBeds, { + query: { + facility: facilityId, + location: locationId, + }, + }); + + return { + loading, + totalBeds: data?.results.length || 0, + }; + } + return ( className="my-8 grid gap-3 @4xl:grid-cols-2 @6xl:grid-cols-3 @[100rem]:grid-cols-4 lg:mx-8"> - {(item) => ( - - )} + {(item) => { + const { loading, totalBeds } = BedsData(facilityId, item.id); + + if (loading) { + return ; + } + return ( + + ); + }} @@ -216,6 +242,7 @@ export default function LocationManagement({ facilityId }: Props) { const Location = ({ name, description, + totalBeds, middleware_address, location_type, created_date, @@ -273,11 +300,14 @@ const Location = ({ id="manage-bed-button" variant="secondary" border - className="mt-3 w-full" + className="mt-3 flex w-full justify-between" href={`location/${id}/beds`} > - Manage Beds + + + {totalBeds} +