diff --git a/src/screens/Dashboard/AnomalyTracker/AnomlayTracker.tsx b/src/screens/Dashboard/AnomalyTracker/AnomlayTracker.tsx index e56070cb..8340986f 100644 --- a/src/screens/Dashboard/AnomalyTracker/AnomlayTracker.tsx +++ b/src/screens/Dashboard/AnomalyTracker/AnomlayTracker.tsx @@ -13,9 +13,11 @@ interface IAnomalyTracker {} const AnomalyTracker: React.FC = (props: IAnomalyTracker) => { const [currentTab, setCurrentTab] = useState(AnomalyType.OPEN); const dispatch = useAppDispatch(); + useEffect(() => { dispatch(getAnomalyDetails(AnomalyType.OPEN, {}, true)); - }); + }, []); + const handleTabChange = (tab: string) => { if (tab === currentTab) return; if (tab === AnomalyType.OPEN) { diff --git a/src/screens/Dashboard/AnomalyTracker/BottomsheetHeader.tsx b/src/screens/Dashboard/AnomalyTracker/BottomsheetHeader.tsx new file mode 100644 index 00000000..969a5756 --- /dev/null +++ b/src/screens/Dashboard/AnomalyTracker/BottomsheetHeader.tsx @@ -0,0 +1,51 @@ +import { COLORS } from '@rn-ui-lib/colors'; +import { GenericStyles } from '@rn-ui-lib/styles'; +import React from 'react'; +import { View, StyleSheet, Pressable } from 'react-native'; +import Heading from '@rn-ui-lib/components/Heading'; +import CloseIcon from '@rn-ui-lib/icons/CloseIcon'; +import UpdateIcon from '@assets/icons/UpdateIcon'; + +interface IBottomsheetHeaderProps { + title: string; + handleClose: () => void; +} +const BottomsheetHeader = (props: IBottomsheetHeaderProps) => { + const { title, handleClose } = props; + return ( + + + + View {title} + + {}} //TODO - Redirect toRCA ETA form + style={[styles.title, styles.gap4]} + > + + + Update + + + + + + + + ); +}; +const styles = StyleSheet.create({ + title: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, + gap4: { gap: 4 }, + gap8: { gap: 8 }, + buttonLabel: { color: COLORS.TEXT.BLUE, fontWeight: '600', fontSize: 13 }, +}); + +export default BottomsheetHeader; diff --git a/src/screens/Dashboard/AnomalyTracker/RcaEtaQuestionRenderer.tsx b/src/screens/Dashboard/AnomalyTracker/RcaEtaQuestionRenderer.tsx new file mode 100644 index 00000000..425c6a49 --- /dev/null +++ b/src/screens/Dashboard/AnomalyTracker/RcaEtaQuestionRenderer.tsx @@ -0,0 +1,33 @@ +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 RcaEtaQuestionRenderer = (props: { questionText: string; answerText: string }) => { + const { questionText, answerText } = props; + return ( + + {questionText} + + {answerText ? answerText : '--'} + + + ); +}; +const styles = StyleSheet.create({ + container: { + marginBottom: 10, + flexDirection: 'row', + }, + questionText: { + color: COLORS.TEXT.BLACK, + fontSize: 12, + width: 100, + }, + answerText: { + fontSize: 14, + flex: 1, + wordBreak: 'break-word', + wordWrap: 'break-word', + }, +}); +export default RcaEtaQuestionRenderer; diff --git a/src/screens/Dashboard/AnomalyTracker/ViewRcaEtaDetails.tsx b/src/screens/Dashboard/AnomalyTracker/ViewRcaEtaDetails.tsx new file mode 100644 index 00000000..22dc3135 --- /dev/null +++ b/src/screens/Dashboard/AnomalyTracker/ViewRcaEtaDetails.tsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { View, StyleSheet } from 'react-native'; +import RcaEtaQuestionRenderer from './RcaEtaQuestionRenderer'; +import dayjs from 'dayjs'; +import { BUSINESS_DATE_FORMAT } from '@rn-ui-lib/utils/dates'; +import { useAppSelector } from '@hooks'; +import { GenericStyles } from '@rn-ui-lib/styles'; +import { DATE_TIME_FORMAT, RCA_ETA_FORM_QUESTIONS } from './constants'; + +const ViewRcaEtaDetails = (props: { showETABottomSheet: boolean }) => { + const { showETABottomSheet } = props; + const anomalyDetails = useAppSelector((state) => state?.anomalyTracker?.anomalyDetails?.data); + const { estimatedTime } = anomalyDetails || {}; + const rcaDetails = useAppSelector((state) => state?.anomalyTracker?.acitvityLogs?.data); //To do same for eta after backend changes + const { details, type } = rcaDetails?.[0] || {}; + + if (showETABottomSheet) + return ( + + + + + + ); + + return ( + + + + + + + ); +}; +const styles = StyleSheet.create({ + mv24: { paddingVertical: 24 }, +}); + +export default ViewRcaEtaDetails; diff --git a/src/screens/Dashboard/AnomalyTracker/constants.ts b/src/screens/Dashboard/AnomalyTracker/constants.ts index 7f3ebdff..494be756 100644 --- a/src/screens/Dashboard/AnomalyTracker/constants.ts +++ b/src/screens/Dashboard/AnomalyTracker/constants.ts @@ -29,3 +29,14 @@ export const AnomalyCardHeaderColor = { P1: COLORS.BACKGROUND.ORANGE, P2: COLORS.BACKGROUND.YELLOW_LIGHT, }; + +export const DATE_TIME_FORMAT = 'D MMM, YYYY | h:mm A'; + +export const RCA_ETA_FORM_QUESTIONS = { + FILLED_BY: 'Filled by', + DATE_TIME: 'Date & Time', + TYPE: 'Type', + COMMENTS: 'Comments', + DATE: 'Date', + REASON: 'Reason', +};