feat(component): presence page

8 months ago · bb0de38dff
1 changed files with 143 additions and 0 deletions
--- a/src/screens/presence/index.js
+++ b/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
+    },
+});