Browse Source

feat(component): presence page

master
farhantock 6 months ago
parent
commit
bb0de38dff
  1. 143
      src/screens/presence/index.js

143
src/screens/presence/index.js

@ -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…
Cancel
Save