ordo
/
mobile-nawakara
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat(daily report-manpower): manpower page

master
farhantock 5 months ago
parent
fdf6f5db71
commit
056e6e517b
1 changed files with 180 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 180
      src/screens/daily-report-page/stepComponent/manPower.js

180
src/screens/daily-report-page/stepComponent/manPower.js
Unescape View File

@ -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,
},
});
Write Preview
Loading…
Cancel
Save