NTP-62417| varshitha |Activity Adherence and Calls (#1455)

* NTP-62417| varshitha |Activity Adherence and Calls

* NTP-62417| varshitha |Activity Adherence and Calls

src/pages/DashboardV2/ActivityTracker/RenderActivityBar.tsx

@@ -1,5 +1,5 @@
 import { Tooltip, TooltipContent, TooltipTrigger } from '@cp/src/components/TooltipV2/TooltipV2';
-import { ActivityTypeLabels, EXPECTED_DURATION_IN_MINUTES } from './constants';
+import { ActivityTypeLabels, EXPECTED_DURATION_IN_MINUTES, LoginStatus } from './constants';
 import { ActivityItem } from './types';
 import {
   calculateActivityBarWidths,
@@ -19,6 +19,7 @@ const renderActivityBar = ({
   showLoginTime = false,
   showExpectedDuration = false,
   expectedDurationInMinutes = EXPECTED_DURATION_IN_MINUTES,
+  loginStatus,
   totalExpectedMinutes
 }: {
   activities: ActivityItem[];
@@ -26,6 +27,7 @@ const renderActivityBar = ({
   showLoginTime?: boolean;
   showExpectedDuration?: boolean;
   expectedDurationInMinutes?: number;
+  loginStatus?: LoginStatus;
   totalExpectedMinutes: number;
 }) => {
   const calculatedActivities = calculateActivityBarWidths(activities, totalExpectedMinutes);
@@ -35,6 +37,8 @@ const renderActivityBar = ({
     calculatedActivities
   );
 
+  const isLateLogin = loginStatus === LoginStatus.LATE_LOGIN;
+
   return (
     <div className="flex flex-row items-start relative">
       {showLoginTime ? (
@@ -44,7 +48,7 @@ const renderActivityBar = ({
               <div
                 className={`w-[3px] h-[28px] !rounded-sm absolute mt-[-2px]`}
                 style={{
-                  backgroundColor: isLateLogin(loginTimeStamp || 0)
+                  backgroundColor: isLateLogin
                     ? getActivityColorClassMap['lateLogin']
                     : getActivityColorClassMap['inTimeLogin']
                 }}
@@ -79,7 +83,12 @@ const renderActivityBar = ({
           }
 
           return (
-            <Tooltip key={`activity-${index}`} placement="top" hideStrategy="referenceHidden">
+            <Tooltip
+              key={`activity-${index}`}
+              placement="top"
+              hideStrategy="referenceHidden"
+              hiddenPadding={0}
+            >
               <div style={{ width: `${activity.durationInPercentage}%`, height: '100%' }}>
                 <TooltipTrigger asChild>
                   <div

src/pages/DashboardV2/ActivityTracker/TodayActivity.tsx

@@ -82,6 +82,7 @@ const TodayActivity = ({ isLoading }: { isLoading: boolean }) => {
                 showLoginTime: true,
                 showExpectedDuration: true,
                 expectedDurationInMinutes: Number(loginMetrics?.expectedActiveMinutes || 0),
+                loginStatus: loginMetrics.loginStatus,
                 totalExpectedMinutes: EXPECTED_DURATION_IN_MINUTES
               })}
             </div>

src/pages/DashboardV2/ActivityTracker/constants.ts

@@ -67,3 +67,8 @@ export const ActivityTypeLabels = {
     contentInTip: 'Other breaks'
   }
 };
+
+export enum LoginStatus {
+  ON_TIME_LOGGED_IN = 'ON_TIME_LOGGED_IN',
+  LATE_LOGIN = 'LATE_LOGIN'
+}