From b3a7a4881324b803fb49338ecdd6ab10e88d9c01 Mon Sep 17 00:00:00 2001
From: "aishwarya.srivastava" <aishwarya.srivastava@navi.com>
Date: Tue, 6 May 2025 12:32:33 +0530
Subject: [PATCH] NTP-59601 | Anomaly card changes

---
 src/assets/icons/AnomalyIcon.tsx              | 19 +++---
 .../AnomalyTracker/AnomalyCardHeader.tsx      | 25 ++++++--
 .../DaysTillEscalationComponent.tsx           | 59 +++++++++++++++++++
 .../AnomalyTracker/SingleAnomalyDetails.tsx   |  5 +-
 .../Dashboard/AnomalyTracker/constants.ts     | 14 +++++
 5 files changed, 104 insertions(+), 18 deletions(-)
 create mode 100644 src/screens/Dashboard/AnomalyTracker/DaysTillEscalationComponent.tsx

diff --git a/src/assets/icons/AnomalyIcon.tsx b/src/assets/icons/AnomalyIcon.tsx
index 9cf73a97..9dadb80f 100644
--- a/src/assets/icons/AnomalyIcon.tsx
+++ b/src/assets/icons/AnomalyIcon.tsx
@@ -2,30 +2,29 @@ import * as React from 'react';
 import Svg, { Path, Rect } from 'react-native-svg';
 
 const AnomalyTrackerIcon = () => (
-  <Svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-    <Rect width="20" height="20" rx="4" fill="#FFEFDB" />
+  <Svg width="18" height="19" viewBox="0 0 18 19" fill="none">
     <Path
-      d="M13.7627 13.7617L16.4995 16.4986"
+      d="M13.8232 14.8232L17.332 18.332"
       stroke="#F0C52B"
-      stroke-width="1.45905"
+      stroke-width="1.6"
       stroke-miterlimit="10"
     />
     <Path
-      d="M3.92969 7.26413C4.8213 5.05864 6.98676 3.50098 9.51078 3.50098C12.836 3.50098 15.525 6.20361 15.525 9.51519C15.525 12.8268 12.8429 15.5226 9.51078 15.5226C7.15763 15.5226 5.11444 14.1658 4.12734 12.1929"
+      d="M1.21973 6.49058C2.36282 3.66302 5.13905 1.66602 8.37497 1.66602C12.6381 1.66602 16.0855 5.13093 16.0855 9.37654C16.0855 13.6222 12.6469 17.0783 8.37497 17.0783C5.35812 17.0783 2.73864 15.3388 1.47313 12.8096"
       stroke="#F0C52B"
-      stroke-width="1.45905"
+      stroke-width="1.6"
       stroke-miterlimit="10"
     />
     <Path
-      d="M3.5 9.58284H5.76474C6.20263 9.58284 6.60632 9.32284 6.81842 8.91231L7.43421 7.74916C7.66 7.3181 8.24842 7.40705 8.35789 7.89284L9.23368 11.7107C9.34316 12.1965 9.95211 12.2855 10.1642 11.8339L11.1768 9.71968"
+      d="M0.666016 9.46345H3.56952C4.13093 9.46345 4.64847 9.13012 4.9204 8.6038L5.70988 7.11257C5.99935 6.55994 6.75374 6.67398 6.89409 7.29679L8.01689 12.1915C8.15724 12.8143 8.93795 12.9284 9.20988 12.3494L10.5081 9.63889"
       stroke="#F0C52B"
-      stroke-width="1.45905"
+      stroke-width="1.6"
       stroke-miterlimit="10"
     />
     <Path
-      d="M11.5467 9.80913C12.0119 9.80913 12.3882 9.43282 12.3882 8.96756C12.3882 8.50229 12.0119 8.12598 11.5467 8.12598C11.0814 8.12598 10.7051 8.50229 10.7051 8.96756C10.7051 9.43282 11.0814 9.80913 11.5467 9.80913Z"
+      d="M10.9832 9.7536C11.5797 9.7536 12.0622 9.27114 12.0622 8.67465C12.0622 8.07816 11.5797 7.5957 10.9832 7.5957C10.3868 7.5957 9.9043 8.07816 9.9043 8.67465C9.9043 9.27114 10.3868 9.7536 10.9832 9.7536Z"
       stroke="#F0C52B"
-      stroke-width="1.45905"
+      stroke-width="1.6"
       stroke-miterlimit="10"
     />
   </Svg>
diff --git a/src/screens/Dashboard/AnomalyTracker/AnomalyCardHeader.tsx b/src/screens/Dashboard/AnomalyTracker/AnomalyCardHeader.tsx
index 699b568c..63c603cb 100644
--- a/src/screens/Dashboard/AnomalyTracker/AnomalyCardHeader.tsx
+++ b/src/screens/Dashboard/AnomalyTracker/AnomalyCardHeader.tsx
@@ -4,15 +4,29 @@ import Text from '@rn-ui-lib/components/Text';
 
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
+import Tag, { TagVariant } from '@rn-ui-lib/components/Tag';
+import { AnomalyCardHeaderColor, AnomalyPriorityColor } from './constants';
 const AnomalyCardHeader = (props: any) => {
   const { item } = props;
-
+  const headerColor =
+    AnomalyCardHeaderColor[item?.priority as keyof typeof AnomalyCardHeaderColor] ||
+    COLORS.BACKGROUND.YELLOW_LIGHT;
+  const labelColor =
+    AnomalyPriorityColor[item?.priority as keyof typeof AnomalyPriorityColor] ||
+    COLORS.TEXT.YELLOW_LIGHT;
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { backgroundColor: headerColor }]}>
       <Text style={styles.text} dark>
         {item?.type}
       </Text>
-      <View style={styles.priorityLabel}>
+      <View
+        style={[
+          styles.priorityLabel,
+          {
+            backgroundColor: labelColor,
+          },
+        ]}
+      >
         <Text style={{ fontSize: 12, color: COLORS.TEXT.WHITE }}>{item?.priority}</Text>
       </View>
     </View>
@@ -23,15 +37,14 @@ const styles = StyleSheet.create({
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    backgroundColor: COLORS.BACKGROUND.RED,
-    borderTopRadius: 6,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
     paddingHorizontal: 16,
     paddingVertical: 12,
     alignItems: 'center',
   },
   priorityLabel: {
     borderRadius: 4,
-    backgroundColor: COLORS.TEXT.RED,
     paddingHorizontal: 8,
     paddingVertical: 1,
   },
diff --git a/src/screens/Dashboard/AnomalyTracker/DaysTillEscalationComponent.tsx b/src/screens/Dashboard/AnomalyTracker/DaysTillEscalationComponent.tsx
new file mode 100644
index 00000000..f2472b89
--- /dev/null
+++ b/src/screens/Dashboard/AnomalyTracker/DaysTillEscalationComponent.tsx
@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, { useAnimatedProps, useSharedValue, withTiming } from 'react-native-reanimated';
+import Svg, { Circle } from 'react-native-svg';
+import Text from '@rn-ui-lib/components/Text';
+import { COLORS } from '@rn-ui-lib/colors';
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+const DaysTillEscalationComponent = (props: {
+  dayTillEscalation: number;
+  progressPercent: number;
+}) => {
+  const { dayTillEscalation, progressPercent } = props;
+  const progress = useSharedValue(0);
+  useEffect(() => {
+    const normalizedProgress = progressPercent / 100;
+    progress.value = withTiming(normalizedProgress, { duration: 400 });
+  }, []);
+  const radius = 18;
+  const circumference = 2 * Math.PI * radius;
+  const circleAnimatedProps = useAnimatedProps(() => ({
+    strokeDashoffset: circumference * (1 - progress.value),
+  }));
+
+  return (
+    <>
+      <Svg width="44px" height="42px" fill="none">
+        <Circle cx="22" cy="21" r={radius} stroke="#FFEFDB" strokeWidth={5} />
+        <AnimatedCircle
+          cx="22"
+          cy="21"
+          r={radius}
+          stroke={COLORS.TEXT.YELLOW}
+          strokeWidth={5}
+          strokeDasharray={circumference}
+          animatedProps={circleAnimatedProps}
+          rotation="-90"
+          origin="22,21"
+        />
+      </Svg>
+      <View
+        style={{
+          position: 'absolute',
+          transform: [{ translateX: 82 }],
+        }}
+      >
+        {dayTillEscalation > 0 ? (
+          <Text style={{ fontSize: 14, color: COLORS.TEXT.YELLOW, fontWeight: '700' }}>
+            {dayTillEscalation}
+          </Text>
+        ) : (
+          <Text style={{ fontSize: 14, color: COLORS.TEXT.YELLOW, fontWeight: '700' }}>0</Text>
+        )}
+      </View>
+    </>
+  );
+};
+
+export default DaysTillEscalationComponent;
diff --git a/src/screens/Dashboard/AnomalyTracker/SingleAnomalyDetails.tsx b/src/screens/Dashboard/AnomalyTracker/SingleAnomalyDetails.tsx
index 16ed2b48..b0b5605d 100644
--- a/src/screens/Dashboard/AnomalyTracker/SingleAnomalyDetails.tsx
+++ b/src/screens/Dashboard/AnomalyTracker/SingleAnomalyDetails.tsx
@@ -7,6 +7,7 @@ import { sanitizeString } from '@components/utlis/commonFunctions';
 import { BUSINESS_DATE_FORMAT, dateFormat } from '@rn-ui-lib/utils/dates';
 import { AnomalyType } from './constants';
 import DaysTillEscalationComponent from './DaysTillEscalationComponent';
+import { GenericStyles } from '@rn-ui-lib/styles';
 
 interface ISingleAnomalyDetailsProps {
   item: any;
@@ -26,7 +27,7 @@ const SingleAnomalyDetails = (props: ISingleAnomalyDetailsProps) => {
       </View>
       {anomalyType === AnomalyType.OPEN ? (
         <View style={styles.daysTillEscalationText}>
-          <Text style={[styles.textLabel, styles.textAlign, styles.w60]}>Days till Escalation</Text>
+          <Text style={[GenericStyles.mr4, styles.textLabel, styles.textAlign, styles.w60]}>Days till Escalation</Text>
           <DaysTillEscalationComponent
             dayTillEscalation={item?.daysRemaining}
             progressPercent={item?.escalationPercentage}
@@ -59,7 +60,7 @@ const styles = StyleSheet.create({
   },
   textLabel: { fontSize: 12, color: COLORS.TEXT.LIGHT },
   date: { fontSize: 14, color: COLORS.TEXT.BLACK, fontWeight: '600' },
-  daysTillEscalationText: { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 8 },
+  daysTillEscalationText: { display: 'flex', flexDirection: 'row', alignItems: 'center' },
   textAlign: { textAlign: 'right' },
   w60: { width: 60 },
 });
diff --git a/src/screens/Dashboard/AnomalyTracker/constants.ts b/src/screens/Dashboard/AnomalyTracker/constants.ts
index a0d74ef4..7f3ebdff 100644
--- a/src/screens/Dashboard/AnomalyTracker/constants.ts
+++ b/src/screens/Dashboard/AnomalyTracker/constants.ts
@@ -1,3 +1,5 @@
+import { COLORS } from '@rn-ui-lib/colors';
+
 export enum AnomalyType {
   OPEN = 'OPEN',
   RESOLVED = 'RESOLVED',
@@ -15,3 +17,15 @@ export const TABS = [
 ];
 
 export const anomalyPageTitle = 'Your issues';
+
+export const AnomalyPriorityColor = {
+  P0: COLORS.TEXT.RED,
+  P1: COLORS.TEXT.YELLOW,
+  P2: COLORS.TEXT.YELLOW_LIGHT,
+};
+
+export const AnomalyCardHeaderColor = {
+  P0: COLORS.BACKGROUND.RED,
+  P1: COLORS.BACKGROUND.ORANGE,
+  P2: COLORS.BACKGROUND.YELLOW_LIGHT,
+};