From 68e1341f42d1a35340151f62b80ee7fa41ccd58a Mon Sep 17 00:00:00 2001
From: Rosyid Haryadi <rosyid_haryadi@protonmail.com>
Date: Sat, 30 Sep 2023 23:07:54 +0700
Subject: styling

---
 package-lock.json |  26 ++++++++++++
 package.json      |   1 +
 src/App.jsx       | 119 +++++++++++++++++++++++++++++++++++++-----------------
 src/Result.jsx    |   2 +-
 4 files changed, 109 insertions(+), 39 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fc66265..f745901 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
         "@fontsource/roboto": "^5.0.8",
+        "@mui/icons-material": "^5.14.11",
         "@mui/material": "^5.14.11",
         "@mui/x-date-pickers": "^6.16.0",
         "dayjs": "^1.11.10",
@@ -1115,6 +1116,31 @@
         "url": "https://opencollective.com/mui"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.14.11",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.11.tgz",
+      "integrity": "sha512-aHReLasBuS/+hhPzbZCgZ0eTcZ2QRnoC2WNK7XvdAf3l+LjC1flzjh6GWw1tZJ5NHnZ+bivdwtLFQ8XTR96JkA==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.15"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.14.11",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.11.tgz",
diff --git a/package.json b/package.json
index 46fd69a..a6425d8 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.8",
+    "@mui/icons-material": "^5.14.11",
     "@mui/material": "^5.14.11",
     "@mui/x-date-pickers": "^6.16.0",
     "dayjs": "^1.11.10",
diff --git a/src/App.jsx b/src/App.jsx
index 705587c..7fb1a6b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,10 +1,12 @@
 import {useEffect, useState} from "react";
 import Entry from "./Entry.jsx";
 
-import {Button, Container, Typography} from "@mui/material";
+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';
 
 
 function App() {
@@ -55,46 +57,87 @@ function App() {
         });
     }
 
+    // raimu kurang gawean
     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 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
-                                disabled={removeDisabled}
-                                variant="outlined"
-                                onClick={() => removeFromList(entry.id)}
-                            >Hapus</Button>
-                            {
-                                entry.id === getLastId() ?
+        <>
+            <Container>
+                <AppBar position="sticky" sx={{padding: '10px 0'}}>
+                    <Typography
+                        variant='h4'
+                        sx={{
+                            ml: 5,
+                            display: { xs: 'none', md: 'flex' },
+                            letterSpacing: '.3rem',
+                            color: 'inherit',
+                            textDecoration: 'none',
+                        }}
+                    >Overtime Calculator</Typography>
+                </AppBar>
+                <Typography variant='overline' display='block' align='center'>🤑🤑 Sudahkah anda lembur hari ini?
+                    🤑🤑</Typography>
+                <Paper sx={{margin: '10px 0', padding: '20px'}}>
+                    <ul>
+                        <li style={{listStyle: 'none', margin: '20px 0'}}>
+                            <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
+                                        disabled={removeDisabled}
                                         variant="outlined"
-                                        onClick={addToList}
-                                    >Tambah</Button>
-                                    : null
-                            }
-                        </div>
-                    )
-                })}
-            </ul>
-            <Result listEntry={listEntry} baseSalary={baseSalary}/>
-        </Container>
+                                        onClick={() => removeFromList(entry.id)}
+                                    ><RemoveCircleIcon /></Button>
+                                    {
+                                        entry.id === getLastId() ?
+                                            <Button
+                                                variant="outlined"
+                                                onClick={addToList}
+                                            ><AddCircleIcon /></Button>
+                                            : null
+                                    }
+                                </div>
+                            )
+                        })}
+                    </ul>
+                </Paper>
+                <Grid container columnSpacing='5px' sx={{mb: '20px'}}>
+                    <Grid item xs={6}>
+                        <Paper sx={{padding: '10px', minHeight: '100%'}}>
+                            <Result listEntry={listEntry} baseSalary={baseSalary}/>
+                        </Paper>
+                    </Grid>
+                    <Grid item xs={6}>
+                        <Paper sx={{padding: '10px', minHeight: '100%'}}>
+                            <Typography paragraph={true}>
+                                <ul>
+                                    <li>Disclaimer: keakuratan tidak terjamin</li>
+                                    <li>Sudah termasuk perhitungan lembur akhir pekan</li>
+                                    <li>Belum termasuk libur nasional (todo)</li>
+                                    <li>Belum termasuk versi 6 hari kerja (todo)</li>
+                                    <li>UI belum responsive (todo)</li>
+                                </ul>
+                            </Typography>
+                            <Typography paragraph={true} padding={'10px'} marginTop={'5px'}>
+                                <a href='https://gitlab.com/rosyidharyadi/overreact' target='_blank'>Source</a>
+                            </Typography>
+                            <Typography variant='overline' display='block' align='center' padding={'10px'} marginTop={'5px'}>
+                                Rosyid
+                            </Typography>
+                        </Paper>
+                    </Grid>
+                </Grid>
+            </Container>
+        </>
     )
 }
 
diff --git a/src/Result.jsx b/src/Result.jsx
index 5d885fe..fac2b18 100644
--- a/src/Result.jsx
+++ b/src/Result.jsx
@@ -12,7 +12,7 @@ function Result({listEntry, baseSalary}) {
     return (
         <Container>
             <Typography variant='h6'>
-                Total Overtime Pay: Rp<NumericFormat displayType="text" decimalScale={0} thousandSeparator={true}
+                Total Upah Lembur: Rp<NumericFormat displayType="text" decimalScale={0} thousandSeparator={true}
                                                      value={totalOvertimePay}/>
             </Typography>
             {/*{listEntry.map((entry) => {*/}
-- 
cgit v1.2.3-70-g09d2