1 files changed, 82 insertions, 0 deletions
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..da2bbc7
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,82 @@
+import {useEffect, useState} from "react";
+import Entry from "./Entry.jsx";
+
+import {Button, Container, Typography} from "@mui/material";
+import dayjs from "dayjs";
+import SalaryInput from "./SalaryInput.jsx";
+
+
+function App() {
+    const [listEntry, setListEntry] = useState(
+        [
+            {id: 0, date: dayjs(), start: dayjs(), finish: dayjs()},
+        ]
+    );
+    const [removeDisabled, setRemoveDisabled] = useState(false);
+    // const [lastId, setLastId] = useState(0);
+
+    useEffect(() => {
+        setRemoveDisabled(listEntry.length === 1);
+    }, [listEntry]);
+
+    const getLastId = () => {
+        const lastEntry = listEntry[listEntry.length - 1];
+        return lastEntry.id;
+    }
+
+    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);
+        });
+    }
+
+    return (
+        <Container>
+            <Typography variant='h3' align='center'>Overtime Calculator</Typography>
+            <Typography variant='overline' display='block' align='center'>🤑🤑 Sudahkah anda lembur hari ini? 🤑🤑</Typography>
+            <ul>
+                <li style={{listStyle: 'none', margin: '20px 0'}}>
+                    <SalaryInput/>
+                </li>
+                {listEntry.map((entry) => {
+                    return (
+                        <div key={entry.id} style={{display: 'flex', gap: '10px', marginBottom: '10px'}}>
+                            <li style={{listStyle: 'none'}} key={entry.id}>
+                                <Entry
+                                    propDate={entry.date}
+                                    propStart={entry.start}
+                                    propFinish={entry.finish}
+                                />
+                            </li>
+                            <Button
+                                disabled={removeDisabled}
+                                variant="outlined"
+                                onClick={() => removeFromList(entry.id)}
+                            >Hapus</Button>
+                            {
+                                entry.id === getLastId() ?
+                                    <Button
+                                        variant="outlined"
+                                        onClick={addToList}
+                                    >Tambah</Button>
+                                    : null
+                            }
+                        </div>
+                    )
+                })}
+            </ul>
+        </Container>
+    )
+}
+
+export default App