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

Fix Corporate Index

Browse Source
This commit is contained in:
Dell
2022-08-31 10:21:18 +07:00
parent 2efc5e44a2
commit f0acb340b7
4 changed files with 208 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
Modules/Internal/Http/Controllers/Api/CorporateController.php
View File

@@ -23,10 +23,19 @@ class CorporateController extends Controller
* Display a listing of the resource.
* @return Renderable
*/
public function index()
public function index(Request $request)
{
$corporates = Corporate::query()
->paginate(0);
->when($request->search, function ($query, $search) {
return $query->where('name', 'LIKE', '%'.$search.'%');
})
->with('currentPolicy')
->withCount([
'employees',
'corporatePlans',
'corporateBenefits'
])
->paginate(2);
return $corporates;
}

6
frontend/client-portal/src/pages/Members/List.tsx
View File

@@ -1,5 +1,5 @@
// @mui
import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination } from '@mui/material';
import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination, Grid } from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import AddIcon from '@mui/icons-material/Add';
@@ -174,7 +174,7 @@ export default function List() {
// Generate the every row of the table
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
const [open, setOpen] = React.useState(true);
return (
<React.Fragment>
@@ -203,7 +203,7 @@ export default function List() {
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ borderBottom: 1 }}>
<Typography variant="body2" gutterBottom component="div">
Description : {row.description}
<Grid ></Grid>
</Typography>
</Box>
</Collapse>

2
frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx
View File

@@ -53,7 +53,7 @@ const navConfig = [
openWhen: ['/corporates', '/formularium', '/diagnosis', '/hospitals'],
children: [
{ title: 'Corporate', path: '/corporates' },
{ title: 'Corporate Create', path: '/corporates/create' },
// { title: 'Corporate Create', path: '/corporates/create' },
{ title: 'Formularium', path: '/master/formularium' },
{ title: 'Obat', path: '/master/drugs' },
{ title: 'Diagnosis Library (ICD-X)', path: '/master/diagnosis' },

299
frontend/dashboard/src/pages/Corporates/Index.tsx
View File

@@ -10,15 +10,18 @@ import useSettings from '../../hooks/useSettings';
import Page from '../../components/Page';
import axios from '../../utils/axios';
import useAuth from '../../hooks/useAuth';
import { Link , NavLink as RouterLink } from 'react-router-dom';
import React, { useEffect, useRef } from 'react';
import { Link , NavLink as RouterLink, useSearchParams } from 'react-router-dom';
import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
import { Theme, useTheme } from '@mui/material/styles';
import { Corporate } from '../../@types/corporates';
import { LaravelPaginatedData } from '../../@types/paginated-data';
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
import BasePagination from '../../components/BasePagination';
import { fCurrency } from '../../utils/formatNumber';
export default function Corporates() {
const { themeStretch } = useSettings();
const [searchParams, setSearchParams] = useSearchParams();
// Called on every row to map the data to the columns
function createData( corporate: Corporate ): Corporate {
@@ -27,79 +30,6 @@ export default function Corporates() {
}
}
// Generate the every row of the table
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
<TableCell align="right">
<Stack direction="row" justifyContent="flex-end" spacing={1}>
<Link to={"/corporates/" + row.id + "/edit"}><Button variant="outlined" color="primary" size="small">Edit</Button></ Link>
<Link to={"/corporates/" + row.id + ""}><Button variant="outlined" color="primary" size="small">Config</Button></ Link>
</Stack>
</TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1 }}>
<Typography variant="h6" gutterBottom component="div">
History
</Typography>
<Table size="small" aria-label="purchases">
<TableHead>
<TableRow>
<TableCell>Date</TableCell>
<TableCell>Customer</TableCell>
<TableCell align="right">Amount</TableCell>
<TableCell align="right">Total price ($)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{row.history ? row.history.map((historyRow) => (
<TableRow key={historyRow?.date}>
<TableCell component="th" scope="row">
{historyRow?.date}
</TableCell>
<TableCell>{historyRow?.customerId}</TableCell>
<TableCell align="right">{historyRow?.amount}</TableCell>
<TableCell align="right">
{Math.round(historyRow?.amount * 1000 * 100) / 100}
</TableCell>
</TableRow>
))
: (
<TableRow>
<TableCell colSpan={8}>No Data</TableCell>
</TableRow>
)
}
</TableBody>
</Table>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
@@ -117,19 +47,34 @@ export default function Corporates() {
total: 0
});
const loadDataTableData = async () => {
const loadDataTableData = async (appliedFilter : any | null = null) => {
setDataTableLoading(true);
const response = await axios.get('/corporates');
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
const response = await axios.get('/corporates', { params: filter });
// console.log(response.data);
setDataTableLoading(false);
setDataTableData(response.data);
}
const applyFilter = async (searchFilter: any) => {
await loadDataTableData({ "search" : searchFilter });
setSearchParams({ "search" : searchFilter });
}
const handlePageChange = (event : ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
loadDataTableData(filter);
setSearchParams(filter);
}
useEffect(() => {
loadDataTableData();
}, [])
const headStyle = {
fontWeight: 'bold',
};
@@ -187,31 +132,33 @@ export default function Corporates() {
};
// END FILTER SELECT
// IMPORT
const importMember = React.useRef(null);
const handleImportButton = (event: any) => {
if (importMember?.current)
importMember.current ? importMember.current.click() : console.log('fuck');
else
alert('No file selected')
}
// Component Search Input
function SearchInput(props: any) {
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
const [searchText, setSearchText] = useState("");
return (
<Page title="Membership : Corporate List">
<Container maxWidth={themeStretch ? false : 'xl'}>
<HeaderBreadcrumbs
heading={'Coporate List'}
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Corporates',
href: '/corporates',
},
]}
/>
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? ''
setSearchText(newSearchText);
}
<Grid container spacing={3} sx={{ mb: 2 }} justifyContent="flex-end">
<Grid item>
const handleSubmit = (event: any) => {
event.preventDefault();
props.onSearch(searchText); // Trigger to Parent
}
useEffect(() => {
// console.log('Search Input: useEffect')
setSearchText(searchParams.get('search') ?? '');
}, [searchParams])
return (
<form onSubmit={handleSubmit} style={{ width: '100%' }}>
<Stack direction={'row'} spacing={2} sx={{ mb: 2 }}>
<TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
{/* <Grid item>
<TextField id="outlined-basic" label="Search" variant="outlined" sx={{ width: 400 }}/>
</Grid>
@@ -263,9 +210,9 @@ export default function Corporates() {
))}
</Select>
</FormControl>
</Grid>
</Grid> */}
<Grid item>
{/* <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
@@ -273,9 +220,148 @@ export default function Corporates() {
<Link to={"/corporates/create"}>
<Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
</Link>
</Grid>
</Grid>
{/* </Grid> */}
</Stack>
<Button type='hidden' sx={{ display: 'none' }}>Search</Button>
</form>
);
}
// Component Row
// Generate the every row of the table
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
<TableCell align="right">
<Stack direction="row" justifyContent="flex-end" spacing={1}>
<Link to={"/corporates/" + row.id + "/edit"}><Button variant="outlined" color="primary" size="small">Edit</Button></ Link>
<Link to={"/corporates/" + row.id + ""}><Button variant="outlined" color="primary" size="small">Config</Button></ Link>
</Stack>
</TableCell>
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={9999}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1, borderBottom: 1, pb: 2 }}>
<Typography sx={{ fontWeight: '600', mb: 1 }}>Current Policy Detail</Typography>
<Grid container>
<Grid item xs={6}>
<Grid container>
<Grid item xs={6}>
Policy Code
</Grid>
<Grid item xs={6}>
: {row.current_policy?.code}
</Grid>
<Grid item xs={6}>
Number of Plan
</Grid>
<Grid item xs={6}>
: {row.corporate_plans_count}
</Grid>
<Grid item xs={6}>
Number of Benefit
</Grid>
<Grid item xs={6}>
: {row.corporate_benefits_count}
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Grid Grid container>
<Grid item xs={6}>
Period
</Grid>
<Grid item xs={6}>
: {row.current_policy?.start} - {row.current_policy?.end}
</Grid>
<Grid item xs={6}>
Total Premi
</Grid>
<Grid item xs={6}>
: {row.current_policy ? fCurrency(row.current_policy?.total_premi) : '-'}
</Grid>
<Grid item xs={6}>
Minimal Deposit
</Grid>
<Grid item xs={6}>
: {row.current_policy ? fCurrency(row.current_policy?.minimal_deposit_net) : '-'}
</Grid>
</Grid>
</Grid>
</Grid>
<Typography sx={{ fontWeight: '600', mb: 1, mt: 2 }}>Member Detail</Typography>
<Grid container>
<Grid item xs={6}>
<Grid container>
<Grid item xs={6}>
Total Member
</Grid>
<Grid item xs={6}>
: {row.employees_count}
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Grid Grid container>
<Grid item xs={6}>
Total Claim This Month
</Grid>
<Grid item xs={6}>
: 0
</Grid>
</Grid>
</Grid>
</Grid>
</Box>
</Collapse>
</TableCell>
</TableRow>
</React.Fragment>
);
}
return (
<Page title="Membership : Corporate List">
<Container maxWidth={themeStretch ? false : 'xl'}>
<HeaderBreadcrumbs
heading={'Coporate List'}
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Corporates',
href: '/corporates',
},
]}
/>
<SearchInput onSearch={applyFilter}/>
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
@@ -285,8 +371,8 @@ export default function Corporates() {
<TableCell style={headStyle} align="left">#</TableCell>
<TableCell style={headStyle} align="left">Code</TableCell>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="left">Status</TableCell>
<TableCell style={headStyle} align="right">Action</TableCell>
<TableCell style={headStyle} align="left" width={100}>Status</TableCell>
<TableCell style={headStyle} align="right" width={100}>Action</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ?
@@ -314,6 +400,7 @@ export default function Corporates() {
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
</Card>
</Container>
</Page>