feat(daily report-manpower): manpower page

src/screens/daily-report-page/stepComponent/manPower.js

@@ -0,0 +1,180 @@
+import { TouchableRipple, Card, Text, Avatar, Button, FAB } from 'react-native-paper';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import React, { useState, useCallback, useRef } 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 ManpowerScreen({ route, navigation }) {
+    const bottomSheetModal = useRef(null);
+    const handleOpenSheet = useCallback(() => {
+        bottomSheetModal.current?.present();
+    }, []);
+    const dummyData = [
+        { id: '1', status: "Masuk", position: "Danru", name: "farhan", date: '2024-02-09', timeIn: '08:00', timeOut: '17:00', shift: "Pagi", duration: new Date(0, 0, 0, 8, 0, 0) },
+        { id: '2', status: "Sakit", position: "Guard", name: "ibnu", date: '2024-02-10', timeIn: '08:15', timeOut: '17:30', shift: "Pagi", duration: new Date(0, 0, 0, 8, 30, 0) },
+        { id: '3', status: "Izin", position: "Guard", name: "ardhi", date: '2024-02-11', timeIn: '08:10', timeOut: '17:20', shift: "Pagi", duration: new Date(0, 0, 0, 9, 0, 0) },
+        { id: '4', status: "Cuti", position: "Admin", name: "hana", date: '2024-02-12', timeIn: '08:10', timeOut: '17:20', shift: "Pagi", duration: new Date(0, 0, 0, 10, 0, 0) },
+        { id: '5', status: "Alpa", position: "Guard", name: "satori", date: '2024-02-13', timeIn: '08:10', timeOut: '17:20', shift: "Pagi", duration: new Date(0, 0, 0, 11, 0, 0) },
+        { id: '6', status: "Cuti", position: "Guard", name: "khaidir", date: '2024-02-14', timeIn: '08:10', timeOut: '17:20', shift: "Pagi", duration: new Date(0, 0, 0, 9, 30, 0) },
+        { id: '7', status: "Masuk", position: "Guard", name: "wahyu", date: '2024-02-15', timeIn: '08:10', timeOut: '17:20', shift: "Pagi", duration: new Date(0, 0, 0, 12, 0, 0) },
+    ];
+
+    const getCardColor = (status) => {
+        switch (status) {
+            case 'Sakit':
+                return colors.mistBlue;
+            case 'Alpa':
+                return colors.semiRed;
+            case 'Izin':
+                return colors.semiYellow;
+            case 'Cuti':
+                return colors.amethystSmoke;
+            default:
+                return colors.mercury;
+        }
+    };
+
+    const getTextColor = (status) => {
+        switch (status) {
+            case 'Sakit':
+                return colors.white;
+            case 'Alpa':
+                return colors.beanRed;
+            case 'Izin':
+                return colors.orange;
+            case 'Cuti':
+                return colors.white;
+            default:
+                return colors.mistBlue;
+        }
+    };
+
+    const getTextStatusColor = (status) => {
+        switch (status) {
+            case 'Sakit':
+                return colors.mistBlue;
+            case 'Alpa':
+                return colors.beanRed;
+            case 'Izin':
+                return colors.orange;
+            case 'Cuti':
+                return colors.amethystSmoke;
+            default:
+                return colors.mercury;
+        }
+    };
+
+    return (
+        <>
+            <ScrollView style={{ flex: 1 }}>
+                {dummyData.map((item) => (
+                    <Card key={item.id} style={[styles.card, { backgroundColor: getCardColor(item.status) }]}>
+                        <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: getTextColor(item.status), fontWeight: 'bold', marginLeft: 10 }}>
+                                        {item.name} -
+                                    </Text>
+                                    <Text style={{ color: getTextColor(item.status), fontWeight: 'bold', paddingLeft: 3 }}>
+                                        {item.position}
+                                    </Text>
+                                </View>
+                                <View style={[styles.status, { backgroundColor: colors.pureWhite }]}>
+                                    <Text style={{ color: getTextStatusColor(item.status), fontWeight: 'bold', paddingLeft: 3 }}>
+                                        {item.status}
+                                    </Text>
+                                </View>
+
+                            </View>
+
+                        </Card.Content>
+                    </Card>
+                ))}
+            </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>
+            <FAB
+                icon="plus"
+                style={styles.fab}
+                rippleColor={colors.blue}
+                onPress={() => { navigation.navigate('BKOScreen') }}
+            />
+            <BottomSheetModalProvider>
+                <BottomSheetModal
+                    ref={bottomSheetModal}
+                    index={0}
+                    snapPoints={['50%']}
+                    bottomInset={10}
+                    detached={true}
+                    style={{ marginHorizontal: 5 }}
+                >
+                    <BottomSheetView>
+                        <View style={styles.cardContent}>
+                            <View style={[styles.row, { 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.row, { 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({
+    fab: {
+        position: 'absolute',
+        margin: 16,
+        right: 0,
+        bottom: 5,
+        backgroundColor: colors.semiBlue,
+    },
+    status: {
+        backgroundColor: colors.semiBlue,
+        borderRadius: 10,
+        padding: 5,
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 5,
+    },
+    card: {
+        marginHorizontal: 10,
+        marginVertical: 4,
+        elevation: 4,
+    },
+    cardContent: {
+        alignItems: 'center'
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 5,
+    },
+});