Display live monitoring button to only State Admin, District Admin and Doctor.

src/Components/Facility/FacilityHome.tsx

@@ -475,15 +475,21 @@ export const FacilityHome = (props: any) => {
 const LiveMonitoringButton = () => {
   const facilityId = useSlug("facility");
   const [location, setLocation] = useState<string>();
+  const authUser = useAuthUser();
+
+  const userRoles = ["StateAdmin", "DistrictAdmin", "Doctor"];
 
   return (
     <Popover className="relative">
-      <Popover.Button className="mt-2 w-full">
-        <ButtonV2 variant="primary" ghost border className="w-full">
-          <CareIcon icon="l-video" className="text-lg" />
-          <span>Live Monitoring</span>
-        </ButtonV2>
-      </Popover.Button>
+      {userRoles.includes(authUser.user_type) && (
+        <Popover.Button className="mt-2 w-full">
+          <ButtonV2 variant="primary" ghost border className="w-full">
+            <CareIcon icon="l-video" className="text-lg" />
+            <span>Live Monitoring</span>
+          </ButtonV2>
+        </Popover.Button>
+      )}
+
       <Transition
         as={Fragment}
         enter="transition ease-out duration-200"

src/Routers/routes/FacilityLocationRoutes.tsx

@@ -4,6 +4,7 @@ import { AddLocationForm } from "../../Components/Facility/AddLocationForm";
 import { BedManagement } from "../../Components/Facility/BedManagement";
 import LocationManagement from "../../Components/Facility/LocationManagement";
 import CentralLiveMonitoring from "../../Components/CameraFeed/CentralLiveMonitoring";
+import { AuthorizeUserRoute } from "../../Utils/AuthorizeFor";
 
 export default {
   "/facility/:facilityId/location": ({ facilityId }: any) => (
@@ -37,6 +38,8 @@ export default {
     <AddBedForm facilityId={facilityId} locationId={locationId} bedId={bedId} />
   ),
   "/facility/:facilityId/live-monitoring": (props: any) => (
-    <CentralLiveMonitoring {...props} />
+    <AuthorizeUserRoute userTypes={["StateAdmin", "DistrictAdmin", "Doctor"]}>
+      <CentralLiveMonitoring {...props} />
+    </AuthorizeUserRoute>
   ),
 };

src/Utils/AuthorizeFor.tsx

@@ -1,6 +1,15 @@
 import { UserRole } from "../Common/constants";
+import React from "react";
+import useAuthUser from "../Common/hooks/useAuthUser";
+import Error404 from "../Components/ErrorPages/404";
 
 export type AuthorizedForCB = (userType: UserRole) => boolean;
+
+interface AuthorizeUserRouteProps {
+  userTypes: UserRole[];
+  children: React.ReactNode;
+}
+
 export type AuthorizedElementProps = {
   /**
    * Restrict access of this button to specific roles.
@@ -26,3 +35,15 @@ export const Anyone = () => true;
 export default function (userTypes: UserRole[]) {
   return (userType: UserRole) => userTypes.includes(userType);
 }
+
+export const AuthorizeUserRoute: React.FC<AuthorizeUserRouteProps> = ({
+  userTypes,
+  children,
+}) => {
+  const authUser = useAuthUser();
+  if (userTypes.includes(authUser.user_type)) {
+    return <>{children}</>;
+  } else {
+    return <Error404 />;
+  }
+};