diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.jsx | 119 | ||||
| -rw-r--r-- | src/Result.jsx | 2 |
2 files changed, 82 insertions, 39 deletions
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) => {*/} |