1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
import Moment from 'moment';
import React, {memo} from 'react';
import {Image, View} from 'react-native';
import {IMAGES} from '../../../../values/images';
import styles, {statisticsConfirmWorkdaysStyles} from '../../style';
import SelectDropdown from 'react-native-select-dropdown';
import AppText from '../../../../components/AppText';
import SelectDropdownComponent from '../../../../components/Select';
import commonStyles from '../../../../styles/commonStyles';
const chartDaysOfWeek = ['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'];
const typeChartColor = [
{color: '#7d93ff', name: 'Trên 6h'},
{color: '#9eaeff', name: '4-6h'},
{color: '#bec9ff', name: '2-4h'},
{color: '#dfe4ff', name: '0-2h'},
{color: '#f2f2f2', name: '0h'},
];
const dayOfWeek = [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday',
];
const monthsOfYear = [
{label: 'Tháng 01', value: 'Tháng 01'},
{label: 'Tháng 02', value: 'Tháng 02'},
{label: 'Tháng 03', value: 'Tháng 03'},
{label: 'Tháng 04', value: 'Tháng 04'},
{label: 'Tháng 05', value: 'Tháng 05'},
{label: 'Tháng 06', value: 'Tháng 06'},
{label: 'Tháng 07', value: 'Tháng 07'},
{label: 'Tháng 08', value: 'Tháng 08'},
{label: 'Tháng 09', value: 'Tháng 09'},
{label: 'Tháng 10', value: 'Tháng 10'},
{label: 'Tháng 11', value: 'Tháng 11'},
{label: 'Tháng 12', value: 'Tháng 12'},
];
const StatisticsConfirmWorkdays = React.memo(
({dataChart, onChangeMonthFilter, dayPress}) => {
return (
<View
style={[
statisticsConfirmWorkdaysStyles.container,
commonStyles.baseShadow,
]}>
<AppText style={[styles.title, {marginBottom: 20}]}>
Thống kê xác nhận ngày công của tôi
</AppText>
<SelectDropdownComponent
selectData={monthsOfYear}
width={130}
setValue={onChangeMonthFilter}
/>
<View style={{flexDirection: 'row', marginTop: 20}}>
<View style={styles.viewCalendar}>
<View style={styles.viewDayOfWeek}>
{chartDaysOfWeek.map((day, i) => (
<AppText key={day} style={{fontSize: 12, fontWeight: 'bold'}}>
{day}
</AppText>
))}
</View>
{dataChart?.data.length > 0 &&
dataChart?.data?.map((item, index) => {
let flag = false;
return (
<View key={index}>
{(index == 0 && (
<View
style={{
flexDirection: 'row',
}}>
{dayOfWeek.map((el, i) => {
if (flag) return true;
if (Moment(item.date).format('dddd') === el) {
flag = true;
return (
<View
key={i}
style={{
width: 30,
height: 30,
backgroundColor:
(parseInt(item.absent_hours) > 6 &&
'#7d93ff') ||
(parseInt(item.absent_hours) >= 4 &&
parseInt(item.absent_hours) <= 6 &&
'#7d93ff') ||
(parseInt(item.absent_hours) >= 2 &&
parseInt(item.absent_hours) <= 4 &&
'#7d93ff') ||
(parseInt(item.absent_hours) > 0 &&
parseInt(item.absent_hours) <= 2 &&
'#dfe4ff') ||
'#f2f2f2',
justifyContent: 'center',
alignItems: 'center',
margin: 2,
}}>
{
<AppText>{`${new Date(
item.date,
).getDate()}`}</AppText>
}
</View>
);
} else {
return (
<View
key={i}
style={{
width: 30,
height: 30,
backgroundColor: '#f2f2f2',
justifyContent: 'center',
alignItems: 'center',
margin: 2,
}}></View>
);
}
})}
</View>
)) || (
<View
style={{
width: 30,
height: 30,
backgroundColor:
(parseInt(item.absent_hours) > 6 && '#7d93ff') ||
(parseInt(item.absent_hours) >= 4 &&
parseInt(item.absent_hours) <= 6 &&
'#7d93ff') ||
(parseInt(item.absent_hours) >= 2 &&
parseInt(item.absent_hours) <= 4 &&
'#7d93ff') ||
(parseInt(item.absent_hours) > 0 &&
parseInt(item.absent_hours) <= 2 &&
'#dfe4ff') ||
'#f2f2f2',
justifyContent: 'center',
alignItems: 'center',
margin: 2,
}}>
{
<AppText>{`${new Date(
item.date,
).getDate()}`}</AppText>
}
</View>
)}
</View>
);
})}
</View>
<View style={{marginLeft: 30}}>
{typeChartColor &&
typeChartColor.map((item, i) => (
<View key={i} style={{flexDirection: 'row'}}>
<View
style={{
width: 20,
height: 20,
marginRight: 10,
marginBottom: 2,
backgroundColor: item.color,
}}
/>
<AppText style={{fontSize: 11}}>{item.name}</AppText>
</View>
))}
<View style={{marginTop: 10}}>
{dayPress && <AppText>{dayPress}</AppText>}
</View>
</View>
</View>
</View>
);
},
function areEquals(prevProps, nextProps) {
return prevProps.dataChart === nextProps.dataChart;
},
);
export default memo(StatisticsConfirmWorkdays);