diff --git a/src/assets/icons/AnimatedCircularLoaderIcon.tsx b/src/assets/icons/AnimatedCircularLoaderIcon.tsx new file mode 100644 index 00000000..1a15689c --- /dev/null +++ b/src/assets/icons/AnimatedCircularLoaderIcon.tsx @@ -0,0 +1,63 @@ +import React, { useEffect } from 'react'; +import Animated, { + SharedValue, + useAnimatedProps, + useSharedValue, + withTiming, +} from 'react-native-reanimated'; +import Svg, { Circle, NumberArray } from 'react-native-svg'; +import { COLORS } from '@rn-ui-lib/colors'; + +const AnimatedCircle = Animated.createAnimatedComponent(Circle); + +interface AnimatedCircularLoaderIco { + radius: number; + circumference: number; + strokeWidth?: number; + strokeColor?: string; + centreX?: string | number; + centreY?: string | number; + origin?: NumberArray | SharedValue; + progressPercent: number; +} + +const AnimatedCircularLoaderIcon = (props: AnimatedCircularLoaderIco) => { + const { + radius, + circumference, + strokeWidth = 5, + strokeColor = '#FFEFDB', + centreX = '22', + centreY = '21', + origin = '22,21', + progressPercent, + } = props; + const progress = useSharedValue(0); + useEffect(() => { + const normalizedProgress = progressPercent / 100; + progress.value = withTiming(normalizedProgress, { duration: 400 }); + }, []); + + const circleAnimatedProps = useAnimatedProps(() => ({ + strokeDashoffset: circumference * (1 - progress.value), + })); + + return ( + + + + + ); +}; + +export default AnimatedCircularLoaderIcon; diff --git a/src/screens/Dashboard/AnomalyTracker/AnomaliesDetailsList.tsx b/src/screens/Dashboard/AnomalyTracker/AnomaliesDetailsList.tsx index e1c33eb7..b4acd477 100644 --- a/src/screens/Dashboard/AnomalyTracker/AnomaliesDetailsList.tsx +++ b/src/screens/Dashboard/AnomalyTracker/AnomaliesDetailsList.tsx @@ -93,7 +93,6 @@ const AnomaliesDetailsList = ({ anomalyType }: IAnomaliesDetailsListProps) => { const styles = StyleSheet.create({ centerAbsolute: { - // height: '100%', marginTop: 160, justifyContent: 'center', alignItems: 'center', diff --git a/src/screens/Dashboard/AnomalyTracker/AnomalyCardHeader.tsx b/src/screens/Dashboard/AnomalyTracker/AnomalyCardHeader.tsx index 3cd80410..5e8e7d0e 100644 --- a/src/screens/Dashboard/AnomalyTracker/AnomalyCardHeader.tsx +++ b/src/screens/Dashboard/AnomalyTracker/AnomalyCardHeader.tsx @@ -1,11 +1,11 @@ import { COLORS } from '@rn-ui-lib/colors'; 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) => { +import { AnomalyCardHeaderProps } from './interfaces'; + +const AnomalyCardHeader = (props: AnomalyCardHeaderProps) => { const { item } = props; const headerColor = AnomalyCardHeaderColor[item?.priority as keyof typeof AnomalyCardHeaderColor] || @@ -26,7 +26,7 @@ const AnomalyCardHeader = (props: any) => { }, ]} > - {item?.priority} + {item?.priority} ); @@ -55,5 +55,6 @@ const styles = StyleSheet.create({ flex: 1, wordBreak: 'break-word', }, + priorityText: { fontSize: 12, color: COLORS.TEXT.WHITE }, }); export default AnomalyCardHeader; diff --git a/src/screens/Dashboard/AnomalyTracker/DaysTillEscalationComponent.tsx b/src/screens/Dashboard/AnomalyTracker/DaysTillEscalationComponent.tsx index 131aab8e..d063d3af 100644 --- a/src/screens/Dashboard/AnomalyTracker/DaysTillEscalationComponent.tsx +++ b/src/screens/Dashboard/AnomalyTracker/DaysTillEscalationComponent.tsx @@ -1,45 +1,24 @@ -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 React from 'react'; +import { View, StyleSheet } from 'react-native'; import Text from '@rn-ui-lib/components/Text'; import { COLORS } from '@rn-ui-lib/colors'; -const AnimatedCircle = Animated.createAnimatedComponent(Circle); +import AnimatedCircularLoaderIcon from '@assets/icons/AnimatedCircularLoaderIcon'; const DaysTillEscalationComponent = (props: { dayTillEscalation: number; progressPercent: number; }) => { const { dayTillEscalation, progressPercent } = props; - const progress = useSharedValue(0); - useEffect(() => { - const normalizedProgress = progressPercent / 100; - if (dayTillEscalation > 0) { - progress.value = withTiming(normalizedProgress, { duration: 400 }); - } else progress.value = withTiming(0, { duration: 0 }); - }, []); const radius = 18; const circumference = 2 * Math.PI * radius; - const circleAnimatedProps = useAnimatedProps(() => ({ - strokeDashoffset: circumference * (1 - progress.value), - })); return ( <> - - - - + 0 ? progressPercent : 0} + /> {dayTillEscalation > 0 ? ( - - {dayTillEscalation} - + {dayTillEscalation} ) : ( - 0 + 0 )} ); }; - +const styles = StyleSheet.create({ + textContainer: { fontSize: 14, color: COLORS.TEXT.YELLOW, fontWeight: '700' }, +}); export default DaysTillEscalationComponent; diff --git a/src/screens/Dashboard/AnomalyTracker/RcaEtaContainer.tsx b/src/screens/Dashboard/AnomalyTracker/RcaEtaContainer.tsx index 3967b28c..23ae3817 100644 --- a/src/screens/Dashboard/AnomalyTracker/RcaEtaContainer.tsx +++ b/src/screens/Dashboard/AnomalyTracker/RcaEtaContainer.tsx @@ -18,7 +18,6 @@ interface IRcaEtaContainerProps { const RcaEtaContainer = (props: IRcaEtaContainerProps) => { const { item, anomalyType } = props; - console.log({ item }); const [showETABottomSheet, setShowETABottomSheet] = useState(false); const [showRCABottomSheet, setShowRCABottomSheet] = useState(false); const [selectedAnomalyId, setSelectedAnomalyId] = useState(''); @@ -45,7 +44,7 @@ const RcaEtaContainer = (props: IRcaEtaContainerProps) => { }; useEffect(() => { - dispatch(getActivityLogs(selectedAnomalyId)); + if(selectedAnomalyId) dispatch(getActivityLogs(selectedAnomalyId)); }, [selectedAnomalyId]); return ( diff --git a/src/screens/Dashboard/AnomalyTracker/interfaces.ts b/src/screens/Dashboard/AnomalyTracker/interfaces.ts new file mode 100644 index 00000000..0a8916d6 --- /dev/null +++ b/src/screens/Dashboard/AnomalyTracker/interfaces.ts @@ -0,0 +1,21 @@ +export interface AnomalyItem { + escalationPercentage?: number; + daysRemaining?: number; + anomalyId?: string; + createdAt?: string; + type?: string; + subtype?: string; + priority?: string; + anomalyDetectedOn?: string; + raisedFor?: {}; + anomalyReferenceId?: string; + resolution?: {}; + estimatedTime?: {}; + rca?: {}; + resolutionTime?: string; + resolutionType?: string; +} + +export interface AnomalyCardHeaderProps { + item: AnomalyItem; +} diff --git a/src/screens/Dashboard/AnomalyTracker/utils.ts b/src/screens/Dashboard/AnomalyTracker/utils.ts index 0b6d5e2c..0fcca877 100644 --- a/src/screens/Dashboard/AnomalyTracker/utils.ts +++ b/src/screens/Dashboard/AnomalyTracker/utils.ts @@ -17,7 +17,6 @@ export const getAnomalyDetails = if (isLoading) dispatch(setAnomalyDetailsLoading(true)); axiosInstance .get(url, { - baseURL: 'https://qa-longhorn-portal.np.navi-ppl.in/api/longhorn', //TODO: remove this params: { status: anomalyType }, }) .then((res) => { @@ -41,9 +40,7 @@ export const getActivityLogs = (anomalyReferenceId: string) => (dispatch: AppDis const url = getApiUrl(ApiKeys.GET_ANOMALY_ACTIVITY_LOG, { anomalyReferenceId }); dispatch(setActivityLogsLoading(true)); axiosInstance - .get(url, { - baseURL: 'https://qa-longhorn-portal.np.navi-ppl.in/api/longhorn', //TODO: remove this - }) + .get(url) .then((response) => { if (response.status === API_STATUS_CODE.OK) { dispatch(setActivityLogs(response?.data)); diff --git a/src/screens/Dashboard/InternalAgentDashboard.tsx b/src/screens/Dashboard/InternalAgentDashboard.tsx index edc57d10..7d9bb24d 100644 --- a/src/screens/Dashboard/InternalAgentDashboard.tsx +++ b/src/screens/Dashboard/InternalAgentDashboard.tsx @@ -15,12 +15,11 @@ const InternalAgentDashboard = () => { atleastOneEmiCollected: cases?.atleastOneEmiCollected, totalEmi: cases?.totalEmi, }; - const totalOpenAnomalies = useAppSelector( - (state) => state?.anomalyTracker?.openAnomaliesList?.pages?.totalElements - ); - const totalClosedAnomalies = useAppSelector( - (state) => state?.anomalyTracker?.closedAnomaliesList?.pages?.totalElements - ); + const totalOpenAnomalies = + useAppSelector((state) => state?.anomalyTracker?.openAnomaliesList?.pages?.totalElements) || 0; + const totalClosedAnomalies = + useAppSelector((state) => state?.anomalyTracker?.closedAnomaliesList?.pages?.totalElements) || + 0; const isOpenOrClosedAnomaliesPresent = totalOpenAnomalies + totalClosedAnomalies > 0; return ( diff --git a/src/screens/Dashboard/index.tsx b/src/screens/Dashboard/index.tsx index 9e6eae1b..10c32576 100644 --- a/src/screens/Dashboard/index.tsx +++ b/src/screens/Dashboard/index.tsx @@ -32,10 +32,11 @@ const Dashboard = () => { dispatch( getPerformanceMetrics(Object.keys(caseDetailsIds ?? {}), isExternalAgent, setIsLoading) ); - if (!isExternalAgent) { - dispatch(getAnomalyDetails(AnomalyType.OPEN, {}, false)); - dispatch(getAnomalyDetails(AnomalyType.RESOLVED, {}, false)); - } + // TODO: Uncomment when api is added by backend + // if (!isExternalAgent) { + // dispatch(getAnomalyDetails(AnomalyType.OPEN, {}, false)); + // dispatch(getAnomalyDetails(AnomalyType.RESOLVED, {}, false)); + // } }; useEffect(() => {