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

feat(daily report-activity): activity page

master
farhantock 4 months ago
parent
056e6e517b
commit
e03b5bd56c
2 changed files with 246 additions and 0 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. 121
      src/screens/daily-report-page/stepComponent/informationDetail.js
  2. 125
      src/screens/daily-report-page/stepComponent/informationReport.js

121
src/screens/daily-report-page/stepComponent/informationDetail.js
Unescape View File

@ -0,0 +1,121 @@
import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react';
import { Card, Text, TouchableRipple, Button, Appbar, List } 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';
import moment from 'moment';
import 'moment/locale/id';
moment.locale('id');
import {
BottomSheetModal,
BottomSheetModalProvider,
BottomSheetView
} from '@gorhom/bottom-sheet';
export default function InformationDetailScreen({ route, navigation }) {
const bottomSheetModal = useRef(null);
const data = [
{ id: 1, position: "Manager", date: "2024-02-09", startTime: "21:03", title: "Pengecekan Kendaraan Karyawan", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt fringilla lobortis. Morbi suscipit massa mollis porttitor fringilla. Integer rutrum ipsum lorem, ut convallis nisl consequat nec. Proin vel elit vitae sapien convallis molestie. Donec id feugiat lectus. Aenean ut dui ut mi semper facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam luctus convallis tellus, quis malesuada felis viverra mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam erat volutpat. Mauris eu posuere sapien. Aliquam in nisi at tortor faucibus interdum eget non quam. Aenean non elit ut leo malesuada porttitor.", visitor: "Farhan" },
{ id: 2, position: "Manager", date: "2024-02-12", startTime: "21:03", title: "Pengecekan Bongkar Muat Barang", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt fringilla lobortis. Morbi suscipit massa mollis porttitor fringilla. Integer rutrum ipsum lorem, ut convallis nisl consequat nec. Proin vel elit vitae sapien convallis molestie. Donec id feugiat lectus. Aenean ut dui ut mi semper facilisis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam luctus convallis tellus, quis malesuada felis viverra mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam erat volutpat. Mauris eu posuere sapien. Aliquam in nisi at tortor faucibus interdum eget non quam. Aenean non elit ut leo malesuada porttitor.", visitor: "Farhan" },
];
const handleOpenSheet = useCallback(() => {
bottomSheetModal.current?.present();
}, []);
return (
<View style={styles.container}>
<StatusBar backgroundColor={colors.blue} barStyle='light-content' translucent={true} />
<Appbar.Header mode='center-aligned' style={{ backgroundColor: colors.blue, elevation: 4 }}>
<Appbar.BackAction color={colors.pureWhite} onPress={() => { navigation.goBack() }} />
<Appbar.Content titleStyle={{ fontWeight: 'bold' }} color={colors.pureWhite} title={strings('activity.activity')} />
</Appbar.Header>
<ScrollView style={{ backgroundColor: colors.pureWhite }}>
{data.map((item) => (
<Card style={styles.card}>
<Card.Cover source={{ uri: 'https://picsum.photos/700' }} style={{ height: 130 }} resizeMode='cover' />
<Card.Content style={{ marginTop: 10 }}>
<View style={styles.row}>
<Icon name="calendar" size={20} color={colors.amethystSmoke} />
<Text style={{ color: colors.amethystSmoke, fontWeight: 'bold', paddingLeft: 3 }}>
{moment(item.date).format('dddd, DD MMMM - YYYY')}
</Text>
</View>
<Text variant="titleLarge" style={{ color: colors.black, fontWeight: '695' }}>{item.title}</Text>
<Text variant="bodyMedium" style={{ color: colors.black, fontWeight: '695' }}>Deskripsi</Text>
<Text variant="bodyMedium" style={{ color: colors.amethystSmoke, textAlign: 'justify' }}>{item.description}</Text>
</Card.Content>
</Card>
))}
</ScrollView>
<BottomSheetModalProvider>
<BottomSheetModal
ref={bottomSheetModal}
index={0}
snapPoints={['25%']}
bottomInset={5}
detached={true}
style={{ marginHorizontal: 5 }}
>
<BottomSheetView>
<View style={{ justifyContent: 'center' }}>
<Text variant='titleMedium' style={[styles.boldText, { textAlign: 'center', color: colors.black }]}>{strings('activity.activity')} </Text>
</View>
<View style={styles.bottom}>
<TouchableRipple onPress={() => { navigation.navigate('DialogFormActivity') }}>
<List.Item
title="Aktivitas Statis"
description="Menjaga Pos"
left={() => <List.Icon color={colors.blue} icon="home-account" />}
/>
</TouchableRipple>
<TouchableRipple onPress={() => { navigation.navigate('DialogFormPatroli') }}>
<List.Item
title="Aktivitas Dinamis"
description="Melakukan Patroli"
left={() => <List.Icon color={colors.green} icon="walk" />}
/>
</TouchableRipple>
</View>
{/* onPress={() => { navigation.navigate('DialogFormActivity') }} */}
</BottomSheetView>
</BottomSheetModal>
</BottomSheetModalProvider>
</View >
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 20,
backgroundColor: colors.pureWhite
},
card: {
flex: 1,
marginTop: 20,
marginHorizontal: 8,
marginVertical: 5,
backgroundColor: colors.pureWhite,
},
row: {
flexDirection: 'row',
justifyContent: 'flex-start',
paddingVertical: 5,
},
bottom: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 10,
},
shift: {
backgroundColor: colors.semiBlue,
borderRadius: 10,
padding: 5,
paddingHorizontal: 10
},
})

125
src/screens/daily-report-page/stepComponent/informationReport.js
Unescape View File

@ -0,0 +1,125 @@
import { TouchableRipple, Card, Text, Avatar, Button } from 'react-native-paper';
import { View, StyleSheet, ScrollView } from 'react-native';
import React, { useState, useRef, useCallback } from 'react';
import { colors } from '../../../utils/color'
import { strings } from '../../../utils/i18n'
import Icon from 'react-native-vector-icons/AntDesign';
import moment from 'moment';
import 'moment/locale/id';
import person from '../../../assets/images/courier_man.png'
import {
BottomSheetModal,
BottomSheetModalProvider,
BottomSheetView,
} from '@gorhom/bottom-sheet';
moment.locale('id');
export default function InformationScreen({ route, navigation }) {
const bottomSheetModal = useRef(null);
const handleOpenSheet = useCallback(() => {
bottomSheetModal.current?.present();
}, []);
const dummyData = [
{ id: '1', position: "Danru", name: "farhan" },
{ id: '2', position: "Guard", name: "ibnu" },
{ id: '3', position: "Guard", name: "ardhi" },
{ id: '4', position: "Admin", name: "hana" },
{ id: '5', position: "Guard", name: "satori" },
{ id: '6', position: "Guard", name: "khaidir" },
{ id: '7', position: "Guard", name: "wahyu" },
];
return (
<>
<ScrollView style={{ flex: 1 }}>
{dummyData.map((item) => (
<TouchableRipple onPress={() => { navigation.navigate('InformationDetailScreen') }}>
<Card key={item.id} style={styles.card}>
<Card.Content>
<View style={[styles.row, { justifyContent: 'space-between' }]}>
<View style={styles.row}>
<Avatar.Image size={28} source={person} style={{ marginRight: 5 }} />
<Text style={{ color: colors.mistBlue, fontWeight: 'bold', marginLeft: 10 }}>
{item.name}
</Text>
</View>
<View style={[styles.status, { backgroundColor: colors.pureWhite }]}>
<Text style={{ color: colors.mistBlue, fontWeight: 'bold', paddingLeft: 3 }}>
{item.position}
</Text>
</View>
</View>
</Card.Content>
</Card>
</TouchableRipple>
))}
</ScrollView>
<View style={{ width: '100%', marginTop: 10, marginBottom: 5 }}>
<Button icon="check-circle" style={{ borderRadius: 10, backgroundColor: colors.semiBlue, marginHorizontal: 5, }} textColor={colors.blue} rippleColor={colors.blue} mode="contained-tonal" onPress={handleOpenSheet} >
{strings('dailyReport.approve')}
</Button>
</View>
<BottomSheetModalProvider>
<BottomSheetModal
ref={bottomSheetModal}
index={0}
snapPoints={['50%']}
bottomInset={10}
detached={true}
style={{ marginHorizontal: 5 }}
>
<BottomSheetView>
<View style={styles.cardContent}>
<View style={[styles.rowSheet, { justifyContent: 'space-between' }]}>
<Text variant='titleMedium' style={[styles.boldText, { textAlign: 'center', color: colors.black }]}>Persetujuan </Text>
</View>
<Text variant='bodyMedium' style={{ textAlign: 'center', padding: 3, color: colors.amethystSmoke }}>Apakah Data Sudah Sesuai?</Text>
<View style={[styles.rowSheet, { marginBottom: 10, marginTop: 10 }]}>
<Button mode="contained" buttonColor={colors.green} style={{ borderRadius: 10 }}>
Setuju
</Button>
<Button mode="contained" buttonColor={colors.beanRed} style={{ borderRadius: 10, marginLeft: 10 }}>
Tidak setuju
</Button>
</View>
<Button mode='outlined' textColor={colors.amethystSmoke} style={{ borderRadius: 10 }}>
Batal
</Button>
</View>
</BottomSheetView>
</BottomSheetModal>
</BottomSheetModalProvider>
</>
)
}
const styles = StyleSheet.create({
status: {
backgroundColor: colors.semiBlue,
borderRadius: 10,
padding: 5,
},
row: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 5,
},
card: {
marginHorizontal: 10,
marginVertical: 4,
elevation: 4,
backgroundColor: colors.mercury
},
cardContent: {
alignItems: 'center'
},
rowSheet: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 5,
},
});
Write Preview
Loading…
Cancel
Save