fix(incident page): update form page at incident page

src/screens/incident-page/dialogForm.js

@@ -0,0 +1,144 @@
+import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react';
+import { StatusBar } from 'react-native';
+import { Button, Text, Appbar, } from 'react-native-paper';
+import { StyleSheet, View, } from 'react-native';
+import { colors } from '../../utils/color';
+import { strings } from '../../utils/i18n';
+import StepIndicator from 'react-native-step-indicator';
+import TimeComponent from './stepComponent/time'
+import LocationScreen from './stepComponent/location';
+import ReportScreen from './stepComponent/report';
+import IncidentScreen from './stepComponent/incident';
+import ChronologyScreen from './stepComponent/chronology';
+import MediaScreen from './stepComponent/media';
+
+export default function DialogForm({ route, navigation }) {
+    const [active, setActive] = useState(0);
+    const labels = ["Waktu", "Lokasi", "Pelapor", "Kejadian", "Kronologis", "Media"];
+
+    const renderStepContent = useMemo(() => {
+        switch (active) {
+            case 0:
+                return <TimeComponent />;
+            case 1:
+                return <LocationScreen />;
+            case 2:
+                return <ReportScreen />;
+            case 3:
+                return <IncidentScreen />;
+            case 4:
+                return <ChronologyScreen navigation={navigation} />;
+            case 5:
+                return <MediaScreen />;
+            default:
+                return null;
+        }
+    }, [active]);
+
+    const handleBack = () => {
+        if (active > 0) {
+            setActive(active - 1);
+        }
+    };
+
+    const handleNext = () => {
+        if (active < labels.length - 1) {
+            setActive(active + 1);
+        }
+    };
+    return (
+        <View style={styles.container}>
+            <StatusBar backgroundColor={colors.beanRed} barStyle="light-content" />
+            <Appbar.Header mode='center-aligned' style={{ backgroundColor: colors.beanRed }}>
+                <Appbar.BackAction color={colors.pureWhite} onPress={() => { navigation.goBack() }} />
+                <Appbar.Content titleStyle={{ fontWeight: 'bold' }} color={colors.pureWhite} title={strings('incidentReport.title')} />
+            </Appbar.Header>
+            <View style={{ width: '100%', marginTop: 15, marginBottom: 2, backgroundColor: colors.pureWhite }}>
+                <StepIndicator
+                    stepCount={labels.length}
+                    customStyles={stepIndicatorStyles}
+                    currentPosition={active}
+                    labels={labels}
+                    onPress={(position) => setActive(position)}
+                />
+            </View>
+            <View style={styles.contentContainer}>
+                {renderStepContent}
+            </View>
+            <View style={styles.buttonContainer}>
+                <Button mode="outlined" style={styles.button} textColor={colors.mistBlue} onPress={handleBack} disabled={active === 0}>
+                    Kembali
+                </Button>
+                {active === labels.length - 1 ?
+                    (
+                        <Button mode="contained" style={[styles.button, { backgroundColor: colors.beanRed }]} onPress={() => console.log('Handle Saved')}>
+                            Simpan
+                        </Button>
+                    )
+                    : (
+                        <Button mode="contained" style={[styles.button, { backgroundColor: colors.beanRed }]} onPress={handleNext}>
+                            Lanjut
+                        </Button>
+                    )}
+
+            </View>
+        </View >
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        marginTop: 20,
+        backgroundColor: colors.pureWhite
+    },
+    cardView: {
+        marginTop: 10,
+    },
+    card: {
+        marginTop: 10,
+        marginHorizontal: 10,
+        backgroundColor: '#1C1B40',
+    },
+    button: {
+        flex: 1,
+        margin: 5,
+        borderRadius: 5
+    },
+    contentContainer: {
+        flex: 1,
+    },
+    buttonContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        padding: 10,
+        paddingBottom: 20,
+    },
+
+})
+
+const stepIndicatorStyles = {
+
+    stepIndicatorSize: 25,
+    currentStepIndicatorSize: 30,
+    separatorStrokeWidth: 2,
+    currentStepStrokeWidth: 2,
+    stepIndicatorCurrentColor: colors.beanRed,
+    stepStrokeCurrentColor: colors.beanRed,
+    stepStrokeWidth: 1,
+    stepStrokeFinishedColor: colors.beanRed,
+    stepStrokeUnFinishedColor: colors.semiRed,
+    separatorFinishedColor: colors.beanRed,
+    separatorUnFinishedColor: colors.semiRed,
+    stepIndicatorFinishedColor: colors.beanRed,
+    stepIndicatorUnFinishedColor: colors.semiRed,
+    stepIndicatorCurrentColor: colors.beanRed,
+    stepIndicatorLabelFontSize: 12,
+    currentStepIndicatorLabelFontSize: 12,
+    stepIndicatorLabelCurrentColor: colors.pureWhite,
+    stepIndicatorLabelFinishedColor: colors.pureWhite,
+    stepIndicatorLabelUnFinishedColor: colors.beanRed,
+    labelColor: colors.semiRed,
+    labelSize: 12,
+    currentStepLabelColor: colors.beanRed
+}

src/screens/incident-page/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react';
-import { Card, Text, Avatar, useTheme, IconButton, Appbar, Button } from 'react-native-paper';
+import { Card, Text, Avatar, useTheme, IconButton, Appbar, Button, TouchableRipple } from 'react-native-paper';
 import { RefreshControl, StyleSheet, View, ScrollView, Image, Dimensions, StatusBar } from 'react-native';
 import { colors } from '../../utils/color';
 import Icon from 'react-native-vector-icons/AntDesign';
@@ -21,7 +21,7 @@ export default function IncidentScreen({ route, navigation }) {
             <StatusBar backgroundColor={colors.white} barStyle='dark-content' translucent={true} />
             <Appbar.Header mode='center-aligned' style={{ backgroundColor: colors.pureWhite, elevation: 4 }}>
                 <Appbar.BackAction onPress={() => { navigation.goBack() }} />
-                <Appbar.Content title={strings('incidentReport.title')} />
+                <Appbar.Content titleStyle={{ fontWeight: 'bold' }} title={strings('incidentReport.title')} />
             </Appbar.Header>
 
             <View style={{ width: '100%', marginTop: 10, marginBottom: 5 }}>
@@ -32,6 +32,7 @@ export default function IncidentScreen({ route, navigation }) {
 
             <ScrollView style={{ backgroundColor: colors.pureWhite }}>
                 {incidentData.map((incident) => (
+                    <TouchableRipple key={incident.id} onPress={() => { navigation.navigate('DialogFormIncident') }}>
                         <Card key={incident.id} elevation={2} style={styles.card}>
                             <View style={styles.cardContent}>
                                 <View style={styles.leftContent}>
@@ -48,6 +49,7 @@ export default function IncidentScreen({ route, navigation }) {
                                 </View>
                             </View>
                         </Card>
+                    </TouchableRipple>
                 ))}
             </ScrollView>
         </View >

src/screens/incident-page/stepComponent/chronology.js

@@ -114,8 +114,6 @@ export default function ChronologyScreen({ route, navigation }) {
         "Almost Certain": 'Sudah pasti',
     }
 
-    console.log("incidentRiskPotential", incidentRiskPotential);
-
     const renderImpact = (data) => (
         <View>
             <TouchableRipple key={dataTranslasiImpact[data.label]} onPress={() => handleSelectImpact(data)}>
@@ -287,13 +285,6 @@ export default function ChronologyScreen({ route, navigation }) {
 }
 
 const styles = StyleSheet.create({
-    containerModal: {
-        flex: 1,
-        padding: 24,
-        justifyContent: 'center',
-        backgroundColor: 'grey',
-    },
-
     contentContainer: {
         flex: 1,
         alignItems: 'center',
@@ -314,7 +305,6 @@ const styles = StyleSheet.create({
         marginVertical: 10,
         marginHorizontal: 10
     },
-
     Text: {
         fontSize: 16,
         fontWeight: 'bold',
@@ -330,7 +320,6 @@ const styles = StyleSheet.create({
         fontSize: 12,
         color: colors.blue
     },
-
     row: {
         flexDirection: 'row',
         justifyContent: 'space-between',
@@ -352,10 +341,5 @@ const styles = StyleSheet.create({
         justifyContent: 'flex-start',
         alignItems: 'flex-start',
     },
-    rightContent: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'flex-end',
-        marginRight: 15,
-    },
+
 });

src/screens/incident-page/stepComponent/containedAction.js

@@ -38,7 +38,7 @@ export default function ReportScreen({ route, navigation }) {
         <>
             <Appbar.Header mode='center-aligned' style={{ backgroundColor: colors.beanRed }}>
                 <Appbar.BackAction color={colors.pureWhite} onPress={() => { navigation.goBack() }} />
-                <Appbar.Content color={colors.pureWhite} title='Rencana pencegahan' />
+                <Appbar.Content titleStyle={{ fontWeight: 'bold' }} color={colors.pureWhite} title='Rencana pencegahan' />
             </Appbar.Header>
             <View style={styles.container}>
                 <ScrollView>

src/screens/incident-page/stepComponent/location.js

@@ -18,7 +18,6 @@ export default function LocationScreen() {
             ...prevState,
             [name]: !prevState[name]
         }));
-        setBottomSheetIndex(0);
     };
     console.log("Area :", area);
     const handleProjectSelect = (project) => {
@@ -113,9 +112,11 @@ export default function LocationScreen() {
                             uncheckedColor={colors.amethystSmoke}
                             onPress={() => handleCheckboxArea({ name: 'internal', checked: !area.internal })}
                         />
+                        <TouchableRipple rippleColor={colors.pureWhite} onPress={() => handleCheckboxArea({ name: 'internal', checked: !area.internal })}>
                             <Text variant="bodySmall" style={{ color: colors.black, fontSize: 14, marginBottom: 6, marginTop: 10 }}>
                                 Internal (Didalam area/kawasan/parimeter Project)
                             </Text>
+                        </TouchableRipple>
                     </View>
                     <View style={styles.row}>
                         <Checkbox
@@ -124,9 +125,11 @@ export default function LocationScreen() {
                             uncheckedColor={colors.amethystSmoke}
                             onPress={() => handleCheckboxArea({ name: 'external', checked: !area.external })}
                         />
+                        <TouchableRipple rippleColor={colors.pureWhite} onPress={() => handleCheckboxArea({ name: 'external', checked: !area.internal })}>
                             <Text variant="bodySmall" style={{ color: colors.black, fontSize: 14, marginBottom: 6, marginTop: 10 }}>
                                 External (Diluar area/kawasan/parimeter Project)
                             </Text>
+                        </TouchableRipple>
                     </View>
 
                     <Text variant="bodySmall" style={{ color: colors.black, fontSize: 16, marginBottom: 6, marginTop: 10 }}>

src/screens/incident-page/stepComponent/media.js

@@ -135,7 +135,7 @@ export default function MediaScreen() {
 
     const saveToTemporaryFolder = async (markedImage, imageObject) => {
         try {
-            const tempPath = `file://${RNFS.TemporaryDirectoryPath}/presensi/${imageObject.drop_point_id}_${moment().format('YYYYMMDDHHmmss')}.jpg`;
+            const tempPath = `file://${RNFS.TemporaryDirectoryPath}/presensi/${moment().format('YYYYMMDDHHmmss')}.jpg`;
 
             if (!requestAccessStoragePermission()) {
                 return;
@@ -172,7 +172,7 @@ export default function MediaScreen() {
                 <Image
                     source={{ uri: image.uri }}
                     style={styles.image}
-                    resizeMode="contain"
+                    resizeMode="cover"
                 />
                 <IconButton
                     iconColor={colors.beanRed}
@@ -203,7 +203,7 @@ export default function MediaScreen() {
     return (
         <>
             <Button
-                icon="plus"
+                icon="camera-plus"
                 style={styles.addButton}
                 mode="contained-tonal"
                 onPress={handleOpenSheet}
@@ -259,7 +259,6 @@ const styles = StyleSheet.create({
     imageContainer: {
         flexDirection: 'column',
         alignItems: 'center',
-        marginHorizontal: 5
     },
     image: {
         width: 100,
@@ -267,8 +266,7 @@ const styles = StyleSheet.create({
         borderRadius: 7
     },
     descriptionInput: {
-        flex: 1,
-        marginRight: 10,
+        flex: 1
     },
     addButton: {
         marginHorizontal: 8,

src/screens/incident-page/stepComponent/time.js

@@ -116,7 +116,7 @@ export default function TimeScreen() {
                         outlineColor={colors.amethystSmoke}
                         activeOutlineColor={colors.blue}
                         mode="outlined"
-                        label="  Waktu Laporan"
+                        label="Waktu Laporan"
                         value={reportTime ? moment(reportTime).format("HH:m") : ''}
                         editable={false}
                         right={<TextInput.Icon icon="clock-time-eight-outline" onPress={showReportTimePickerFunc} />}