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

Dummy Members

Browse Source
This commit is contained in:
Dell
2022-05-26 16:43:59 +07:00
parent e8bb61be2f
commit 40d680287e
4 changed files with 190 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/Http/Controllers/Api/MemberController.php
View File

@@ -14,7 +14,25 @@ class MemberController extends Controller
*/
public function index()
{
//
$members = [];
$faker = \Faker\Factory::create();
for ($i = 0; $i < 10; $i++) {
$members[] = [
'id' => (10-$i),
'code' => 'UT0000'.sprintf("%02d", 10-$i),
'nik' => 'UNTR0000'.sprintf("%02d", $i),
'name' => $faker->name,
'plan_code' => collect(['PLAN001', 'PLAN002', 'PLAN003', 'PLAN004', 'PLAN005'])->random(),
'number_of_families' => random_int(2,4),
'number_of_claim' => random_int(0,2),
'active' => true,
'history' => []
];
}
return $members;
}
/**

4
frontend/client-portal/src/layouts/dashboard/navbar/NavbarDocs.tsx
View File

@@ -13,7 +13,7 @@ export default function NavbarDocs() {
>
<DocIllustration sx={{ width: 1 }} />
<div>
{/* <div>
<Typography gutterBottom variant="subtitle1">
Hi, Rayan Moran
</Typography>
@@ -23,7 +23,7 @@ export default function NavbarDocs() {
</Typography>
</div>
<Button variant="contained">Documentation</Button>
<Button variant="contained">Documentation</Button> */}
</Stack>
);
}

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

@@ -1,7 +1,8 @@
// @mui
import { Box, Button, Card, Collapse, Container, IconButton, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from '@mui/material';
import { Box, Button, Card, Collapse, Container, FormControl, Grid, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import PublishIcon from '@mui/icons-material/Publish';
// hooks
import useSettings from '../../hooks/useSettings';
// components
@@ -9,7 +10,8 @@ import Page from '../../components/Page';
import axios from '../../utils/axios';
import useAuth from '../../hooks/useAuth';
import { Link } from 'react-router-dom';
import React from 'react';
import React, { useEffect, useRef } from 'react';
import { Theme, useTheme } from '@mui/material/styles';
export default function Members() {
const { themeStretch } = useSettings();
@@ -29,7 +31,7 @@ export default function Members() {
number_of_families: number;
number_of_claim: number;
active: boolean;
history?: [];
history: any[];
}
function createData( member: Member ): Member {
@@ -72,6 +74,7 @@ export default function Members() {
<TableCell align="right">{row.plan_code}</TableCell>
<TableCell align="right">{row.number_of_claim}</TableCell>
<TableCell align="right">{row.number_of_families}</TableCell>
<TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
</TableRow>
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
@@ -98,7 +101,7 @@ export default function Members() {
<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 * 1000 * 100) / 100}
</TableCell>
</TableRow>
))
@@ -119,23 +122,86 @@ export default function Members() {
}
// Dummy Default Data
const rows = [
createData({
id: 1,
code: 'MEMBERCODE',
nik: 'SM12310003',
name: 'Dede Pardede',
plan_code: 'PLAN001',
number_of_families: 4,
number_of_claim: 0,
active: true,
})
];
const [memberLoading, setMemberLoading] = React.useState(true);
const [members, setMembers] = React.useState<Member[]>([]);
const loadMembers = async () => {
setMemberLoading(true)
const response = await axios.get('/members');
setMemberLoading(false)
setMembers(response.data.map(createData));
}
useEffect(() => {
loadMembers();
}, [])
const headStyle = {
fontWeight: 'bold',
};
// FILTER SELECT
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
const names = [
'PLAN001',
'PLAN002',
'PLAN003',
'PLAN004',
'PLAN005',
];
function getStyles(name: string, personName: string[], theme: Theme) {
return {
fontWeight:
personName.indexOf(name) === -1
? theme.typography.fontWeightRegular
: theme.typography.fontWeightMedium,
};
}
const theme = useTheme();
const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
const handleChangePlanID = (event: SelectChangeEvent<typeof planIdFilter>) => {
const {
target: { value },
} = event;
setPlanIdFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
);
};
const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
const handleChangeStatus = (event: SelectChangeEvent<typeof statusFilter>) => {
const {
target: { value },
} = event;
setStatusFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
);
};
// END FILTER SELECT
// IMPORT
const importMember = React.useRef(null);
const handleImportButton = (event: any) => {
if (importMember?.current)
importMember.current.click()
else
alert('No file selected')
}
return (
<Page title="Member List">
<Container maxWidth={themeStretch ? false : 'xl'}>
@@ -143,10 +209,68 @@ export default function Members() {
Member List
</Typography>
<Grid container spacing={2} sx={{ mb: 2 }} justifyContent="flex-end">
<Grid item>
<TextField id="outlined-basic" label="Search" variant="outlined" sx={{ width: 400 }}/>
</Grid>
<Typography variant="body1" component="p" paragraph>
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>
<Grid item>
<FormControl sx={{ width: 200 }}>
<InputLabel id="plan-id-label">PlanID</InputLabel>
<Select
labelId="plan-id-label"
id="plan-id"
multiple
value={planIdFilter}
onChange={handleChangePlanID}
input={<OutlinedInput label="PlanID" />}
MenuProps={MenuProps}
>
{names.map((name) => (
<MenuItem
key={name}
value={name}
style={getStyles(name, planIdFilter, theme)}
>
{name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Grid item>
<FormControl sx={{ width: 200 }}>
<InputLabel id="status-filter-label">Status</InputLabel>
<Select
labelId="status-filter-label"
id="status-filter"
multiple
value={statusFilter}
onChange={handleChangeStatus}
input={<OutlinedInput label="Status" />}
MenuProps={MenuProps}
>
{['Active', 'Suspended'].map((name) => (
<MenuItem
key={name}
value={name}
style={getStyles(name, statusFilter, theme)}
>
{name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Grid item>
<input id="importMember" ref={importMember} style={{ display: 'none' }} type="file" accept='.csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain' />
<Button variant="outlined" startIcon={<PublishIcon />} sx={{ p: 1.8 }} onClick={handleImportButton}>
Import
</Button>
</Grid>
</Grid>
<Card>
<TableContainer component={Paper}>
@@ -163,11 +287,29 @@ export default function Members() {
<TableCell style={headStyle} align="right">Status</TableCell>
</TableRow>
</TableBody>
<TableBody>
{rows.map((row, index) => (
<Row key={index} row={row} />
))}
</TableBody>
{memberLoading ?
(
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">Loading</TableCell>
</TableRow>
</TableBody>
) : (
members.length == 0 ?
(
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">No Data</TableCell>
</TableRow>
</TableBody>
) : (
<TableBody>
{members.map(row => (
<Row key={row.code} row={row} />
))}
</TableBody>
)
)}
</Table>
</TableContainer>
</Card>

3
routes/api.php
View File

@@ -1,6 +1,7 @@
<?php
use App\Http\Controllers\Api\AuthController;
use App\Http\Controllers\Api\MemberController;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
@@ -24,4 +25,6 @@ Route::middleware('auth:sanctum')->group(function() {
Route::get('/user', function (Request $request) {
return $request->user();
});
Route::get('members', [MemberController::class, 'index'])->name('members.index');
});