1 files changed, 22 insertions, 2 deletions
diff --git a/src/App.jsx b/src/App.jsx
index da2bbc7..8a487e0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,9 +4,11 @@ import Entry from "./Entry.jsx";
 import {Button, Container, Typography} from "@mui/material";
 import dayjs from "dayjs";
 import SalaryInput from "./SalaryInput.jsx";
+import Result from "./Result.jsx";
 
 
 function App() {
+    const [baseSalary, setBaseSalary] = useState(0);
     const [listEntry, setListEntry] = useState(
         [
             {id: 0, date: dayjs(), start: dayjs(), finish: dayjs()},
@@ -24,6 +26,20 @@ function App() {
         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,
@@ -43,19 +59,22 @@ function App() {
     return (
         <Container>
             <Typography variant='h3' align='center'>Overtime Calculator</Typography>
-            <Typography variant='overline' display='block' align='center'>🤑🤑 Sudahkah anda lembur hari ini? 🤑🤑</Typography>
+            <Typography variant='overline' display='block' align='center'>🤑🤑 Sudahkah anda lembur hari ini?
+                🤑🤑</Typography>
             <ul>
                 <li style={{listStyle: 'none', margin: '20px 0'}}>
-                    <SalaryInput/>
+                    <SalaryInput handleBaseSalaryChange={handleBaseSalaryChange}/>
                 </li>
                 {listEntry.map((entry) => {
                     return (
                         <div key={entry.id} style={{display: 'flex', gap: '10px', marginBottom: '10px'}}>
                             <li style={{listStyle: 'none'}} key={entry.id}>
                                 <Entry
+                                    propId={entry.id}
                                     propDate={entry.date}
                                     propStart={entry.start}
                                     propFinish={entry.finish}
+                                    handleEntryChange={handleEntryChange}
                                 />
                             </li>
                             <Button
@@ -75,6 +94,7 @@ function App() {
                     )
                 })}
             </ul>
+            <Result listEntry={listEntry} baseSalary={baseSalary}/>
         </Container>
     )
 }