diff --git a/app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx b/app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx
index 2d82225..210e2b4 100644
--- a/app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx
+++ b/app/src/components/layout/sidebarRight/visualization/IotInputCards/InputSelecterComponent.tsx
@@ -12,140 +12,198 @@ import Widget4InputCard3D from './Widget4InputCard3D'
 import WarehouseThroughputInputComponent from './WarehouseThroughputInputComponent'
 import { useWidgetStore } from '../../../../../store/useWidgetStore'
 
+// const InputSelecterComponent = () => {
+//     const { selectedChartId } = useWidgetStore();
+
+//   if (selectedChartId && selectedChartId.type && selectedChartId.type === 'bar' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">2D Widget Input</div>
+//         <BarChartInput />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'line' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">2D Widget Input</div>
+//         <LineGrapInput />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'pie' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">2D Widget Input</div>
+//         <PieChartInput />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'doughnut' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">2D Widget Input</div>
+//         <PieChartInput />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'polarArea' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">2D Widget Input</div>
+//         <PieChartInput />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 1' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">2D Widget Input</div>
+//         <Progress1Input />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 2' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">2D Widget Input</div>
+//         <Progress2Input />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'warehouseThroughput floating' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">Floting Widget Input</div>
+//         <WarehouseThroughputInputComponent />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'fleetEfficiency floating' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">Floting Widget Input</div>
+//         <FleetEfficiencyInputComponent />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'floating total-card' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">Floting Widget Input</div>
+//         <FleetEfficiencyInputComponent />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 1' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">3D Widget Input</div>
+//         <Widget4InputCard3D />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 2' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">3D Widget Input</div>
+//         <Widget2InputCard3D />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 3' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">3D Widget Input</div>
+//         <Widget3InputCard3D />
+//         </>
+//       )
+//   }
+
+//   else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 4' ) {
+//     return (
+//         <>
+//         <div className="sideBarHeader">3D Widget Input</div>
+//         <Widget4InputCard3D />
+//         </>
+//       )
+//   }
+
+//   else {
+//     return (
+//         <div>No chart selected</div>
+//       )
+//   }
+// }
+
+const chartTypeMap: Record<| 'bar'| 'line'| 'pie' | 'doughnut' | 'polarArea'| 'progress 1' | 'progress 2'
+  | 'ui-Widget 1'| 'ui-Widget 2'| 'ui-Widget 3'| 'ui-Widget 4',JSX.Element> = {
+  bar: <BarChartInput />,
+  line: <LineGrapInput />,
+  pie: <PieChartInput />,
+  doughnut: <PieChartInput />,
+  polarArea: <PieChartInput />,
+  'progress 1': <Progress1Input />,
+  'progress 2': <Progress2Input />,
+  'ui-Widget 1': <Widget4InputCard3D />,
+  'ui-Widget 2': <Widget2InputCard3D />,
+  'ui-Widget 3': <Widget3InputCard3D />,
+  'ui-Widget 4': <Widget4InputCard3D />,
+};
+
+const classNameMap: Record<
+  | 'warehouseThroughput floating'
+  | 'fleetEfficiency floating'
+  | 'floating total-card',
+  JSX.Element
+> = {
+  'warehouseThroughput floating': <WarehouseThroughputInputComponent />,
+  'fleetEfficiency floating': <FleetEfficiencyInputComponent />,
+  'floating total-card': <FleetEfficiencyInputComponent />,
+};
+
 const InputSelecterComponent = () => {
-    const { selectedChartId } = useWidgetStore();
+  const { selectedChartId } = useWidgetStore();
 
-  if (selectedChartId && selectedChartId.type && selectedChartId.type === 'bar' ) {
-    return (
+  if (selectedChartId) {
+    const { type, className } = selectedChartId;
+
+    if (type && chartTypeMap[type as keyof typeof chartTypeMap]) {
+      const label = ['ui-Widget 1', 'ui-Widget 2', 'ui-Widget 3', 'ui-Widget 4'].includes(type)
+        ? '3D Widget Input'
+        : '2D Widget Input';
+
+      return (
         <>
-        <div className="sideBarHeader">2D Widget Input</div>
-        <BarChartInput />
+          <div className="sideBarHeader">{label}</div>
+          {chartTypeMap[type as keyof typeof chartTypeMap]}
         </>
-      )
-  }
+      );
+    }
 
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'line' ) {
-    return (
+    if (className && classNameMap[className as keyof typeof classNameMap]) {
+      return (
         <>
-        <div className="sideBarHeader">2D Widget Input</div>
-        <LineGrapInput />
+          <div className="sideBarHeader">Floting Widget Input</div>
+          {classNameMap[className as keyof typeof classNameMap]}
         </>
-      )
+      );
+    }
   }
 
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'pie' ) {
-    return (
-        <>
-        <div className="sideBarHeader">2D Widget Input</div>
-        <PieChartInput />
-        </>
-      )
-  }
+  return <div>No chart selected</div>;
+};
 
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'doughnut' ) {
-    return (
-        <>
-        <div className="sideBarHeader">2D Widget Input</div>
-        <PieChartInput />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'polarArea' ) {
-    return (
-        <>
-        <div className="sideBarHeader">2D Widget Input</div>
-        <PieChartInput />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 1' ) {
-    return (
-        <>
-        <div className="sideBarHeader">2D Widget Input</div>
-        <Progress1Input />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'progress 2' ) {
-    return (
-        <>
-        <div className="sideBarHeader">2D Widget Input</div>
-        <Progress2Input />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'warehouseThroughput floating' ) {
-    return (
-        <>
-        <div className="sideBarHeader">Floting Widget Input</div>
-        <WarehouseThroughputInputComponent />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'fleetEfficiency floating' ) {
-    return (
-        <>
-        <div className="sideBarHeader">Floting Widget Input</div>
-        <FleetEfficiencyInputComponent />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.className && selectedChartId.className === 'floating total-card' ) {
-    return (
-        <>
-        <div className="sideBarHeader">Floting Widget Input</div>
-        <FleetEfficiencyInputComponent />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 1' ) {
-    return (
-        <>
-        <div className="sideBarHeader">3D Widget Input</div>
-        <Widget4InputCard3D />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 2' ) {
-    return (
-        <>
-        <div className="sideBarHeader">3D Widget Input</div>
-        <Widget2InputCard3D />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 3' ) {
-    return (
-        <>
-        <div className="sideBarHeader">3D Widget Input</div>
-        <Widget3InputCard3D />
-        </>
-      )
-  }
-
-  else if (selectedChartId && selectedChartId.type && selectedChartId.type === 'ui-Widget 4' ) {
-    return (
-        <>
-        <div className="sideBarHeader">3D Widget Input</div>
-        <Widget4InputCard3D />
-        </>
-      )
-  }
-
-  else {
-    return (
-        <div>No chart selected</div>
-      )
-  }
-}
-
-export default InputSelecterComponent
\ No newline at end of file
+export default InputSelecterComponent;
\ No newline at end of file
diff --git a/app/src/modules/visualization/widgets/floating/cards/TotalCardComponent.tsx b/app/src/modules/visualization/widgets/floating/cards/TotalCardComponent.tsx
index edc19e6..2e6886c 100644
--- a/app/src/modules/visualization/widgets/floating/cards/TotalCardComponent.tsx
+++ b/app/src/modules/visualization/widgets/floating/cards/TotalCardComponent.tsx
@@ -12,7 +12,7 @@ import {
 } from "../../../../../components/icons/3dChartIcons";
 
 const TotalCardComponent = ({ object }: any) => {
-  console.log('object: ', object);
+
   const [progress, setProgress] = useState<any>(0);
   const [measurements, setmeasurements] = useState<any>({});
   const [duration, setDuration] = useState("1h");