farhantock
6 months ago
1 changed files with 143 additions and 0 deletions
@ -0,0 +1,143 @@
|
||||
import { TouchableRipple, TextInput, Card, Text, Appbar } from 'react-native-paper'; |
||||
import { View, StyleSheet, ScrollView } from 'react-native'; |
||||
import React, { useState } from 'react'; |
||||
import { colors } from '../../utils/color' |
||||
import Icon from 'react-native-vector-icons/AntDesign'; |
||||
import moment from 'moment'; |
||||
import 'moment/locale/id'; |
||||
moment.locale('id'); |
||||
export default function PresenceScreen({ route, navigation }) { |
||||
|
||||
const dummyData = [ |
||||
{ 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', shift: "Pagi", duration: new Date(0, 0, 0, 8, 30, 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', shift: "Pagi", duration: new Date(0, 0, 0, 10, 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', shift: "Pagi", duration: new Date(0, 0, 0, 9, 30, 0) }, |
||||
{ id: '7', date: '2024-02-15', timeIn: '08:10', timeOut: '17:20', shift: "Pagi", duration: new Date(0, 0, 0, 12, 0, 0) }, |
||||
]; |
||||
|
||||
return ( |
||||
<> |
||||
<Appbar.Header mode='center-aligned' style={{ backgroundColor: colors.blue }}> |
||||
<Appbar.BackAction color={colors.pureWhite} onPress={() => { navigation.goBack() }} /> |
||||
<Appbar.Content color={colors.pureWhite} title='Riwayat kehadiran' /> |
||||
</Appbar.Header> |
||||
|
||||
<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> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
boldText: { |
||||
fontWeight: 'bold', |
||||
}, |
||||
container: { |
||||
flex: 1, |
||||
marginTop: 20 |
||||
}, |
||||
precenseDate: { |
||||
backgroundColor: colors.semiBlue, |
||||
borderRadius: 10, |
||||
padding: 5, |
||||
}, |
||||
header: { |
||||
flexDirection: 'row', |
||||
alignItems: 'center', |
||||
borderBottomLeftRadius: 30, |
||||
borderBottomRightRadius: 30, |
||||
paddingHorizontal: 20, |
||||
paddingVertical: 30, |
||||
}, |
||||
avatar: { |
||||
marginRight: 10, |
||||
}, |
||||
textContainer: { |
||||
marginLeft: 10, |
||||
}, |
||||
welcomeText: { |
||||
fontSize: 18, |
||||
fontWeight: 'bold', |
||||
marginBottom: 1, |
||||
}, |
||||
subWelcomeText: { |
||||
fontSize: 14, |
||||
}, |
||||
card: { |
||||
margin: 10, |
||||
alignItems: 'center' |
||||
}, |
||||
cardContent: { |
||||
alignItems: 'center' |
||||
}, |
||||
row: { |
||||
flexDirection: 'row', |
||||
alignItems: 'center', |
||||
marginBottom: 5, |
||||
}, |
||||
iconButtonContainer: { |
||||
flex: 1, |
||||
alignItems: 'center', |
||||
}, |
||||
iconButton: { |
||||
marginLeft: 10, |
||||
}, |
||||
bottomSheet: { |
||||
margin: 10, |
||||
}, |
||||
scrollView: { |
||||
paddingBottom: 20, |
||||
}, |
||||
cardPrecense: { |
||||
marginHorizontal: 10, |
||||
marginVertical: 2, |
||||
elevation: 4, |
||||
backgroundColor: colors.pureWhite |
||||
}, |
||||
}); |
Loading…
Reference in new issue