ordo
/
mobile-nawakara
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(daily report): daily report page

master
farhantock 7 months ago
parent
10e34fbd91
commit
7c1dfb8cc4
2 changed files with 225 additions and 42 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 145
      src/screens/daily-report-page/dialogform.js
  2. 116
      src/screens/daily-report-page/index.js

145
src/screens/daily-report-page/dialogform.js
Unescape View File

@ -0,0 +1,145 @@
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 Manpower from './stepComponent/manPower'
import InformationReport from './stepComponent/informationReport';
import SpesialRequest from './stepComponent/spesialRequest';
import Training from './stepComponent/training';
import Visit from './stepComponent/visit';
import PatroliDRScreen from './stepComponent/patroli'
export default function DialogForm({ route, navigation }) {
const [active, setActive] = useState(0);
const labels = ["Manpower", "Kunjungan", "Spesial Request", "Pelatihan", "Laporan Informasi", "Patroli"];
const renderStepContent = useMemo(() => {
switch (active) {
case 0:
return <Manpower navigation={navigation} />;
case 1:
return <Visit />;
case 2:
return <SpesialRequest />;
case 3:
return <Training />;
case 4:
return <InformationReport navigation={navigation} />;
case 5:
return <PatroliDRScreen navigation={navigation} />;
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.pureWhite} barStyle="dark-content" />
<Appbar.Header mode='center-aligned' style={{ backgroundColor: colors.pureWhite }}>
<Appbar.BackAction color={colors.blue} onPress={() => { navigation.goBack() }} />
<Appbar.Content titleStyle={{ fontWeight: 'bold' }} color={colors.blue} title={strings('dailyReport.add')} />
</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.blue }]} onPress={() => console.log('Handle Saved')}>
Simpan
</Button>
)
: (
<Button mode="contained" style={[styles.button, { backgroundColor: colors.blue }]} 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.blue,
stepStrokeCurrentColor: colors.blue,
stepStrokeWidth: 1,
stepStrokeFinishedColor: colors.blue,
stepStrokeUnFinishedColor: colors.semiBlue,
separatorFinishedColor: colors.blue,
separatorUnFinishedColor: colors.semiBlue,
stepIndicatorFinishedColor: colors.blue,
stepIndicatorUnFinishedColor: colors.semiBlue,
stepIndicatorCurrentColor: colors.blue,
stepIndicatorLabelFontSize: 12,
currentStepIndicatorLabelFontSize: 12,
stepIndicatorLabelCurrentColor: colors.pureWhite,
stepIndicatorLabelFinishedColor: colors.pureWhite,
stepIndicatorLabelUnFinishedColor: colors.blue,
labelColor: colors.semiBlue,
labelSize: 12,
currentStepLabelColor: colors.blue
}

116
src/screens/daily-report-page/index.js
Unescape View File

@ -1,40 +1,56 @@
import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react';
import { Icon, Card, Text, Avatar, useTheme, IconButton, Appbar, Button } from 'react-native-paper';
import { RefreshControl, StyleSheet, View, ScrollView, Image, Dimensions } from 'react-native';
import { Card, Text, Appbar, Button, TouchableRipple } from 'react-native-paper';
import { RefreshControl, StyleSheet, View, ScrollView, StatusBar } from 'react-native';
import { colors } from '../../utils/color';
import Icon from 'react-native-vector-icons/AntDesign';
import { strings } from '../../utils/i18n';
export default function DailyReportScreen({ route, navigation }) {
const incidentData = [
{ id: 1, date: "Senin, 02-05-2024 21:03", location: "Kangean Site Indonesia", company: "Kangean Energy Indonesia, BUT. Ltd.", icn: "KEI2301M", sicn: "KEI2301M" },
{ id: 2, date: "Selasa, 03-05-2024 10:15", location: "Sumatra Site Indonesia", company: "Sumatra Energy Indonesia, BUT. Ltd.", icn: "KEI2301M", sicn: "SEI2402M" },
{ id: 3, date: "Rabu, 04-05-2024 15:20", location: "Java Site Indonesia", company: "Java Energy Indonesia, BUT. Ltd.", icn: "KEI2301M", sicn: "JEI2503M" },
{ id: 4, date: "Kamis, 05-05-2024 18:30", location: "Bali Site Indonesia", company: "Bali Energy Indonesia, BUT. Ltd.", icn: "KEI2301M", sicn: "BEI2604M" },
{ id: 5, date: "Jumat, 06-05-2024 08:00", location: "Sulawesi Site Indonesia", company: "Sulawesi Energy Indonesia, BUT. Ltd.", icn: "KEI2301M", sicn: "SEI2705M" },
{ id: 5, date: "Sabtu, 07-05-2024 08:00", location: "Sulawesi Site Indonesia", company: "Sulawesi Energy Indonesia, BUT. Ltd.", icn: "KEI2301M", sicn: "SEI2705M" },
{ id: 5, date: "Minggu, 08-05-2024 08:00", location: "Sulawesi Site Indonesia", company: "Sulawesi Energy Indonesia, BUT. Ltd.", icn: "KEI2301M", sicn: "SEI2705M" }
];
return (
<View style={styles.container}>
<Appbar.Header mode='center-aligned' style={{ backgroundColor: 'white' }}>
<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="Laporan harian" />
<Appbar.Action icon='filter-plus-outline' onPress={() => { }} />
<Appbar.Action icon='plus' onPress={() => { }} />
<Appbar.Content titleStyle={{ fontWeight: 'bold' }} title={strings('dailyReport.title')} />
</Appbar.Header>
<ScrollView>
<Card style={styles.card}>
<Card.Title title="Semen lebak factory" titleVariant='titleMedium' subtitle="20-02-2024 22:20:17" subtitleStyle={{ color: 'white' }} titleStyle={{ fontWeight: 'bold', color: 'white' }} />
<Card.Content style={styles.cardContent}>
<View style={[styles.row, { justifyContent: 'space-around' }]}>
<Text variant="titleMedium" style={{ color: 'white' }} >ICN</Text>
<Text variant="titleMedium" style={{ color: 'white' }} >SICN</Text>
<View style={{ width: '100%', marginTop: 10, marginBottom: 5 }}>
<Button icon="plus" style={{ borderRadius: 10, backgroundColor: colors.semiBlue, marginHorizontal: 8, }} textColor={colors.blue} mode="contained-tonal" onPress={() => { navigation.navigate('DialogFormDailyReport') }}>
{strings('dailyReport.add')}
</Button>
</View>
<ScrollView style={{ backgroundColor: colors.pureWhite }}>
{incidentData.map((incident) => (
<TouchableRipple>
<Card key={incident.id} elevation={2} style={styles.card}>
<View style={styles.cardContent}>
<View style={styles.leftContent}>
<Icon name="calendar" size={25} color={colors.blue} />
</View>
<View style={styles.midContent}>
<Text variant="bodySmall" style={styles.subText}>{incident.date}</Text>
<Text variant="headlineMedium" style={styles.Text}>{incident.location}</Text>
<Text variant="bodySmall" style={styles.subText}>{incident.company}</Text>
<Text variant="bodySmall" style={styles.subText}>{incident.icn} - {incident.sicn}</Text>
</View>
<View style={styles.rightContent}>
<Icon name="right" size={25} color={colors.blue} />
</View>
<View style={[styles.row, { justifyContent: 'space-around' }]}>
<Text variant="bodyMedium" style={{ color: 'white' }} >TIM2301M</Text>
<Text variant="bodyMedium" style={{ color: 'white' }} >DNC200102A</Text>
</View>
</Card.Content>
<Card.Actions style={styles.cardActions}>
<Button icon="view-list" textColor='#1C1B40' buttonColor='white' mode="contained" onPress={() => console.log('Pressed')}>
Detail
</Button>
<Button icon="view-list" textColor='#1C1B40' buttonColor='white' mode="contained" onPress={() => console.log('Pressed')}>
Ubah
</Button>
<Button icon="trash-can-outline" iconColor={'white'} buttonColor='#EF6262' mode="contained" onPress={() => console.log('Pressed')}>
Hapus
</Button>
</Card.Actions>
</Card>
</TouchableRipple>
))}
</ScrollView>
</View >
)
@ -44,22 +60,44 @@ const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 20,
backgroundColor: colors.pureWhite
},
Text: {
fontSize: 16,
fontWeight: 'bold',
color: colors.blue
},
card: {
marginTop: 15,
marginHorizontal: 10,
marginVertical: 2,
backgroundColor: '#1C1B40',
flex: 1,
marginHorizontal: 8,
marginVertical: 5,
backgroundColor: colors.pureWhite,
},
cardActions: {
justifyContent: 'space-between',
backgroundColor: '#1C1B40',
borderBottomRightRadius: 20,
borderBottomLeftRadius: 20,
marginVertical: 4,
subText: {
fontSize: 12,
color: colors.blue
},
cardContent: {
paddingHorizontal: 10,
flexDirection: 'row',
justifyContent: 'space-between',
paddingVertical: 10,
},
leftContent: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-start',
marginLeft: 15
},
midContent: {
flex: 7,
justifyContent: 'flex-start',
alignItems: 'flex-start',
},
rightContent: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
marginRight: 15,
},
row: {
flexDirection: 'row',

Write Preview
Loading…
Cancel
Save