farhantock
7 months ago
1 changed files with 180 additions and 0 deletions
@ -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, |
||||
}, |
||||
}); |
Loading…
Reference in new issue