feat(project asset - post): post page

src/screens/activity/projectAset/post/index.js

@@ -0,0 +1,68 @@
+import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react';
+import { Card, Text, TouchableRipple, Button, Appbar } 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';
+export default function PPEScreen({ route, navigation }) {
+    const data = [
+        { id: 1, type: "Gada Pratama", position: "Manager", date: "Senin, 02-05-2024", startTime: "21:03", title: "Pengawalan", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non elit ut leo malesuada porttitor.", visitor: "Farhan" },
+        { id: 2, type: "Gada Utama", position: "Danru", date: "Selasa, 03-05-2024", startTime: "10:15", title: "Investigasi", description: "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: "Ibnu" },
+        { id: 3, type: "Latihan Tongkat", position: "BKO Kepolisian", date: "Rabu, 04-05-2024", startTime: "15:20", title: "Sidang Pengadilan", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non elit ut leo malesuada porttitor.", visitor: "Khaidir" },
+    ];
+    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.ppe')} />
+            </Appbar.Header>
+            <View style={{ width: '100%', marginTop: 10, marginBottom: 5 }}>
+                <Button icon="plus" style={{ borderRadius: 10, backgroundColor: colors.semiBlue, marginHorizontal: 5, }} textColor={colors.blue} mode="contained-tonal" onPress={() => { navigation.navigate('DialogFormPPE') }}>
+                    {strings('activity.addPpe')}
+                </Button>
+            </View>
+            <ScrollView style={{ backgroundColor: colors.pureWhite }}>
+                {data.map((item) => (
+                    <TouchableRipple onPress={() => { navigation.navigate('DialogFormPPE') }}>
+
+                        <Card style={styles.card}>
+                            <Card.Cover source={{ uri: 'https://picsum.photos/700' }} style={{ height: 130 }} resizeMode='cover' />
+                            <Card.Content style={{ marginTop: 10 }}>
+                                <Text variant="bodyMedium" style={{ color: colors.amethystSmoke }}>{item.date}</Text>
+                                <Text variant="titleLarge" style={{ color: colors.black, fontWeight: '695' }}>{strings('activity.ppe')}</Text>
+                            </Card.Content>
+                        </Card>
+                    </TouchableRipple>
+                ))}
+            </ScrollView>
+        </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: 'space-between',
+        paddingVertical: 5,
+    },
+    shift: {
+        backgroundColor: colors.semiBlue,
+        borderRadius: 10,
+        padding: 5,
+        paddingHorizontal: 10
+    },
+})