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

fix(update): view and layout

master
farhantock 8 months ago
parent
5891cc8da3
commit
08f7df535a
2 changed files with 196 additions and 201 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 238
      src/screens/Home.js
  2. 139
      src/screens/Service.js

238
src/screens/Home.js
Unescape View File

@ -1,6 +1,6 @@
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, FAB, Button, Tooltip } from 'react-native-paper'; import { Card, Text, Avatar, useTheme, IconButton, FAB, Button, Tooltip, TouchableRipple } from 'react-native-paper';
import { RefreshControl, StyleSheet, View, Alert, PermissionsAndroid, Platform, ToastAndroid } from 'react-native'; import { RefreshControl, StyleSheet, View, Alert, PermissionsAndroid, Platform, ToastAndroid, ScrollView, StatusBar } from 'react-native';
import { launchCamera } from 'react-native-image-picker'; import { launchCamera } from 'react-native-image-picker';
import { useFocusEffect } from '@react-navigation/native'; import { useFocusEffect } from '@react-navigation/native';
import ImageMarker, { Position, TextBackgroundType } from 'react-native-image-marker'; import ImageMarker, { Position, TextBackgroundType } from 'react-native-image-marker';
@ -8,26 +8,25 @@ import { useDispatch, useSelector } from 'react-redux';
import { setShipmentData } from '../appredux/actions'; import { setShipmentData } from '../appredux/actions';
import { store } from '../appredux/store'; import { store } from '../appredux/store';
import RNFS from 'react-native-fs'; import RNFS from 'react-native-fs';
import { getCoords } from '../utils/geolocation';
import { strings } from '../utils/i18n'; import { strings } from '../utils/i18n';
import moment from 'moment'; import moment from 'moment';
import 'moment/locale/id'; import 'moment/locale/id';
moment.locale('id'); moment.locale('id');
import person from '../assets/images/courier_man.png' import person from '../assets/images/courier_man.png'
import BottomSheet, { BottomSheetScrollView } from '@gorhom/bottom-sheet'; import {
BottomSheetModal,
BottomSheetModalProvider,
BottomSheetView
} from '@gorhom/bottom-sheet';
import Icon from 'react-native-vector-icons/AntDesign';
import { requestAccessStoragePermission } from '../utils/storage'; import { requestAccessStoragePermission } from '../utils/storage';
import { colors } from '../utils/color';
const HomeScreen = ({ route, navigation }) => { const HomeScreen = ({ route, navigation }) => {
const theme = useTheme(); const theme = useTheme();
const [currentTime, setCurrentTime] = useState(moment(new Date())); const [currentTime, setCurrentTime] = useState(moment(new Date()));
const [historyPresensi, setHistoryPresensi] = useState([]); const bottomSheetModal = useRef(null);
const [state, setState] = React.useState({ open: false });
const onStateChange = ({ open }) => setState({ open });
const { open } = state;
const [bottomSheetIndex, setBottomSheetIndex] = useState(0);
const [zIndex, setZIndex] = useState(1);
useFocusEffect( useFocusEffect(
useCallback(() => { useCallback(() => {
let homeTimer = setInterval(() => { let homeTimer = setInterval(() => {
@ -40,29 +39,19 @@ const HomeScreen = ({ route, navigation }) => {
); );
const dummyData = [ const dummyData = [
{ id: '1', date: '2024-02-09', timeIn: '08:00', timeOut: '17:00', duration: new Date(0, 0, 0, 8, 0, 0) }, { id: '1', date: '2024-02-09', timeIn: '08:00', timeOut: '17:00', shift: "Pagi", duration: new Date(0, 0, 0, 8, 0, 0) },
{ id: '2', date: '2024-02-10', timeIn: '08:15', timeOut: '17:30', duration: new Date(0, 0, 0, 8, 30, 0) }, { id: '2', date: '2024-02-10', timeIn: '08:15', timeOut: '17:30', shift: "Pagi", duration: new Date(0, 0, 0, 8, 30, 0) },
{ id: '3', date: '2024-02-11', timeIn: '08:10', timeOut: '17:20', duration: new Date(0, 0, 0, 9, 0, 0) }, { id: '3', date: '2024-02-11', timeIn: '08:10', timeOut: '17:20', shift: "Pagi", duration: new Date(0, 0, 0, 9, 0, 0) },
{ id: '4', date: '2024-02-12', timeIn: '08:10', timeOut: '17:20', duration: new Date(0, 0, 0, 10, 0, 0) }, { id: '4', date: '2024-02-12', timeIn: '08:10', timeOut: '17:20', shift: "Pagi", duration: new Date(0, 0, 0, 10, 0, 0) },
{ id: '5', date: '2024-02-13', timeIn: '08:10', timeOut: '17:20', duration: new Date(0, 0, 0, 11, 0, 0) }, { id: '5', date: '2024-02-13', timeIn: '08:10', timeOut: '17:20', shift: "Pagi", duration: new Date(0, 0, 0, 11, 0, 0) },
{ id: '6', date: '2024-02-14', timeIn: '08:10', timeOut: '17:20', duration: new Date(0, 0, 0, 9, 30, 0) }, { id: '6', date: '2024-02-14', timeIn: '08:10', timeOut: '17:20', shift: "Pagi", duration: new Date(0, 0, 0, 9, 30, 0) },
{ id: '7', date: '2024-02-15', timeIn: '08:10', timeOut: '17:20', duration: new Date(0, 0, 0, 12, 0, 0) }, { id: '7', date: '2024-02-15', timeIn: '08:10', timeOut: '17:20', shift: "Pagi", duration: new Date(0, 0, 0, 12, 0, 0) },
]; ];
const handlePresensiPress = useCallback(() => {
const handleSheetChanges = useCallback((index) => { bottomSheetModal.current?.present();
console.log('index', index);
if (index > 0) {
setZIndex(0)
} else {
setZIndex(1)
}
}, []); }, []);
const handlePresensiPress = () => {
setZIndex(0)
setBottomSheetIndex(1);
};
const handlePresensiConfirm = async () => { const handlePresensiConfirm = async () => {
try { try {
@ -77,15 +66,13 @@ const HomeScreen = ({ route, navigation }) => {
}, },
); );
if (granted === PermissionsAndroid.RESULTS.GRANTED) { if (granted === PermissionsAndroid.RESULTS.GRANTED) {
// console.log('You can use the camera');
handleLaunchCamera() handleLaunchCamera()
} else { } else {
// console.log('Camera permission denied');
} }
} catch (err) { } catch (err) {
console.warn(err); console.warn(err);
} }
setBottomSheetIndex(0); bottomSheetModal.current?.dismiss();
}; };
const handleLaunchCamera = () => { const handleLaunchCamera = () => {
@ -213,61 +200,14 @@ const HomeScreen = ({ route, navigation }) => {
} }
const handlePresensiCancel = () => { const handlePresensiCancel = () => {
setZIndex(1) bottomSheetModal.current?.dismiss();
setBottomSheetIndex(0);
}; };
const renderItem = ({ id, date, timeIn, timeOut, duration }) => (
<View key={id} >
<View style={[styles.row, { justifyContent: 'space-between', paddingBottom: 5, paddingLeft: 15 }]}>
<Text>{moment(date).format('dddd, DD MMMM - YYYY')}</Text>
</View>
<View style={[styles.row, { justifyContent: 'space-between', paddingRight: 30, paddingLeft: 20 }]}>
<Icon
source="login"
color={theme.colors.onPrimaryContainer}
size={20}
/>
<Text>{timeIn}</Text>
<Icon
source="arrow-right"
color={theme.colors.onPrimaryContainer}
size={20}
/>
<Text>{timeOut}</Text>
<Icon
source="timer-outline"
color={theme.colors.onPrimaryContainer}
size={20}
/>
<Text>{moment(duration).format('HH:mm')}</Text>
</View>
</View>
);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<FAB.Group <StatusBar backgroundColor={colors.blue} barStyle='ligth-content' translucent={true} />
open={open} <View style={[styles.header, { backgroundColor: colors.blue }]}>
mode='elevated'
icon={open ? 'alert' : 'plus'}
style={[styles.fab, { zIndex: zIndex }]}
backdropColor={'transparent'}
actions={[
{
icon: 'plus',
onPress: () => console.log('Daily Report'),
},
]}
onStateChange={onStateChange}
onPress={() => {
if (open) {
navigation.navigate('DialogFormIncident')
}
}}
/>
<View style={[styles.header, { backgroundColor: '#1C1B40' }]}>
<Avatar.Image style={styles.avatar} source={person} /> <Avatar.Image style={styles.avatar} source={person} />
<View style={styles.textContainer}> <View style={styles.textContainer}>
<Text style={[styles.welcomeText, { color: theme.colors.surface }]}> <Text style={[styles.welcomeText, { color: theme.colors.surface }]}>
@ -281,22 +221,23 @@ const HomeScreen = ({ route, navigation }) => {
<Card elevation={4} style={[styles.card, { backgroundColor: 'white' }]}> <Card elevation={4} style={[styles.card, { backgroundColor: 'white' }]}>
<Card.Content> <Card.Content>
<Text variant='displaySmall' style={[styles.boldText, { paddingBottom: 10, textAlign: 'center' }]}>{moment(currentTime).format('HH:mm')} </Text> <Text variant='displaySmall' style={[styles.boldText, { paddingBottom: 10, textAlign: 'center', color: colors.blue }]}>{moment(currentTime).format('HH:mm')} </Text>
<Text variant='titleSmall' style={{ paddingBottom: 10 }}>{moment(currentTime).format('dddd, DD MMMM - YYYY')} </Text> <Text variant='titleSmall' style={{ paddingBottom: 10 }}>{moment(currentTime).format('dddd, DD MMMM - YYYY')} </Text>
<View style={[styles.row, { justifyContent: 'space-between' }]}> <View style={[styles.row, { justifyContent: 'space-between' }]}>
<Text variant='titleMedium' style={[styles.boldText, { textAlign: 'center' }]}>Masuk </Text> <Text variant='titleMedium' style={[styles.boldText, { textAlign: 'center', color: colors.amethystSmoke }]}>Masuk </Text>
<Text variant='titleMedium' style={[styles.boldText, { textAlign: 'center' }]}>Keluar </Text> <Text variant='titleMedium' style={[styles.boldText, { textAlign: 'center', color: colors.amethystSmoke }]}>Keluar </Text>
</View> </View>
<View style={[styles.row, { justifyContent: 'space-between' }]}> <View style={[styles.row, { justifyContent: 'space-between' }]}>
<Text variant='bodyMedium' style={{ textAlign: 'center' }}>Jam </Text> <Text variant='bodyMedium' style={{ textAlign: 'center', color: colors.blue }}>Jam </Text>
<Text variant='bodyMedium' style={{ textAlign: 'center' }}>Jam </Text> <Text variant='bodyMedium' style={{ textAlign: 'center', color: colors.blue }}>Jam </Text>
</View> </View>
<View style={styles.row}> <View style={styles.row}>
<View style={styles.iconButtonContainer}> <View style={styles.iconButtonContainer}>
<IconButton <IconButton
containerColor={colors.blue}
mode='contained' mode='contained'
icon="fingerprint" icon="fingerprint"
iconColor={'#1C1B40'} iconColor={colors.pureWhite}
size={80} size={80}
onPress={handlePresensiPress} onPress={handlePresensiPress}
style={styles.iconButton} style={styles.iconButton}
@ -305,51 +246,89 @@ const HomeScreen = ({ route, navigation }) => {
</View> </View>
<View style={styles.row}> <View style={styles.row}>
<View style={styles.iconButtonContainer}> <View style={styles.iconButtonContainer}>
<Text variant='bodySmall'>Ketuk Untuk Presensi </Text> <Text variant='bodySmall' style={{ color: colors.amethystSmoke }}>Ketuk Untuk Presensi </Text>
</View> </View>
</View> </View>
</Card.Content> </Card.Content>
</Card> </Card>
{bottomSheetIndex === 1 && ( <View style={[styles.row, { justifyContent: 'space-between', paddingBottom: 5, paddingHorizontal: 15 }]}>
<BottomSheet <Text style={{ color: colors.black, fontWeight: 'bold' }}>Riwayat Kehadiran</Text>
index={bottomSheetIndex === 1 ? 0 : -1} <TouchableRipple onPress={() => { navigation.navigate('PresenceScreen') }}>
snapPoints={['30%']} <Text style={{ color: colors.amethystSmoke }}>Lihat Semua</Text>
style={styles.bottomSheet} </TouchableRipple>
bottomInset={20} </View>
<ScrollView style={{ flex: 1 }}>
{dummyData.map((item) => (
<Card key={item.id} style={styles.cardPrecense}>
<Card.Content>
<View style={[styles.row, { justifyContent: 'space-between' }]}>
<View style={[styles.row, styles.precenseDate]}>
<Icon name="calendar" size={20} color={colors.blue} />
<Text style={{ color: colors.blue, fontWeight: 'bold', paddingLeft: 3 }}>
{moment(item.date).format('dddd, DD MMMM - YYYY')}
</Text>
</View>
<View style={[styles.precenseDate, { backgroundColor: colors.semigreen }]}>
<Text style={{ color: colors.green, fontWeight: 'bold', paddingLeft: 3 }}>
Shift {item.shift}
</Text>
</View>
</View>
<View style={[styles.row, { justifyContent: 'space-between' }]}>
<View style={styles.row}>
<Icon name="clockcircleo" size={20} color={colors.black} />
<Text style={{ color: colors.amethystSmoke, fontWeight: 'bold', paddingLeft: 3 }}>
Durasi Kerja
</Text>
</View>
<View style={styles.row}>
<Text style={{ color: colors.amethystSmoke }}>Masuk</Text>
<Icon name="minus" size={20} color={colors.amethystSmoke} />
<Text style={{ color: colors.amethystSmoke }}>Keluar</Text>
</View>
</View>
<View style={[styles.row, { justifyContent: 'space-between' }]}>
<View style={styles.row}>
<Text style={{ color: colors.black, paddingLeft: 5 }}>{item.timeIn} Jam</Text>
</View>
<View style={styles.row}>
<Text>{item.timeIn}</Text>
<Icon name="minus" size={20} color={colors.black} />
<Text>{item.timeOut}</Text>
</View>
</View>
</Card.Content>
</Card>
))}
</ScrollView>
<BottomSheetModalProvider>
<BottomSheetModal
ref={bottomSheetModal}
index={0}
snapPoints={['25%']}
bottomInset={10}
detached={true} detached={true}
> >
<BottomSheetView >
<View style={styles.cardContent}> <View style={styles.cardContent}>
<View style={[styles.row, { justifyContent: 'space-between' }]}> <View style={[styles.row, { justifyContent: 'space-between' }]}>
<Text variant='titleMedium' style={[styles.boldText, { textAlign: 'center' }]}>Ingin presensi sekarang? </Text> <Text variant='titleMedium' style={[styles.boldText, { textAlign: 'center', color: colors.black }]}>Ingin presensi sekarang? </Text>
</View> </View>
<Text variant='bodyMedium' style={{ textAlign: 'center', padding: 3 }}>Semoga harimu menyenangkan dengan penuh produktivitas dan semangat </Text> <Text variant='bodyMedium' style={{ textAlign: 'center', padding: 3, color: colors.amethystSmoke }}>Semoga harimu menyenangkan dengan penuh produktivitas dan semangat </Text>
<Button mode="contained" buttonColor='#1C1B40' onPress={handlePresensiConfirm}> <Button mode="contained" buttonColor={colors.blue} onPress={handlePresensiConfirm} style={{ borderRadius: 15 }}>
Presensi Sekarang Presensi Sekarang
</Button> </Button>
<Button onPress={handlePresensiCancel} textColor={theme.colors.secondary}> <Button onPress={handlePresensiCancel} textColor={colors.amethystSmoke}>
Batal Batal
</Button> </Button>
</View> </View>
</BottomSheet> </BottomSheetView>
)} </BottomSheetModal>
{bottomSheetIndex === 0 && ( </BottomSheetModalProvider>
<BottomSheet </View >
index={bottomSheetIndex === 0 ? 0 : -1}
snapPoints={['10%', '25%', '50%']}
style={styles.bottomSheet}
onChange={handleSheetChanges}
>
<View>
<Text variant='titleMedium' style={[styles.boldText, { textAlign: 'center' }]}>Presensi Minggu ini</Text>
</View>
<BottomSheetScrollView contentContainerStyle={styles.scrollView}>
{dummyData.map(item => renderItem(item))}
</BottomSheetScrollView>
</BottomSheet>
)}
</View>
); );
}; };
@ -361,6 +340,11 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
marginTop: 20 marginTop: 20
}, },
precenseDate: {
backgroundColor: colors.semiBlue,
borderRadius: 10,
padding: 5,
},
header: { header: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
@ -408,15 +392,11 @@ const styles = StyleSheet.create({
scrollView: { scrollView: {
paddingBottom: 20, paddingBottom: 20,
}, },
presensiItem: { cardPrecense: {
padding: 10, marginHorizontal: 10,
borderBottomWidth: 1, marginVertical: 2,
borderBottomColor: '#ccc', elevation: 4,
}, backgroundColor: colors.pureWhite
fab: {
position: 'absolute',
bottom: 44,
}, },
}); });

139
src/screens/Service.js
Unescape View File

@ -1,105 +1,120 @@
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 } 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/check.png'; import ilustration from '../assets/images/checked.png';
import danger from '../assets/images/danger.png'; import danger from '../assets/images/danger.png';
import activity from '../assets/images/activity.png';
import danger2 from '../assets/images/danger2.png';
import patroli from '../assets/images/patroli.png';
import calender from '../assets/images/calender.png';
import { colors } from '../utils/color';
export default function ServiceScreen({ route, navigation }) { export default function ServiceScreen({ route, navigation }) {
const theme = useTheme(); const theme = useTheme();
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Card elevation={4} style={[styles.card, { marginTop: 15 }]}> <Card elevation={4} style={{ marginHorizontal: 10, marginVertical: 6, marginTop: 10, backgroundColor: colors.beanRed }}>
<View style={styles.cardContent}> <View style={styles.cardContent}>
<View style={styles.leftContent}> <View style={styles.leftContent}>
<Text style={[styles.Text, { color: theme.colors.surface }]}>LAPORAN HARIAN</Text> <Text style={[styles.Text, { color: colors.pureWhite }]}>LAPORAN KEJADIAN</Text>
<Text variant="bodySmall" style={[styles.subText, { color: theme.colors.surface }]} >laporan harian wajib di isi setiap hari</Text> <Text variant="bodySmall" style={[styles.subText, { color: colors.pureWhite }]} >Laporan kejadian wajib diisi jika ada kejadian di tempat project</Text>
<Button mode="contained" style={{ marginTop: 25, backgroundColor: 'white' }} labelStyle={{ color: '#1C1B40' }} onPress={() => { navigation.navigate('DailyReportScreen') }}> <Button mode="contained" compact={true} style={{ borderRadius: 10, marginTop: 7, backgroundColor: 'white', width: '100%' }} labelStyle={{ color: colors.beanRed }} onPress={() => { navigation.navigate('IncidentScreen') }}>
ISI LAPORAN ISI
</Button> </Button>
</View> </View>
<View style={styles.rightContent}> <View style={styles.rightContent}>
<Image <Image
alt="Ilustration" alt="danger"
source={ilustration} source={danger}
style={{ width: '100%', height: Dimensions.get('window').height / 10 }} style={{ width: '100%', height: Dimensions.get('window').height / 12 }}
resizeMode="contain" resizeMode="contain"
/> />
</View> </View>
</View> </View>
</Card> </Card>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginHorizontal: 10 }}>
<Card elevation={4} style={styles.card}> <Card elevation={4} style={styles.card}>
<View style={styles.cardContent}> <View style={styles.cardContentIncident}>
<View style={styles.leftContent}> <Image
<Text style={[styles.Text, { color: theme.colors.surface }]}>RIWAYAT KEHADIRAN</Text> alt="Activity"
<Button mode="contained" style={{ marginTop: 15, backgroundColor: 'white' }} labelStyle={{ color: '#1C1B40' }} onPress={() => { }}> source={activity}
ISI LAPORAN style={{ width: '100%', height: Dimensions.get('window').height / 15 }}
resizeMode="contain"
/>
<Text style={[styles.Text, { color: colors.pureWhite }]}>Laporan 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') }}>
ISI
</Button> </Button>
</View> </View>
<View style={[styles.rightContent, { marginTop: 5 }]}> </Card >
<Card elevation={4} style={styles.card}>
<View style={styles.cardContentIncident}>
<Image <Image
alt="Ilustration" alt="ilustration"
source={ilustration} source={ilustration}
style={{ width: '100%', height: Dimensions.get('window').height / 10 }} style={{ width: '100%', height: Dimensions.get('window').height / 15 }}
resizeMode="contain" resizeMode="contain"
/> />
<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>
<Button mode="contained" compact={true} style={{ borderRadius: 10, marginTop: 10, backgroundColor: 'white', width: '100%' }} labelStyle={{ color: colors.blue }} onPress={() => { navigation.navigate('DialogFormIncident') }}>
ISI
</Button>
</View> </View>
</Card >
</View> </View>
</Card>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginHorizontal: 10, marginTop: 5 }}>
<Card elevation={4} style={styles.card}> <Card elevation={4} style={styles.card}>
<View style={styles.cardContent}> <View style={styles.cardContentIncident}>
<View style={styles.leftContent}>
<Text style={[styles.Text, { color: theme.colors.surface }]}>DAFTAR INSIDEN</Text>
<Button mode="contained" style={{ marginTop: 15, backgroundColor: 'white' }} labelStyle={{ color: '#1C1B40' }} onPress={() => { }}>
LIHAT DAFTAR
</Button>
</View>
<View style={[styles.rightContent, { marginTop: 5 }]}>
<Image <Image
alt="Ilustration" alt="patroli"
source={ilustration} source={patroli}
style={{ width: '100%', height: Dimensions.get('window').height / 10 }} style={{ width: '100%', height: Dimensions.get('window').height / 15 }}
resizeMode="contain" resizeMode="contain"
/> />
</View> <Text style={[styles.Text, { color: colors.pureWhite }]}>Patroli</Text>
</View> <Text variant="bodySmall" style={[styles.subText, { color: colors.pureWhite }]} >Patroli setiap Pos</Text>
</Card> <Button mode="contained" compact={true} style={{ borderRadius: 10, marginTop: 10, marginBottom: 5, backgroundColor: 'white', width: '100%' }} labelStyle={{ color: colors.blue }} onPress={() => { navigation.navigate('PatroliScreen') }}>
{/* <Card elevation={4} style={styles.card}> ISI
<View style={styles.cardContent}>
<View style={styles.leftContent}>
<Text style={[styles.Text, { color: theme.colors.surface }]}>RIWAYAT KEHADIRAN</Text>
<Button mode="contained" style={{ marginTop: 25, backgroundColor: 'white' }} labelStyle={{ color: '#1C1B40' }} onPress={() => { }}>
ISI LAPORAN
</Button> </Button>
</View> </View>
<View style={styles.rightContent}> </Card >
<Card elevation={4} style={styles.card}>
<View style={styles.cardContentIncident}>
<Image <Image
alt="Ilustration" alt="calender"
source={ilustration} source={calender}
style={{ width: '100%', height: Dimensions.get('window').height / 7 }} style={{ width: '100%', height: Dimensions.get('window').height / 15 }}
resizeMode="contain" resizeMode="contain"
/> />
<Text style={[styles.Text, { color: colors.pureWhite }]}>Kehadiran</Text>
<Text variant="bodySmall" style={[styles.subText, { color: colors.pureWhite }]} >Lihat riwayat kehadiran</Text>
<Button mode="contained" compact={true} style={{ borderRadius: 10, marginTop: 10, marginBottom: 5, backgroundColor: 'white', width: '100%' }} labelStyle={{ color: colors.blue }} onPress={() => { navigation.navigate('PresenceScreen') }}>
ISI
</Button>
</View> </View>
</Card >
</View> </View>
</Card> */}
<Card elevation={4} style={styles.card}> <Card elevation={4} style={{ marginHorizontal: 10, marginVertical: 6, backgroundColor: colors.beanRed }}>
<View style={styles.cardContentIncident}> <View style={styles.cardContentIncident}>
<Image <Image
alt="Ilustration" alt="danger-2"
source={danger} source={danger2}
style={{ width: '100%', height: Dimensions.get('window').height / 10 }} style={{ width: '100%', height: Dimensions.get('window').height / 12 }}
resizeMode="contain" resizeMode="contain"
/> />
<Text style={[styles.Text, { color: theme.colors.surface }]}>LAPORAN INSIDEN</Text> <Text style={[styles.Text, { color: colors.pureWhite }]}>TOMBOL PANIK</Text>
<Text variant="bodySmall" style={[styles.subText, { color: theme.colors.surface }]} >Tekan tombol ini jika terjadi insiden</Text> <Text variant="bodySmall" style={[styles.subText, { color: colors.pureWhite }]} >Tekan tombol ini jika terjadi insiden</Text>
<Button mode="contained" style={{ marginTop: 10, marginBottom: 5, backgroundColor: 'white' }} labelStyle={{ color: '#1C1B40' }} onPress={() => { navigation.navigate('DialogFormIncident') }}> <Button mode="contained" style={{ marginTop: 10, marginBottom: 5, backgroundColor: 'white', width: '100%', borderRadius: 10 }} labelStyle={{ color: colors.beanRed }} onPress={() => { navigation.navigate('DialogFormIncident') }}>
LAPORKAN INSIDEN TEKAN
</Button> </Button>
{/* <View style={styles.leftContent}>
</View> */}
</View> </View>
</Card> </Card>
</View> </View >
) )
} }
@ -109,28 +124,28 @@ const styles = StyleSheet.create({
marginTop: 30 marginTop: 30
}, },
Text: { Text: {
fontSize: 14, fontSize: 16,
fontWeight: 'bold', fontWeight: 'bold',
}, },
subText: { subText: {
fontSize: 12, fontSize: 12,
marginTop: 10
}, },
card: { card: {
marginHorizontal: 10, flex: 1,
marginVertical: 6, marginRight: 5,
backgroundColor: '#1C1B40' backgroundColor: colors.blue,
}, },
cardContent: { cardContent: {
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
paddingVertical: 10, paddingVertical: 10,
}, },
leftContent: { leftContent: {
flex: 1, flex: 3,
justifyContent: 'flex-start', justifyContent: 'flex-start',
alignItems: 'flex-start', alignItems: 'flex-start',
marginHorizontal: 15, marginHorizontal: 10,
}, },
rightContent: { rightContent: {
flex: 1, flex: 1,

Write Preview
Loading…
Cancel
Save