diff --git a/src/screens/Dashboard/AnomalyTracker/RcaEtaActionRow.tsx b/src/screens/Dashboard/AnomalyTracker/RcaEtaActionRow.tsx
new file mode 100644
index 00000000..4175f1e3
--- /dev/null
+++ b/src/screens/Dashboard/AnomalyTracker/RcaEtaActionRow.tsx
@@ -0,0 +1,47 @@
+import { COLORS } from '@rn-ui-lib/colors';
+import Text from '@rn-ui-lib/components/Text';
+import React from 'react';
+import { View, StyleSheet, Pressable } from 'react-native';
+import Chevron from '@rn-ui-lib/icons/Chevron';
+import { AnomalyType } from './constants';
+
+interface IRcaEtaActionRowProps {
+ anomalyType: string;
+ label: string;
+ onClick: () => void;
+ status: string;
+ statusColor: { color: string };
+ buttonLabel: string;
+}
+const RcaEtaActionRow = (props: IRcaEtaActionRowProps) => {
+ const { anomalyType, label, onClick, status, statusColor, buttonLabel } = props;
+ return (
+
+
+ {label}
+ {anomalyType === AnomalyType.OPEN ? {status} : null}
+
+
+ {buttonLabel}
+
+
+
+
+
+ );
+};
+const styles = StyleSheet.create({
+ row: {
+ padding: 8,
+ justifyContent: 'space-between',
+ display: 'flex',
+ flexDirection: 'row',
+ },
+ label: { display: 'flex', flexDirection: 'row', gap: 4 },
+ rightIcon: {
+ marginTop: 9,
+ },
+ buttonLabel: { color: COLORS.TEXT.BLUE, fontWeight: '600', fontSize: 13 },
+});
+
+export default RcaEtaActionRow;
diff --git a/src/screens/Dashboard/AnomalyTracker/RcaEtaContainer.tsx b/src/screens/Dashboard/AnomalyTracker/RcaEtaContainer.tsx
new file mode 100644
index 00000000..3967b28c
--- /dev/null
+++ b/src/screens/Dashboard/AnomalyTracker/RcaEtaContainer.tsx
@@ -0,0 +1,94 @@
+import { COLORS } from '@rn-ui-lib/colors';
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet } from 'react-native';
+import BottomSheetWrapper from '@common/BottomSheetWrapper';
+import { AnomalyType } from './constants';
+import { useAppDispatch } from '@hooks';
+import { getActivityLogs } from './utils';
+import dayjs from 'dayjs';
+import { BUSINESS_DATE_FORMAT } from '@rn-ui-lib/utils/dates';
+import RcaEtaActionRow from './RcaEtaActionRow';
+import BottomsheetHeader from './BottomsheetHeader';
+import ViewRcaEtaDetails from './ViewRcaEtaDetails';
+
+interface IRcaEtaContainerProps {
+ item: any;
+ anomalyType: string;
+}
+
+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('');
+ const dispatch = useAppDispatch();
+
+ const onETAClick = () => {
+ if (!(item?.estimatedTime || anomalyType === AnomalyType.RESOLVED)) return; //TODO - Redirect to fill ETA form
+ setSelectedAnomalyId(item?.anomalyReferenceId);
+ setShowETABottomSheet(true);
+ };
+ const onRCAClick = () => {
+ if (!(item?.rca || anomalyType === AnomalyType.RESOLVED)) return; //TODO - Redirect to fill ETA form
+ setSelectedAnomalyId(item?.anomalyReferenceId);
+ setShowRCABottomSheet(true);
+ };
+ const etaStatus = item?.estimatedTime
+ ? dayjs(item?.estimatedTime?.at)?.format(BUSINESS_DATE_FORMAT)
+ : 'Unfilled';
+
+ const handleClose = () => {
+ setShowRCABottomSheet(false);
+ setShowETABottomSheet(false);
+ setSelectedAnomalyId('');
+ };
+
+ useEffect(() => {
+ dispatch(getActivityLogs(selectedAnomalyId));
+ }, [selectedAnomalyId]);
+
+ return (
+
+
+
+
+ (
+
+ )}
+ allowBackdropClose={true}
+ setVisible={handleClose}
+ heightPercentage={showETABottomSheet ? 26 : 30}
+ >
+
+
+
+ );
+};
+const styles = StyleSheet.create({
+ container: {
+ borderRadius: 8,
+ backgroundColor: COLORS.BACKGROUND.LIGHT_GREY,
+ },
+ line: {
+ height: 2,
+ backgroundColor: COLORS.BORDER.PRIMARY,
+ },
+});
+export default RcaEtaContainer;