From 2716cd4702f37e62a2b35cbf5f9e57e03915ef23 Mon Sep 17 00:00:00 2001
From: farhantock <achmadfarhanmushafa@gmail.com>
Date: Thu, 6 Jun 2024 12:50:08 +0700
Subject: [PATCH] feat(daily report-spesialRequest): spesialRequest page

---
 .../stepComponent/spesialRequest.js           | 119 ++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 src/screens/daily-report-page/stepComponent/spesialRequest.js

diff --git a/src/screens/daily-report-page/stepComponent/spesialRequest.js b/src/screens/daily-report-page/stepComponent/spesialRequest.js
new file mode 100644
index 0000000..2a75b6a
--- /dev/null
+++ b/src/screens/daily-report-page/stepComponent/spesialRequest.js
@@ -0,0 +1,119 @@
+import React, { useEffect, useCallback, useMemo, useState, useRef } from 'react';
+import { Card, Text, Icon, Button } from 'react-native-paper';
+import { RefreshControl, StyleSheet, View, ScrollView, StatusBar } from 'react-native';
+import { colors } from '../../../utils/color';
+import { strings } from '../../../utils/i18n';
+import {
+    BottomSheetModal,
+    BottomSheetModalProvider,
+    BottomSheetView,
+} from '@gorhom/bottom-sheet';
+
+export default function SpesialRequestScreen({ route, navigation }) {
+    const bottomSheetModal = useRef(null);
+    const handleOpenSheet = useCallback(() => {
+        bottomSheetModal.current?.present();
+    }, []);
+    const data = [
+        { id: 1, type: "Provisional Sum", position: "Manager", date: "Senin, 02-05-2024", startTime: "21:03", title: "Pengawalan", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt fringilla lobortis. 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: "Farhan" },
+        { id: 2, type: "Komplemen", 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: "Tambahan", 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 (
+        <>
+            <ScrollView style={{ backgroundColor: colors.pureWhite }}>
+                {data.map((item) => (
+                    <Card style={styles.card}>
+                        <Card.Cover source={{ uri: 'https://picsum.photos/700' }} style={{ height: 130 }} resizeMode='cover' />
+                        <Card.Content style={{ marginTop: 10 }}>
+                            <Text variant="titleLarge" style={{ color: colors.black, fontWeight: '695' }}>{item.title}</Text>
+                            <View style={styles.row}>
+                                <Text variant="bodyMedium" style={{ color: colors.black, fontWeight: '695' }}>Tanggal</Text>
+                                <Text variant="bodyMedium" style={{ color: colors.amethystSmoke }}>{item.date}</Text>
+                            </View>
+                            <View style={styles.row}>
+                                <Text variant="bodyMedium" style={{ color: colors.black, fontWeight: '695' }}>Waktu</Text>
+                                <Text variant="bodyMedium" style={{ color: colors.amethystSmoke }}>{item.startTime}</Text>
+                            </View>
+                            <View style={styles.row}>
+                                <View style={{ backgroundColor: colors.semiBlue, borderRadius: 10, flexDirection: 'row', paddingHorizontal: 10, paddingVertical: 5 }}>
+                                    <Icon
+                                        source="check-circle"
+                                        size={20}
+                                        color={colors.blue}
+                                    />
+                                    <Text variant="bodyMedium" style={{ color: colors.blue, textAlign: 'justify', paddingLeft: 5 }}>{item.type}</Text>
+                                </View>
+
+                            </View>
+                            <View style={styles.row}>
+                                <Text variant="bodyMedium" style={{ color: colors.black, fontWeight: '695' }}>Deskripsi</Text>
+                            </View>
+                            <View style={styles.row}>
+                                <Text variant="bodyMedium" style={{ color: colors.amethystSmoke, textAlign: 'justify' }}>{item.description}</Text>
+                            </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>
+
+            <BottomSheetModalProvider>
+                <BottomSheetModal
+                    ref={bottomSheetModal}
+                    index={0}
+                    snapPoints={['50%']}
+                    bottomInset={10}
+                    detached={true}
+                    style={{ marginHorizontal: 5 }}
+                >
+                    <BottomSheetView>
+                        <View style={styles.cardContent}>
+                            <View style={[styles.rowSheet, { 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.rowSheet, { 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({
+    card: {
+        flex: 1,
+        marginHorizontal: 8,
+        marginVertical: 5,
+        backgroundColor: colors.pureWhite,
+    },
+    row: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingVertical: 5,
+    },
+    cardContent: {
+        alignItems: 'center'
+    },
+    rowSheet: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 5,
+    },
+})
\ No newline at end of file