diff options
| -rw-r--r-- | src/Result.jsx | 40 | ||||
| -rw-r--r-- | src/main.jsx | 4 |
2 files changed, 24 insertions, 20 deletions
diff --git a/src/Result.jsx b/src/Result.jsx index 0dc9b9a..3f89c90 100644 --- a/src/Result.jsx +++ b/src/Result.jsx @@ -5,22 +5,18 @@ import dayjs from "dayjs"; function Result({listEntry, baseSalary}) { const [totalOvertimePay, setTotalOvertimePay] = useState(0); - const [holidayData, setHolidayData] = useState([]); + const [holidayData, setHolidayData] = useState(null); useEffect(() => { - setTotalOvertimePay(getOvertimePayTotal(listEntry, baseSalary)); - }, [listEntry, baseSalary]); + setTotalOvertimePay(getOvertimePayTotal(listEntry, baseSalary, holidayData)); + }, [listEntry, baseSalary, holidayData]); useEffect(() => { fetchApi(dayjs().year()).then((result) => { - setHolidayData((currentData) => [...currentData, {year: dayjs().year(), data: result}]); - }); + setHolidayData(result); + }) }, []); - useEffect(() => { - console.log(holidayData); - }, [holidayData]); - if (totalOvertimePay < 0) { return ( <Container> @@ -39,10 +35,11 @@ function Result({listEntry, baseSalary}) { </Typography> <Typography>Rincian</Typography> { listEntry.map((entry) => { + const holidayName = isHoliday(entry.date, holidayData); return ( <div key={entry.id}> <Typography> - {entry.date.format('DD MMMM YYYY')}{isHoliday(entry.date) ? ` (${isHoliday(entry.date)})` : ''}: Rp<NumericFormat displayType="text" decimalScale={0} thousandSeparator={true} value={calculatePerDay(entry, baseSalary)} /> + {entry.date.format('DD MMMM YYYY')}{holidayName ? ` (${holidayName})` : ''}: Rp<NumericFormat displayType="text" decimalScale={0} thousandSeparator={true} value={calculatePerDay(entry, baseSalary)} /> </Typography> </div> ) @@ -60,8 +57,6 @@ function fetchApi(year) { } function segmentTime(duration, segments) { - // const segmentSum = segments.reduce((partialSum, a) => partialSum + a, 0); - // const segmentsFilled = [...segments, 24 - segmentSum]; const segmentedHours = []; for (const[index, segmentDuration] of segments.entries()) { @@ -82,9 +77,18 @@ function isHoliday(date, holidayData) { } else if (date.day() === 6) { return 'Sabtu'; } - - - return ''; + let holidayName = ''; + if (holidayData) { + console.log(holidayData); + holidayData.every((day) => { + if (dayjs(day['tanggal'], 'YYYY-MM-D').isSame(date, 'day')) { + holidayName = day['keterangan']; + return false; + } + return true; + }) + } + return holidayName; } function calculatePerDay(entry, baseSalary, holidayData) { @@ -104,7 +108,7 @@ function calculatePerDay(entry, baseSalary, holidayData) { ] } - const segmentPattern = isHoliday(entry.date) ? segmentMap.holidays : segmentMap.workDays; + const segmentPattern = isHoliday(entry.date, holidayData) ? segmentMap.holidays : segmentMap.workDays; const segmentedDuration = segmentTime(overtimeDuration, segmentPattern); for (let i = 0; i < segmentedDuration.length; i++) { if (segmentedDuration[i]) @@ -114,10 +118,10 @@ function calculatePerDay(entry, baseSalary, holidayData) { return multiplier * hourlyPay; } -function getOvertimePayTotal(listEntry, baseSalary) { +function getOvertimePayTotal(listEntry, baseSalary, holidayData) { let total = 0; listEntry.forEach((entry) => { - total += calculatePerDay(entry, baseSalary) + total += calculatePerDay(entry, baseSalary, holidayData) }); return total; } diff --git a/src/main.jsx b/src/main.jsx index 6552764..f923230 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -7,7 +7,7 @@ import '@fontsource/roboto/500.css'; import '@fontsource/roboto/700.css'; ReactDOM.createRoot(document.getElementById('root')).render( - <React.StrictMode> + // <React.StrictMode> <App /> - </React.StrictMode>, + // </React.StrictMode>, ) |