feat(daily report-patroli): patroli page

7 months ago · 06adc539c3
1 changed files with 108 additions and 0 deletions
--- a/src/screens/daily-report-page/stepComponent/patroli.js
+++ b/src/screens/daily-report-page/stepComponent/patroli.js
@ -0,0 +1,108 @@
+import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react';
+import { Card, Text, Avatar, useTheme, IconButton, Appbar, Button, TouchableRipple } 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 {
+    BottomSheetModal,
+    BottomSheetModalProvider,
+    BottomSheetView,
+} from '@gorhom/bottom-sheet';
+export default function PatroliDRScreen({ route, navigation }) {
+
+    const bottomSheetModal = useRef(null);
+    const handleOpenSheet = useCallback(() => {
+        bottomSheetModal.current?.present();
+    }, []);
+    const data = [
+        { id: 1, date: "Senin, 02-05-2024", startTime: "21:03", endTime: "21:03", title: "Patroli Area 1", description: "Melakukan Patroli pada Area 1", },
+        { id: 2, date: "Selasa, 03-05-2024", startTime: "10:15", endTime: "10:15", title: "Patroli Area 2", description: "Melakukan Patroli pada Area 2", },
+        { id: 3, date: "Rabu, 04-05-2024", startTime: "15:20", endTime: "15:20", title: "Patroli Area 3", description: "Melakukan Patroli pada Area 3", },
+        { id: 4, date: "Kamis, 05-05-2024", startTime: "18:30", endTime: "18:30", title: "Patroli Area 4", description: "Melakukan Patroli pada Area 4", },
+        { id: 5, date: "Jumat, 06-05-2024", startTime: "08:00", endTime: "08:00", title: "Patroli Area 5", description: "Melakukan Patroli pada Area 5", },
+        { id: 5, date: "Sabtu, 07-05-2024", startTime: "08:00", endTime: "08:00", title: "Patroli Area 6", description: "Melakukan Patroli pada Area 6", },
+        { id: 5, date: "Minggu, 08-05-2024", startTime: "08:00", endTime: "08:00", title: "Patroli Area 7", description: "Melakukan Patroli pada Area 7", }
+    ];
+    return (
+        <View style={styles.container}>
+            <ScrollView style={{ backgroundColor: colors.pureWhite }}>
+                {data.map((item) => (
+                    <Card style={styles.card}>
+                        <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
+                        <Card.Content style={{ marginTop: 10 }}>
+                            <Text variant="bodyMedium" style={{ color: colors.amethystSmoke }}>{item.date} {item.startTime} - {item.endTime}</Text>
+                            <Text variant="titleLarge" style={{ color: colors.black }}>{item.title}</Text>
+                            <Text variant="bodyMedium" style={{ color: colors.amethystSmoke }}>{item.description}</Text>
+                        </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>
+            <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>
+        </View >
+
+
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        marginTop: 20,
+        backgroundColor: colors.pureWhite
+    },
+    Text: {
+        fontSize: 16,
+        fontWeight: 'bold',
+        color: colors.blue
+    },
+    card: {
+        flex: 1,
+        marginHorizontal: 8,
+        marginVertical: 5,
+        backgroundColor: colors.pureWhite,
+    },
+    cardContent: {
+        alignItems: 'center'
+    },
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 5,
+    },
+
+})