Browse Source

fix(serivce): change layout view service page

master
farhantock 5 months ago
parent
commit
23e9167a79
  1. 21
      src/screens/Service.js

21
src/screens/Service.js

@ -1,5 +1,5 @@
import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react'; import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react';
import { Icon, Card, Text, Avatar, useTheme, IconButton, MD3Colors, Button } from 'react-native-paper'; import { Icon, Card, Text, Avatar, useTheme, IconButton, MD3Colors, Button, TouchableRipple } from 'react-native-paper';
import { RefreshControl, StyleSheet, View, ScrollView, Image, Dimensions } from 'react-native'; import { RefreshControl, StyleSheet, View, ScrollView, Image, Dimensions } from 'react-native';
import ilustration from '../assets/images/checked.png'; import ilustration from '../assets/images/checked.png';
import danger from '../assets/images/danger.png'; import danger from '../assets/images/danger.png';
@ -14,6 +14,7 @@ export default function ServiceScreen({ route, navigation }) {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Card elevation={4} style={{ marginHorizontal: 10, marginVertical: 6, marginTop: 10, backgroundColor: colors.beanRed }}> <Card elevation={4} style={{ marginHorizontal: 10, marginVertical: 6, marginTop: 10, backgroundColor: colors.beanRed }}>
<TouchableRipple onPress={() => { navigation.navigate('IncidentScreen') }}>
<View style={styles.cardContent}> <View style={styles.cardContent}>
<View style={styles.leftContent}> <View style={styles.leftContent}>
<Text style={[styles.Text, { color: colors.pureWhite }]}>LAPORAN KEJADIAN</Text> <Text style={[styles.Text, { color: colors.pureWhite }]}>LAPORAN KEJADIAN</Text>
@ -31,10 +32,12 @@ export default function ServiceScreen({ route, navigation }) {
/> />
</View> </View>
</View> </View>
</TouchableRipple>
</Card> </Card>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginHorizontal: 10 }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginHorizontal: 10 }}>
<Card elevation={4} style={styles.card}> <Card elevation={4} style={styles.card}>
<TouchableRipple onPress={() => { navigation.navigate('ActivityScreen') }}>
<View style={styles.cardContentIncident}> <View style={styles.cardContentIncident}>
<Image <Image
alt="Activity" alt="Activity"
@ -44,12 +47,14 @@ export default function ServiceScreen({ route, navigation }) {
/> />
<Text style={[styles.Text, { color: colors.pureWhite }]}>Laporan Kegiatan</Text> <Text style={[styles.Text, { color: colors.pureWhite }]}>Laporan Kegiatan</Text>
<Text variant="bodySmall" style={[styles.subText, { color: colors.pureWhite }]} >Wajib mengisi Kegiatan</Text> <Text variant="bodySmall" style={[styles.subText, { color: colors.pureWhite }]} >Wajib mengisi Kegiatan</Text>
<Button mode="contained" compact={true} style={{ borderRadius: 10, marginTop: 10, backgroundColor: 'white', width: '100%' }} labelStyle={{ color: colors.blue }} onPress={() => { navigation.navigate('DialogFormIncident') }}> <Button mode="contained" compact={true} style={{ borderRadius: 10, marginTop: 10, backgroundColor: 'white', width: '100%' }} labelStyle={{ color: colors.blue }} onPress={() => { navigation.navigate('ActivityScreen') }}>
ISI ISI
</Button> </Button>
</View> </View>
</TouchableRipple>
</Card > </Card >
<Card elevation={4} style={styles.card}> <Card elevation={4} style={styles.card}>
<TouchableRipple onPress={() => { navigation.navigate('DailyReportScreen') }}>
<View style={styles.cardContentIncident}> <View style={styles.cardContentIncident}>
<Image <Image
alt="ilustration" alt="ilustration"
@ -59,15 +64,17 @@ export default function ServiceScreen({ route, navigation }) {
/> />
<Text style={[styles.Text, { color: colors.pureWhite }]}>Laporan Harian</Text> <Text style={[styles.Text, { color: colors.pureWhite }]}>Laporan Harian</Text>
<Text variant="bodySmall" style={[styles.subText, { color: colors.pureWhite }]} >Wajib di isi setiap hari</Text> <Text variant="bodySmall" style={[styles.subText, { color: colors.pureWhite }]} >Wajib di isi setiap hari</Text>
<Button mode="contained" compact={true} style={{ borderRadius: 10, marginTop: 10, backgroundColor: 'white', width: '100%' }} labelStyle={{ color: colors.blue }} onPress={() => { navigation.navigate('DialogFormIncident') }}> <Button mode="contained" compact={true} style={{ borderRadius: 10, marginTop: 10, backgroundColor: 'white', width: '100%' }} labelStyle={{ color: colors.blue }} onPress={() => { navigation.navigate('DailyReportScreen') }}>
ISI ISI
</Button> </Button>
</View> </View>
</TouchableRipple>
</Card > </Card >
</View> </View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginHorizontal: 10, marginTop: 5 }}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginHorizontal: 10, marginTop: 5 }}>
<Card elevation={4} style={styles.card}> <Card elevation={4} style={styles.card}>
<TouchableRipple onPress={() => { navigation.navigate('PatroliScreen') }}>
<View style={styles.cardContentIncident}> <View style={styles.cardContentIncident}>
<Image <Image
alt="patroli" alt="patroli"
@ -81,8 +88,10 @@ export default function ServiceScreen({ route, navigation }) {
ISI ISI
</Button> </Button>
</View> </View>
</TouchableRipple>
</Card > </Card >
<Card elevation={4} style={styles.card}> <Card elevation={4} style={styles.card}>
<TouchableRipple onPress={() => { navigation.navigate('PresenceScreen') }}>
<View style={styles.cardContentIncident}> <View style={styles.cardContentIncident}>
<Image <Image
alt="calender" alt="calender"
@ -96,10 +105,12 @@ export default function ServiceScreen({ route, navigation }) {
ISI ISI
</Button> </Button>
</View> </View>
</TouchableRipple>
</Card > </Card >
</View> </View>
<Card elevation={4} style={{ marginHorizontal: 10, marginVertical: 6, backgroundColor: colors.beanRed }}> <Card elevation={4} style={{ marginHorizontal: 10, marginVertical: 6, backgroundColor: colors.beanRed }}>
<TouchableRipple onPress={() => { navigation.navigate('DialogFormIncident') }}>
<View style={styles.cardContentIncident}> <View style={styles.cardContentIncident}>
<Image <Image
alt="danger-2" alt="danger-2"
@ -113,6 +124,7 @@ export default function ServiceScreen({ route, navigation }) {
TEKAN TEKAN
</Button> </Button>
</View> </View>
</TouchableRipple>
</Card> </Card>
</View > </View >
) )
@ -121,7 +133,8 @@ export default function ServiceScreen({ route, navigation }) {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
marginTop: 30 marginTop: 30,
backgroundColor: colors.pureWhite
}, },
Text: { Text: {
fontSize: 16, fontSize: 16,

Loading…
Cancel
Save