From 40d680287eee1af58507476952cee1545c55cad2 Mon Sep 17 00:00:00 2001 From: Dell Date: Thu, 26 May 2022 16:43:59 +0700 Subject: [PATCH] Dummy Members --- app/Http/Controllers/Api/MemberController.php | 20 +- .../layouts/dashboard/navbar/NavbarDocs.tsx | 4 +- .../client-portal/src/pages/Members/Index.tsx | 190 +++++++++++++++--- routes/api.php | 3 + 4 files changed, 190 insertions(+), 27 deletions(-) diff --git a/app/Http/Controllers/Api/MemberController.php b/app/Http/Controllers/Api/MemberController.php index c7904a46..164aa93b 100644 --- a/app/Http/Controllers/Api/MemberController.php +++ b/app/Http/Controllers/Api/MemberController.php @@ -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; } /** diff --git a/frontend/client-portal/src/layouts/dashboard/navbar/NavbarDocs.tsx b/frontend/client-portal/src/layouts/dashboard/navbar/NavbarDocs.tsx index bdbd4567..35c8503f 100644 --- a/frontend/client-portal/src/layouts/dashboard/navbar/NavbarDocs.tsx +++ b/frontend/client-portal/src/layouts/dashboard/navbar/NavbarDocs.tsx @@ -13,7 +13,7 @@ export default function NavbarDocs() { > -
+ {/*
Hi, Rayan Moran @@ -23,7 +23,7 @@ export default function NavbarDocs() {
- + */} ); } diff --git a/frontend/client-portal/src/pages/Members/Index.tsx b/frontend/client-portal/src/pages/Members/Index.tsx index 016b07d3..ed5ef6a4 100644 --- a/frontend/client-portal/src/pages/Members/Index.tsx +++ b/frontend/client-portal/src/pages/Members/Index.tsx @@ -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() { {row.plan_code} {row.number_of_claim} {row.number_of_families} + @@ -98,7 +101,7 @@ export default function Members() { {historyRow?.customerId} {historyRow?.amount} - {Math.round(historyRow?.amount * row.price * 100) / 100} + {Math.round(historyRow?.amount * 1000 * 100) / 100} )) @@ -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([]); + + 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([]); + + const handleChangePlanID = (event: SelectChangeEvent) => { + const { + target: { value }, + } = event; + setPlanIdFilter( + // On autofill we get a stringified value. + typeof value === 'string' ? value.split(',') : value, + ); + }; + + const [statusFilter, setStatusFilter] = React.useState([]); + const handleChangeStatus = (event: SelectChangeEvent) => { + 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 ( @@ -143,10 +209,68 @@ export default function Members() { Member List + + + + - - 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. - + + + PlanID + + + + + + + Status + + + + + + + + + @@ -163,11 +287,29 @@ export default function Members() { Status - - {rows.map((row, index) => ( - - ))} - + {memberLoading ? + ( + + + Loading + + + ) : ( + members.length == 0 ? + ( + + + No Data + + + ) : ( + + {members.map(row => ( + + ))} + + ) + )} diff --git a/routes/api.php b/routes/api.php index 0fb7ba24..6975bd07 100644 --- a/routes/api.php +++ b/routes/api.php @@ -1,6 +1,7 @@ group(function() { Route::get('/user', function (Request $request) { return $request->user(); }); + + Route::get('members', [MemberController::class, 'index'])->name('members.index'); });