Add Uptime tracking to Location Management

src/Components/Assets/AssetManage.tsx

@@ -502,6 +502,10 @@ const AssetManage = (props: AssetManageProps) => {
           <Uptime
             route={routes.listAssetAvailability}
             params={{ external_id: asset.id }}
+            header={
+              <div className="text-xl font-semibold">Availability History</div>
+            }
+            parentClassNames="mt-8 flex w-full flex-col bg-white p-4 shadow-sm sm:rounded-lg"
           />
         )}
       <div className="mb-4 mt-8 text-xl font-semibold">Service History</div>

src/Components/Common/Uptime.tsx

@@ -169,6 +169,8 @@ export default function Uptime(
   props: Readonly<{
     route: QueryRoute<PaginatedResponse<AvailabilityRecord>>;
     params?: Record<string, string | number>;
+    header?: React.ReactNode;
+    parentClassNames?: string;
   }>
 ) {
   const [summary, setSummary] = useState<{
@@ -361,10 +363,10 @@ export default function Uptime(
     );
   } else if (summary) {
     return (
-      <div className="mt-8 flex w-full flex-col bg-white p-4 shadow-sm sm:rounded-lg">
-        <div className="mx-2 w-full">
+      <div className={props.parentClassNames}>
+        <div className="w-full">
           <div className="grid grid-cols-1">
-            <div className="text-xl font-semibold">Availability History</div>
+            {props.header}
             <div>
               <div className="mt-2 overflow-x-clip px-5">
                 <div className="mb-1 mt-2 flex justify-center text-xs text-gray-700 opacity-70">

src/Components/Facility/LocationManagement.tsx

@@ -7,6 +7,7 @@ import routes from "../../Redux/api";
 import PaginatedList from "../../CAREUI/misc/PaginatedList";
 import { LocationModel } from "./models";
 import RecordMeta from "../../CAREUI/display/RecordMeta";
+import Uptime from "../Common/Uptime";
 
 const Loading = lazy(() => import("../Common/Loading"));
 
@@ -55,7 +56,7 @@ export default function LocationManagement({ facilityId }: Props) {
               <Loading />
             </PaginatedList.WhenLoading>
             <PaginatedList.Items<LocationModel> className="my-8 grid gap-3 @4xl:grid-cols-2 @6xl:grid-cols-3 @[100rem]:grid-cols-4 lg:mx-8">
-              {(item) => <Location {...item} />}
+              {(item) => <Location {...item} facilityId={facilityId} />}
             </PaginatedList.Items>
           </div>
 
@@ -76,7 +77,8 @@ const Location = ({
   created_date,
   modified_date,
   id,
-}: LocationModel) => (
+  facilityId,
+}: LocationModel & { facilityId: string }) => (
   <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-center justify-between gap-2">
@@ -122,6 +124,15 @@ const Location = ({
       >
         {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>
+        }
+      />
     </div>
 
     <ButtonV2

src/Redux/api.tsx

@@ -377,7 +377,7 @@ const routes = {
     path: "/api/v1/facility/{facility_external_id}/asset_location/{external_id}/",
     method: "PATCH",
   },
-  getFacilityAssetLocationAvailability: {
+  listFacilityAssetLocationAvailability: {
     path: "/api/v1/facility/{facility_external_id}/asset_location/{external_id}/availability/",
     method: "GET",
     TRes: Type<PaginatedResponse<AvailabilityRecord>>(),