import {useEffect, useState} from "react"; import Entry from "./Entry.jsx"; import {AppBar, Button, Container, Grid, Paper, Typography} from "@mui/material"; import dayjs from "dayjs"; import SalaryInput from "./SalaryInput.jsx"; import Result from "./Result.jsx"; import RemoveCircleIcon from '@mui/icons-material/RemoveCircle'; import AddCircleIcon from '@mui/icons-material/AddCircle'; import Icon from '@mdi/react'; import { mdiGitlab } from '@mdi/js'; function App() { const [baseSalary, setBaseSalary] = useState(0); const [listEntry, setListEntry] = useState( [ {id: 0, date: dayjs(), start: dayjs().set('hour', 17).set('minute', 30), finish: dayjs().set('hour', 18).set('minute', 30)}, ] ); const [removeDisabled, setRemoveDisabled] = useState(false); useEffect(() => { setRemoveDisabled(listEntry.length === 1); }, [listEntry]); const getLastId = () => { const lastEntry = listEntry[listEntry.length - 1]; return lastEntry.id; } const handleEntryChange = (entry, updatedAttr) => { const updatedEntryList = listEntry.map((entryOnList) => { if (entryOnList.id === entry.id) { return {...entryOnList, [updatedAttr]: entry[updatedAttr]} } return entryOnList; }); setListEntry(updatedEntryList); } const handleBaseSalaryChange = (baseSalaryInput) => { setBaseSalary(baseSalaryInput); } const addToList = () => { const newEntry = { id: getLastId() + 1, date: dayjs(), start: dayjs(), finish: dayjs() } setListEntry((currentList) => [...currentList, newEntry]); } const removeFromList = (id) => { setListEntry((currentList) => { return currentList.filter((en) => en.id !== id); }); } // raimu kurang gawean return ( <> Overtime Calculator 🤑🤑 Sudahkah anda lembur hari ini? 🤑🤑
  • Disclaimer: keakuratan tidak terjamin
  • Sudah termasuk perhitungan lembur akhir pekan
  • Belum termasuk libur nasional (todo)
  • Belum termasuk versi 6 hari kerja (todo)
  • UI belum responsive (todo)
) } export default App