varnitgoyal95/address-verification-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

NTP-59601 | Anomaly card changes

Browse Source
This commit is contained in:
aishwarya.srivastava
2025-05-06 12:32:33 +05:30
parent 35330d2488
commit b3a7a48813
5 changed files with 104 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/assets/icons/AnomalyIcon.tsx
View File

@@ -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>

25
src/screens/Dashboard/AnomalyTracker/AnomalyCardHeader.tsx
View File

@@ -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,
},

59
src/screens/Dashboard/AnomalyTracker/DaysTillEscalationComponent.tsx Normal file
View File

@@ -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;

5
src/screens/Dashboard/AnomalyTracker/SingleAnomalyDetails.tsx
View File

@@ -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 },
});

14
src/screens/Dashboard/AnomalyTracker/constants.ts
View File

@@ -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,
};