From ac3681190dfc183e804f8aa8f8ca9ac4cc30deba Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Mon, 21 Oct 2024 20:58:12 +0530
Subject: [PATCH 1/5] Removed the camera name and details pop-up in assest
 configuration page

---
 src/Components/Assets/AssetConfigure.tsx      |  6 ++++-
 src/Components/CameraFeed/CameraFeed.tsx      | 25 ++++++++++++-------
 src/Components/CameraFeed/ConfigureCamera.tsx | 11 +++++++-
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/Components/Assets/AssetConfigure.tsx b/src/Components/Assets/AssetConfigure.tsx
index 9f5f73f296d..7c92430427b 100644
--- a/src/Components/Assets/AssetConfigure.tsx
+++ b/src/Components/Assets/AssetConfigure.tsx
@@ -61,7 +61,11 @@ const AssetConfigure = ({ assetId, facilityId }: AssetConfigureProps) => {
       }}
       backUrl={`/facility/${facilityId}/assets/${assetId}`}
     >
-      <ConfigureCamera asset={asset} onUpdated={() => refetch()} />
+      <ConfigureCamera
+        asset={asset}
+        onUpdated={() => refetch()}
+        isAssetCongfigure={true}
+      />
     </Page>
   );
 };
diff --git a/src/Components/CameraFeed/CameraFeed.tsx b/src/Components/CameraFeed/CameraFeed.tsx
index 3c9b25b6fc9..166282282b1 100644
--- a/src/Components/CameraFeed/CameraFeed.tsx
+++ b/src/Components/CameraFeed/CameraFeed.tsx
@@ -28,6 +28,8 @@ interface Props {
   shortcutsDisabled?: boolean;
   onMove?: () => void;
   operate: ReturnType<typeof useOperateCamera>["operate"];
+  //Assest Configuration
+  isAssetConfigurationPage?: boolean;
 }
 
 export default function CameraFeed(props: Props) {
@@ -145,6 +147,8 @@ export default function CameraFeed(props: Props) {
     />
   );
 
+  const isAssetConfigurationPage = props.isAssetConfigurationPage || false;
+
   return (
     <div ref={playerWrapperRef} className="flex h-full flex-col justify-center">
       <div
@@ -183,15 +187,18 @@ export default function CameraFeed(props: Props) {
             {props.children}
           </div>
           <div className="flex w-full flex-col items-end justify-end md:flex-row md:items-center md:gap-4">
-            <div className="flex items-center gap-2">
-              <span className="text-xs font-bold md:text-sm">
-                {props.asset.name}
-              </span>
-              <MonitorAssetPopover
-                asset={props.asset}
-                className="absolute z-[100] mt-2 w-56 -translate-x-full -translate-y-4 rounded-md bg-white md:w-[350px] md:-translate-x-full md:-translate-y-2"
-              />
-            </div>
+            {!isAssetConfigurationPage && (
+              <div className="flex items-center gap-2">
+                <span className="text-xs font-bold md:text-sm">
+                  {props.asset.name}
+                </span>
+                <MonitorAssetPopover
+                  asset={props.asset}
+                  className="absolute z-[100] mt-2 w-56 -translate-x-full -translate-y-4 rounded-md bg-white md:w-[350px] md:-translate-x-full md:-translate-y-2"
+                />
+              </div>
+            )}
+
             {!isIOS && (
               <div
                 className={classNames(
diff --git a/src/Components/CameraFeed/ConfigureCamera.tsx b/src/Components/CameraFeed/ConfigureCamera.tsx
index 052f93a9b05..33f7b8d20d5 100644
--- a/src/Components/CameraFeed/ConfigureCamera.tsx
+++ b/src/Components/CameraFeed/ConfigureCamera.tsx
@@ -33,6 +33,7 @@ import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
 interface Props {
   asset: AssetData;
   onUpdated: () => void;
+  isAssetCongfigure?: boolean;
 }
 
 type OnvifPreset = { name: string; value: number };
@@ -58,6 +59,7 @@ export default function ConfigureCamera(props: Props) {
   }>();
   const [presetName, setPresetName] = useState("");
   const [showUnlinkConfirmation, setShowUnlinkConfirmation] = useState(false);
+  const isAssetCongfigure = props.isAssetCongfigure || false;
 
   const assetBedsQuery = useQuery(routes.listAssetBeds, {
     query: { asset: props.asset.id, limit: 50 },
@@ -106,7 +108,12 @@ export default function ConfigureCamera(props: Props) {
   if (!["DistrictAdmin", "StateAdmin"].includes(authUser.user_type)) {
     return (
       <div className="w-full overflow-hidden rounded-lg bg-white shadow">
-        <CameraFeed asset={props.asset} key={key} operate={operate} />
+        <CameraFeed
+          asset={props.asset}
+          key={key}
+          operate={operate}
+          isAssetConfigurationPage={isAssetCongfigure}
+        />
       </div>
     );
   }
@@ -246,6 +253,7 @@ export default function ConfigureCamera(props: Props) {
                 );
               }
             }}
+            isAssetConfigurationPage={isAssetCongfigure}
           >
             <div className="flex items-center gap-2">
               <Listbox
@@ -552,6 +560,7 @@ export default function ConfigureCamera(props: Props) {
                         <div className="flex flex-col">
                           <span className="font-semibold">{preset.name}</span>
                           <span className="text-xs">
+                            asudhbu
                             <RecordMeta
                               prefix="last updated"
                               time={preset.modified_date}

From 4b1eb268a7afc1bd9a20da6cdda9619dbde55eff Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Mon, 21 Oct 2024 21:02:36 +0530
Subject: [PATCH 2/5] Removed the camera name and details pop-up in assest
 configuration page

---
 src/Components/CameraFeed/ConfigureCamera.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Components/CameraFeed/ConfigureCamera.tsx b/src/Components/CameraFeed/ConfigureCamera.tsx
index 33f7b8d20d5..ee8aca7f2a9 100644
--- a/src/Components/CameraFeed/ConfigureCamera.tsx
+++ b/src/Components/CameraFeed/ConfigureCamera.tsx
@@ -560,7 +560,6 @@ export default function ConfigureCamera(props: Props) {
                         <div className="flex flex-col">
                           <span className="font-semibold">{preset.name}</span>
                           <span className="text-xs">
-                            asudhbu
                             <RecordMeta
                               prefix="last updated"
                               time={preset.modified_date}

From d34a01405349454dd89a80da9afb1305ab9d3dee Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Mon, 21 Oct 2024 21:06:14 +0530
Subject: [PATCH 3/5] Removed the camera name and details pop-up in assest
 configuration page

---
 src/Components/Assets/AssetConfigure.tsx      | 2 +-
 src/Components/CameraFeed/ConfigureCamera.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Components/Assets/AssetConfigure.tsx b/src/Components/Assets/AssetConfigure.tsx
index 7c92430427b..253806d4e18 100644
--- a/src/Components/Assets/AssetConfigure.tsx
+++ b/src/Components/Assets/AssetConfigure.tsx
@@ -64,7 +64,7 @@ const AssetConfigure = ({ assetId, facilityId }: AssetConfigureProps) => {
       <ConfigureCamera
         asset={asset}
         onUpdated={() => refetch()}
-        isAssetCongfigure={true}
+        isAssetConfigure={true}
       />
     </Page>
   );
diff --git a/src/Components/CameraFeed/ConfigureCamera.tsx b/src/Components/CameraFeed/ConfigureCamera.tsx
index ee8aca7f2a9..4db788f2cdd 100644
--- a/src/Components/CameraFeed/ConfigureCamera.tsx
+++ b/src/Components/CameraFeed/ConfigureCamera.tsx
@@ -33,7 +33,7 @@ import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
 interface Props {
   asset: AssetData;
   onUpdated: () => void;
-  isAssetCongfigure?: boolean;
+  isAssetConfigure?: boolean;
 }
 
 type OnvifPreset = { name: string; value: number };
@@ -59,7 +59,7 @@ export default function ConfigureCamera(props: Props) {
   }>();
   const [presetName, setPresetName] = useState("");
   const [showUnlinkConfirmation, setShowUnlinkConfirmation] = useState(false);
-  const isAssetCongfigure = props.isAssetCongfigure || false;
+  const isAssetConfigure = props.isAssetConfigure || false;
 
   const assetBedsQuery = useQuery(routes.listAssetBeds, {
     query: { asset: props.asset.id, limit: 50 },
@@ -112,7 +112,7 @@ export default function ConfigureCamera(props: Props) {
           asset={props.asset}
           key={key}
           operate={operate}
-          isAssetConfigurationPage={isAssetCongfigure}
+          isAssetConfigurationPage={isAssetConfigure}
         />
       </div>
     );
@@ -253,7 +253,7 @@ export default function ConfigureCamera(props: Props) {
                 );
               }
             }}
-            isAssetConfigurationPage={isAssetCongfigure}
+            isAssetConfigurationPage={isAssetConfigure}
           >
             <div className="flex items-center gap-2">
               <Listbox

From 98958a72953105cf7c22bc9f7c0c3850b50c3d91 Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Tue, 22 Oct 2024 07:02:40 +0530
Subject: [PATCH 4/5] Changed the isAssetConfigure to hideMonitorAsset in props

---
 src/Components/Assets/AssetConfigure.tsx      | 2 +-
 src/Components/CameraFeed/CameraFeed.tsx      | 8 ++++----
 src/Components/CameraFeed/ConfigureCamera.tsx | 9 +++++----
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/Components/Assets/AssetConfigure.tsx b/src/Components/Assets/AssetConfigure.tsx
index 253806d4e18..6175d73bf1d 100644
--- a/src/Components/Assets/AssetConfigure.tsx
+++ b/src/Components/Assets/AssetConfigure.tsx
@@ -64,7 +64,7 @@ const AssetConfigure = ({ assetId, facilityId }: AssetConfigureProps) => {
       <ConfigureCamera
         asset={asset}
         onUpdated={() => refetch()}
-        isAssetConfigure={true}
+        hideMonitorAsset={true}
       />
     </Page>
   );
diff --git a/src/Components/CameraFeed/CameraFeed.tsx b/src/Components/CameraFeed/CameraFeed.tsx
index 166282282b1..bd2e21877bf 100644
--- a/src/Components/CameraFeed/CameraFeed.tsx
+++ b/src/Components/CameraFeed/CameraFeed.tsx
@@ -28,8 +28,8 @@ interface Props {
   shortcutsDisabled?: boolean;
   onMove?: () => void;
   operate: ReturnType<typeof useOperateCamera>["operate"];
-  //Assest Configuration
-  isAssetConfigurationPage?: boolean;
+  //Monitor Hide or Show
+  hideMonitorAsset?: boolean;
 }
 
 export default function CameraFeed(props: Props) {
@@ -147,7 +147,7 @@ export default function CameraFeed(props: Props) {
     />
   );
 
-  const isAssetConfigurationPage = props.isAssetConfigurationPage || false;
+  const hideMonitorAsset = props.hideMonitorAsset || false;
 
   return (
     <div ref={playerWrapperRef} className="flex h-full flex-col justify-center">
@@ -187,7 +187,7 @@ export default function CameraFeed(props: Props) {
             {props.children}
           </div>
           <div className="flex w-full flex-col items-end justify-end md:flex-row md:items-center md:gap-4">
-            {!isAssetConfigurationPage && (
+            {!hideMonitorAsset && (
               <div className="flex items-center gap-2">
                 <span className="text-xs font-bold md:text-sm">
                   {props.asset.name}
diff --git a/src/Components/CameraFeed/ConfigureCamera.tsx b/src/Components/CameraFeed/ConfigureCamera.tsx
index 4db788f2cdd..bb83d010ab0 100644
--- a/src/Components/CameraFeed/ConfigureCamera.tsx
+++ b/src/Components/CameraFeed/ConfigureCamera.tsx
@@ -33,7 +33,8 @@ import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
 interface Props {
   asset: AssetData;
   onUpdated: () => void;
-  isAssetConfigure?: boolean;
+  //show or hide camera pop-up
+  hideMonitorAsset?: boolean;
 }
 
 type OnvifPreset = { name: string; value: number };
@@ -59,7 +60,7 @@ export default function ConfigureCamera(props: Props) {
   }>();
   const [presetName, setPresetName] = useState("");
   const [showUnlinkConfirmation, setShowUnlinkConfirmation] = useState(false);
-  const isAssetConfigure = props.isAssetConfigure || false;
+  const hideMonitorAsset = props.hideMonitorAsset || false;
 
   const assetBedsQuery = useQuery(routes.listAssetBeds, {
     query: { asset: props.asset.id, limit: 50 },
@@ -112,7 +113,7 @@ export default function ConfigureCamera(props: Props) {
           asset={props.asset}
           key={key}
           operate={operate}
-          isAssetConfigurationPage={isAssetConfigure}
+          hideMonitorAsset={hideMonitorAsset}
         />
       </div>
     );
@@ -253,7 +254,7 @@ export default function ConfigureCamera(props: Props) {
                 );
               }
             }}
-            isAssetConfigurationPage={isAssetConfigure}
+            hideMonitorAsset={hideMonitorAsset}
           >
             <div className="flex items-center gap-2">
               <Listbox

From 1892b89f908bd8894711753d21c6015b4d46ca14 Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Tue, 22 Oct 2024 10:46:56 +0530
Subject: [PATCH 5/5] Refactor props and component names

---
 src/Components/Assets/AssetConfigure.tsx              |  6 +-----
 src/Components/CameraFeed/CameraFeed.tsx              | 11 ++++-------
 src/Components/CameraFeed/ConfigureCamera.tsx         |  7 ++-----
 .../{MonitorAssetPopover.tsx => AssetInfoPopover.tsx} | 11 ++++-------
 src/Components/VitalsMonitor/VitalsMonitorFooter.tsx  |  4 ++--
 5 files changed, 13 insertions(+), 26 deletions(-)
 rename src/Components/Common/{MonitorAssetPopover.tsx => AssetInfoPopover.tsx} (92%)

diff --git a/src/Components/Assets/AssetConfigure.tsx b/src/Components/Assets/AssetConfigure.tsx
index 6175d73bf1d..9f5f73f296d 100644
--- a/src/Components/Assets/AssetConfigure.tsx
+++ b/src/Components/Assets/AssetConfigure.tsx
@@ -61,11 +61,7 @@ const AssetConfigure = ({ assetId, facilityId }: AssetConfigureProps) => {
       }}
       backUrl={`/facility/${facilityId}/assets/${assetId}`}
     >
-      <ConfigureCamera
-        asset={asset}
-        onUpdated={() => refetch()}
-        hideMonitorAsset={true}
-      />
+      <ConfigureCamera asset={asset} onUpdated={() => refetch()} />
     </Page>
   );
 };
diff --git a/src/Components/CameraFeed/CameraFeed.tsx b/src/Components/CameraFeed/CameraFeed.tsx
index bd2e21877bf..93f87ee20aa 100644
--- a/src/Components/CameraFeed/CameraFeed.tsx
+++ b/src/Components/CameraFeed/CameraFeed.tsx
@@ -12,7 +12,7 @@ import useFullscreen from "../../Common/hooks/useFullscreen";
 import useBreakpoints from "../../Common/hooks/useBreakpoints";
 import { GetPresetsResponse } from "./routes";
 import VideoPlayer from "./videoPlayer";
-import MonitorAssetPopover from "../Common/MonitorAssetPopover";
+import AssetInfoPopover from "../Common/AssetInfoPopover";
 
 interface Props {
   children?: React.ReactNode;
@@ -28,8 +28,7 @@ interface Props {
   shortcutsDisabled?: boolean;
   onMove?: () => void;
   operate: ReturnType<typeof useOperateCamera>["operate"];
-  //Monitor Hide or Show
-  hideMonitorAsset?: boolean;
+  hideAssetInfo?: boolean;
 }
 
 export default function CameraFeed(props: Props) {
@@ -147,8 +146,6 @@ export default function CameraFeed(props: Props) {
     />
   );
 
-  const hideMonitorAsset = props.hideMonitorAsset || false;
-
   return (
     <div ref={playerWrapperRef} className="flex h-full flex-col justify-center">
       <div
@@ -187,12 +184,12 @@ export default function CameraFeed(props: Props) {
             {props.children}
           </div>
           <div className="flex w-full flex-col items-end justify-end md:flex-row md:items-center md:gap-4">
-            {!hideMonitorAsset && (
+            {!props.hideAssetInfo && (
               <div className="flex items-center gap-2">
                 <span className="text-xs font-bold md:text-sm">
                   {props.asset.name}
                 </span>
-                <MonitorAssetPopover
+                <AssetInfoPopover
                   asset={props.asset}
                   className="absolute z-[100] mt-2 w-56 -translate-x-full -translate-y-4 rounded-md bg-white md:w-[350px] md:-translate-x-full md:-translate-y-2"
                 />
diff --git a/src/Components/CameraFeed/ConfigureCamera.tsx b/src/Components/CameraFeed/ConfigureCamera.tsx
index bb83d010ab0..4882b21c655 100644
--- a/src/Components/CameraFeed/ConfigureCamera.tsx
+++ b/src/Components/CameraFeed/ConfigureCamera.tsx
@@ -33,8 +33,6 @@ import CheckBoxFormField from "../Form/FormFields/CheckBoxFormField";
 interface Props {
   asset: AssetData;
   onUpdated: () => void;
-  //show or hide camera pop-up
-  hideMonitorAsset?: boolean;
 }
 
 type OnvifPreset = { name: string; value: number };
@@ -60,7 +58,6 @@ export default function ConfigureCamera(props: Props) {
   }>();
   const [presetName, setPresetName] = useState("");
   const [showUnlinkConfirmation, setShowUnlinkConfirmation] = useState(false);
-  const hideMonitorAsset = props.hideMonitorAsset || false;
 
   const assetBedsQuery = useQuery(routes.listAssetBeds, {
     query: { asset: props.asset.id, limit: 50 },
@@ -113,7 +110,7 @@ export default function ConfigureCamera(props: Props) {
           asset={props.asset}
           key={key}
           operate={operate}
-          hideMonitorAsset={hideMonitorAsset}
+          hideAssetInfo
         />
       </div>
     );
@@ -254,7 +251,7 @@ export default function ConfigureCamera(props: Props) {
                 );
               }
             }}
-            hideMonitorAsset={hideMonitorAsset}
+            hideAssetInfo
           >
             <div className="flex items-center gap-2">
               <Listbox
diff --git a/src/Components/Common/MonitorAssetPopover.tsx b/src/Components/Common/AssetInfoPopover.tsx
similarity index 92%
rename from src/Components/Common/MonitorAssetPopover.tsx
rename to src/Components/Common/AssetInfoPopover.tsx
index 3d7d55ad271..986bed795c9 100644
--- a/src/Components/Common/MonitorAssetPopover.tsx
+++ b/src/Components/Common/AssetInfoPopover.tsx
@@ -1,6 +1,6 @@
 import CareIcon from "../../CAREUI/icons/CareIcon";
 import { AssetData, assetClassProps } from "../Assets/AssetTypes";
-import ButtonV2 from "../Common/components/ButtonV2";
+import ButtonV2 from "./components/ButtonV2";
 import { navigate } from "raviger";
 import { useTranslation } from "react-i18next";
 import {
@@ -10,15 +10,12 @@ import {
   Transition,
 } from "@headlessui/react";
 
-interface MonitorAssetPopoverProps {
+interface AssetInfoPopoverProps {
   asset?: AssetData;
   className?: string;
 }
 
-const MonitorAssetPopover = ({
-  asset,
-  className,
-}: MonitorAssetPopoverProps) => {
+const AssetInfoPopover = ({ asset, className }: AssetInfoPopoverProps) => {
   const { t } = useTranslation();
 
   return (
@@ -87,4 +84,4 @@ const MonitorAssetPopover = ({
   );
 };
 
-export default MonitorAssetPopover;
+export default AssetInfoPopover;
diff --git a/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx b/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx
index 1c669cd5bbf..1a45b2cd000 100644
--- a/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx
+++ b/src/Components/VitalsMonitor/VitalsMonitorFooter.tsx
@@ -1,5 +1,5 @@
 import { AssetData } from "../Assets/AssetTypes";
-import MonitorAssetPopover from "../Common/MonitorAssetPopover";
+import AssetInfoPopover from "../Common/AssetInfoPopover";
 
 interface IVitalsMonitorFooterProps {
   asset?: AssetData;
@@ -9,7 +9,7 @@ const VitalsMonitorFooter = ({ asset }: IVitalsMonitorFooterProps) => {
   return (
     <div className="flex w-full items-center gap-2 text-xs tracking-wide md:text-sm">
       <p className="text-secondary-500">{asset?.name}</p>
-      <MonitorAssetPopover
+      <AssetInfoPopover
         asset={asset}
         className="absolute z-[100] mt-2 w-56 -translate-x-1/3 translate-y-[-280px] rounded-md bg-white md:w-[350px] md:-translate-y-full md:translate-x-6"
       />