tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

[WIP] Members List

Browse Source
This commit is contained in:
Dell
2022-05-26 13:45:29 +07:00
parent 720eff969d
commit 79c4a5c241
3 changed files with 64 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/client-portal/src/pages/Members/Index.tsx
View File

@@ -1,5 +1,5 @@
// @mui // @mui
import { Box, Button, Collapse, Container, IconButton, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material'; import { Box, Button, Card, Collapse, Container, IconButton, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
// hooks // hooks
@@ -20,21 +20,21 @@ export default function Members() {
console.log('Loading Something') console.log('Loading Something')
} }
function createData( type Member = {
name: string, id: number;
calories: number, code: string;
fat: number, nik: string;
carbs: number, name: string;
protein: number, plan_code: string;
price: number, number_of_families: number;
) { number_of_claim: number;
active: boolean;
history?: [];
}
function createData( member: Member ): Member {
return { return {
name, ...member,
calories,
fat,
carbs,
protein,
price,
history: [ history: [
{ {
date: '2020-01-05', date: '2020-01-05',
@@ -46,8 +46,8 @@ export default function Members() {
customerId: 'Anonymous', customerId: 'Anonymous',
amount: 1, amount: 1,
}, },
], ]
}; }
} }
function Row(props: { row: ReturnType<typeof createData> }) { function Row(props: { row: ReturnType<typeof createData> }) {
@@ -66,13 +66,12 @@ export default function Members() {
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />} {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton> </IconButton>
</TableCell> </TableCell>
<TableCell component="th" scope="row"> <TableCell align="left">{row.code}</TableCell>
{row.name} <TableCell align="left">{row.name}</TableCell>
</TableCell> <TableCell align="right">{row.nik}</TableCell>
<TableCell align="right">{row.calories}</TableCell> <TableCell align="right">{row.plan_code}</TableCell>
<TableCell align="right">{row.fat}</TableCell> <TableCell align="right">{row.number_of_claim}</TableCell>
<TableCell align="right">{row.carbs}</TableCell> <TableCell align="right">{row.number_of_families}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}> <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
@@ -91,18 +90,24 @@ export default function Members() {
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{row.history.map((historyRow) => ( {row.history ? row.history.map((historyRow) => (
<TableRow key={historyRow.date}> <TableRow key={historyRow?.date}>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
{historyRow.date} {historyRow?.date}
</TableCell> </TableCell>
<TableCell>{historyRow.customerId}</TableCell> <TableCell>{historyRow?.customerId}</TableCell>
<TableCell align="right">{historyRow.amount}</TableCell> <TableCell align="right">{historyRow?.amount}</TableCell>
<TableCell align="right"> <TableCell align="right">
{Math.round(historyRow.amount * row.price * 100) / 100} {Math.round(historyRow?.amount * row.price * 100) / 100}
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))
: (
<TableRow>
<TableCell colSpan={8}>No Data</TableCell>
</TableRow>
)
}
</TableBody> </TableBody>
</Table> </Table>
</Box> </Box>
@@ -115,13 +120,22 @@ export default function Members() {
// Dummy Default Data // Dummy Default Data
const rows = [ const rows = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0, 3.99), createData({
createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 4.99), id: 1,
createData('Eclair', 262, 16.0, 24, 6.0, 3.79), code: 'MEMBERCODE',
createData('Cupcake', 305, 3.7, 67, 4.3, 2.5), nik: 'SM12310003',
createData('Gingerbread', 356, 16.0, 49, 3.9, 1.5), name: 'Dede Pardede',
plan_code: 'PLAN001',
number_of_families: 4,
number_of_claim: 0,
active: true,
})
]; ];
const headStyle = {
fontWeight: 'bold',
};
return ( return (
<Page title="Member List"> <Page title="Member List">
<Container maxWidth={themeStretch ? false : 'xl'}> <Container maxWidth={themeStretch ? false : 'xl'}>
@@ -134,18 +148,21 @@ export default function Members() {
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, delectus? Suscipit placeat tempora mollitia optio, assumenda maiores architecto officia itaque molestias cum id eligendi necessitatibus! A velit eos ratione ullam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, delectus? Suscipit placeat tempora mollitia optio, assumenda maiores architecto officia itaque molestias cum id eligendi necessitatibus! A velit eos ratione ullam.
</Typography> </Typography>
<Card>
<TableContainer component={Paper}> <TableContainer component={Paper}>
<Table aria-label="collapsible table"> <Table aria-label="collapsible table">
<TableHead> <TableBody>
<TableRow> <TableRow>
<TableCell /> <TableCell style={headStyle} align="left">Detail</TableCell>
<TableCell>Dessert (100g serving)</TableCell> <TableCell style={headStyle} align="left">MemberID</TableCell>
<TableCell align="right">Calories</TableCell> <TableCell style={headStyle} align="left">Name</TableCell>
<TableCell align="right">Fat&nbsp;(g)</TableCell> <TableCell style={headStyle} align="right">NIK</TableCell>
<TableCell align="right">Carbs&nbsp;(g)</TableCell> <TableCell style={headStyle} align="right">PlanID</TableCell>
<TableCell align="right">Protein&nbsp;(g)</TableCell> <TableCell style={headStyle} align="right">Claim&nbsp;(time)</TableCell>
<TableCell style={headStyle} align="right">Family&nbsp;(person)</TableCell>
<TableCell style={headStyle} align="right">Status</TableCell>
</TableRow> </TableRow>
</TableHead> </TableBody>
<TableBody> <TableBody>
{rows.map((row, index) => ( {rows.map((row, index) => (
<Row key={index} row={row} /> <Row key={index} row={row} />
@@ -153,6 +170,7 @@ export default function Members() {
</TableBody> </TableBody>
</Table> </Table>
</TableContainer> </TableContainer>
</Card>
</Container> </Container>
</Page> </Page>
); );

2
package.json
View File

@@ -14,7 +14,7 @@
"devDependencies": { "devDependencies": {
"axios": "^0.25", "axios": "^0.25",
"laravel-mix": "^6.0.6", "laravel-mix": "^6.0.6",
"lodash": "^4.17.19", "lodash": "^4.17.21",
"postcss": "^8.1.14" "postcss": "^8.1.14"
}, },
"dependencies": { "dependencies": {

2
pnpm-lock.yaml generated
View File

@@ -5,7 +5,7 @@ specifiers:
'@mui/material': ^5.8.1 '@mui/material': ^5.8.1
axios: ^0.25 axios: ^0.25
laravel-mix: ^6.0.6 laravel-mix: ^6.0.6
lodash: ^4.17.19 lodash: ^4.17.21
postcss: ^8.1.14 postcss: ^8.1.14
dependencies: dependencies: