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
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 KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
// hooks
@@ -20,21 +20,21 @@ export default function Members() {
console.log('Loading Something')
}
function createData(
name: string,
calories: number,
fat: number,
carbs: number,
protein: number,
price: number,
) {
type Member = {
id: number;
code: string;
nik: string;
name: string;
plan_code: string;
number_of_families: number;
number_of_claim: number;
active: boolean;
history?: [];
}
function createData( member: Member ): Member {
return {
name,
calories,
fat,
carbs,
protein,
price,
...member,
history: [
{
date: '2020-01-05',
@@ -46,8 +46,8 @@ export default function Members() {
customerId: 'Anonymous',
amount: 1,
},
],
};
]
}
}
function Row(props: { row: ReturnType<typeof createData> }) {
@@ -66,13 +66,12 @@ export default function Members() {
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="right">{row.nik}</TableCell>
<TableCell align="right">{row.plan_code}</TableCell>
<TableCell align="right">{row.number_of_claim}</TableCell>
<TableCell align="right">{row.number_of_families}</TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
@@ -91,18 +90,24 @@ export default function Members() {
</TableRow>
</TableHead>
<TableBody>
{row.history.map((historyRow) => (
<TableRow key={historyRow.date}>
{row.history ? row.history.map((historyRow) => (
<TableRow key={historyRow?.date}>
<TableCell component="th" scope="row">
{historyRow.date}
{historyRow?.date}
</TableCell>
<TableCell>{historyRow.customerId}</TableCell>
<TableCell align="right">{historyRow.amount}</TableCell>
<TableCell>{historyRow?.customerId}</TableCell>
<TableCell align="right">{historyRow?.amount}</TableCell>
<TableCell align="right">
{Math.round(historyRow.amount * row.price * 100) / 100}
{Math.round(historyRow?.amount * row.price * 100) / 100}
</TableCell>
</TableRow>
))}
))
: (
<TableRow>
<TableCell colSpan={8}>No Data</TableCell>
</TableRow>
)
}
</TableBody>
</Table>
</Box>
@@ -115,13 +120,22 @@ export default function Members() {
// Dummy Default Data
const rows = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0, 3.99),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 4.99),
createData('Eclair', 262, 16.0, 24, 6.0, 3.79),
createData('Cupcake', 305, 3.7, 67, 4.3, 2.5),
createData('Gingerbread', 356, 16.0, 49, 3.9, 1.5),
createData({
id: 1,
code: 'MEMBERCODE',
nik: 'SM12310003',
name: 'Dede Pardede',
plan_code: 'PLAN001',
number_of_families: 4,
number_of_claim: 0,
active: true,
})
];
const headStyle = {
fontWeight: 'bold',
};
return (
<Page title="Member List">
<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.
</Typography>
<Card>
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableHead>
<TableBody>
<TableRow>
<TableCell />
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat&nbsp;(g)</TableCell>
<TableCell align="right">Carbs&nbsp;(g)</TableCell>
<TableCell align="right">Protein&nbsp;(g)</TableCell>
<TableCell style={headStyle} align="left">Detail</TableCell>
<TableCell style={headStyle} align="left">MemberID</TableCell>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="right">NIK</TableCell>
<TableCell style={headStyle} align="right">PlanID</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>
</TableHead>
</TableBody>
<TableBody>
{rows.map((row, index) => (
<Row key={index} row={row} />
@@ -153,6 +170,7 @@ export default function Members() {
</TableBody>
</Table>
</TableContainer>
</Card>
</Container>
</Page>
);

2
package.json
View File

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

2
pnpm-lock.yaml generated
View File

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