diff options
| -rw-r--r-- | package-lock.json | 26 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/App.jsx | 119 | ||||
| -rw-r--r-- | 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) => {*/} |