dashboard
This commit is contained in:
Muhammad Fajar
@@ -1,80 +0,0 @@
|
|||||||
// @mui
|
|
||||||
import { Button, Container, Grid, styled, Typography, Card, Stack } from '@mui/material';
|
|
||||||
// hooks
|
|
||||||
import useSettings from '../hooks/useSettings';
|
|
||||||
// components
|
|
||||||
import Page from '../components/Page';
|
|
||||||
import axios from '../utils/axios';
|
|
||||||
import useAuth from '../hooks/useAuth';
|
|
||||||
import SomethingUsage from '../sections/dashboard/SomethingUsage';
|
|
||||||
import { fCurrency } from '../utils/formatNumber';
|
|
||||||
import { useEffect, useState } from 'react';
|
|
||||||
|
|
||||||
// ----------------------------------------------------------------------
|
|
||||||
|
|
||||||
export default function Dashboard() {
|
|
||||||
const { themeStretch } = useSettings();
|
|
||||||
|
|
||||||
const { logout } = useAuth();
|
|
||||||
const [ corporate, setCorporate ] = useState({});
|
|
||||||
|
|
||||||
const loadSomething = () => {
|
|
||||||
// axios.get('/user')
|
|
||||||
axios.get('dashboard')
|
|
||||||
.then((res) => {
|
|
||||||
setCorporate(res.data.corporate)
|
|
||||||
})
|
|
||||||
.catch((err) => {
|
|
||||||
alert('Opps, Something Went Wrong when collecting dashboard data')
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
loadSomething()
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const DangerCard = styled(Card)(({ theme }) => ({
|
|
||||||
boxShadow: 'none',
|
|
||||||
padding: theme.spacing(3),
|
|
||||||
color: theme.palette.error.main,
|
|
||||||
backgroundColor: theme.palette.error.lighter,
|
|
||||||
}));
|
|
||||||
|
|
||||||
const SuccessCard = styled(Card)(({ theme }) => ({
|
|
||||||
boxShadow: 'none',
|
|
||||||
padding: theme.spacing(3),
|
|
||||||
color: theme.palette.success.darker,
|
|
||||||
backgroundColor: theme.palette.success.lighter,
|
|
||||||
}));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Page title="Dashboard">
|
|
||||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
|
||||||
<Typography variant="h3" component="h1" paragraph>
|
|
||||||
Dashboard
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<SomethingUsage />
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={6}>
|
|
||||||
<DangerCard>
|
|
||||||
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
|
|
||||||
<Typography sx={{ typography: 'subtitle2' }}>This Month Usages </Typography>
|
|
||||||
<Typography>{fCurrency(15000000)} (57)</Typography>
|
|
||||||
</Stack>
|
|
||||||
</DangerCard>
|
|
||||||
<br />
|
|
||||||
<SuccessCard>
|
|
||||||
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
|
|
||||||
<Typography sx={{ typography: 'subtitle2' }}>Remaining Balance Estimation </Typography>
|
|
||||||
<Typography>November 2022</Typography>
|
|
||||||
</Stack>
|
|
||||||
</SuccessCard>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Container>
|
|
||||||
</Page>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
251
frontend/client-portal/src/pages/Dashboard/Dashboard.tsx
Executable file
251
frontend/client-portal/src/pages/Dashboard/Dashboard.tsx
Executable file
@@ -0,0 +1,251 @@
|
|||||||
|
// @mui
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
Typography,
|
||||||
|
Link,
|
||||||
|
Divider,
|
||||||
|
Stack,
|
||||||
|
LinearProgress,
|
||||||
|
linearProgressClasses,
|
||||||
|
Container,
|
||||||
|
Grid,
|
||||||
|
} from '@mui/material';
|
||||||
|
import { ChevronRight } from '@mui/icons-material';
|
||||||
|
// hooks
|
||||||
|
import useSettings from '../../hooks/useSettings';
|
||||||
|
// utils
|
||||||
|
import { fCurrency } from '../../utils/formatNumber';
|
||||||
|
// components
|
||||||
|
import Page from '../../components/Page';
|
||||||
|
import Iconify from '../../components/Iconify';
|
||||||
|
// import Popup from '../components/Popup';
|
||||||
|
// import axios from '../utils/axios';
|
||||||
|
// DashboardComponent
|
||||||
|
// import BalanceCard from '../sections/dashboard/BalanceCard';
|
||||||
|
// import NotificationCard from '../sections/dashboard/NotificationCard';
|
||||||
|
// import DashboardTable from '../sections/dashboard/DashboardTable';
|
||||||
|
// React
|
||||||
|
import { useState } from 'react';
|
||||||
|
// Table
|
||||||
|
import List from './List';
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
const RootBalanceStyle = styled(Card)(({ theme }) => ({
|
||||||
|
boxShadow: 'none',
|
||||||
|
padding: theme.spacing(3),
|
||||||
|
color: 'black',
|
||||||
|
backgroundColor: theme.palette.grey[200],
|
||||||
|
maxHeight: '240px',
|
||||||
|
}));
|
||||||
|
|
||||||
|
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
|
||||||
|
height: 10,
|
||||||
|
borderRadius: 6,
|
||||||
|
[`&.${linearProgressClasses.colorPrimary}`]: {
|
||||||
|
backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
|
||||||
|
},
|
||||||
|
[`& .${linearProgressClasses.bar}`]: {
|
||||||
|
borderRadius: 6,
|
||||||
|
backgroundColor: theme.palette.primary.main,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
const RootNotificationStyle = styled(Card)(({ theme }) => ({
|
||||||
|
boxShadow: 'none',
|
||||||
|
padding: '1rem 0.5rem',
|
||||||
|
color: 'black',
|
||||||
|
backgroundColor: theme.palette.grey[200],
|
||||||
|
maxHeight: '240px',
|
||||||
|
}));
|
||||||
|
|
||||||
|
const ItemNotificationStyle = styled(Card)(({ theme }) => ({
|
||||||
|
boxShadow: 'none',
|
||||||
|
padding: theme.spacing(1),
|
||||||
|
borderRadius: 0.5,
|
||||||
|
color: 'black',
|
||||||
|
maxHeight: '170px',
|
||||||
|
}));
|
||||||
|
|
||||||
|
const itemList = [
|
||||||
|
{ info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '08:00 WIB' },
|
||||||
|
{ info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '09:00 WIB' },
|
||||||
|
{ info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '10:00 WIB' },
|
||||||
|
{ info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 WIB' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const INITIAL = '500.000.000';
|
||||||
|
const TOTAL = 375000000;
|
||||||
|
const PERCENT = 75;
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
export default function Dashboard() {
|
||||||
|
const { themeStretch } = useSettings();
|
||||||
|
const [openPopup, setOpenPopup] = useState(false);
|
||||||
|
|
||||||
|
// const { logout } = useAuth();
|
||||||
|
// const [corporate, setCorporate] = useState({});
|
||||||
|
|
||||||
|
// const loadSomething = () => {
|
||||||
|
// axios
|
||||||
|
// .get('dashboard')
|
||||||
|
// .then((res) => {
|
||||||
|
// setCorporate(res.data.corporate);
|
||||||
|
// })
|
||||||
|
// .catch((err) => {
|
||||||
|
// alert('Opps, Something Went Wrong when collecting dashboard data');
|
||||||
|
// });
|
||||||
|
// };
|
||||||
|
|
||||||
|
// useEffect(() => {
|
||||||
|
// loadSomething();
|
||||||
|
// }, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page title="Dashboard">
|
||||||
|
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||||
|
<Typography variant="h3" component="h1" paragraph>
|
||||||
|
Dashboard
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
<Grid item xs={6} lg={6} md={12}>
|
||||||
|
<RootNotificationStyle>
|
||||||
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||||
|
<Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
component="span"
|
||||||
|
sx={{ display: 'flex', alignItems: 'center' }}
|
||||||
|
>
|
||||||
|
<Iconify icon="eva:bell-fill" marginRight={0.75} />
|
||||||
|
Notification
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '12px',
|
||||||
|
height: '12px',
|
||||||
|
backgroundColor: '#19BBBB',
|
||||||
|
marginLeft: '0.5rem',
|
||||||
|
borderRadius: '50%',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Typography>
|
||||||
|
</Typography>
|
||||||
|
<Button sx={{ typography: 'body2' }} endIcon={<ChevronRight />}>
|
||||||
|
View All
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<Stack sx={{ marginTop: 2 }}>
|
||||||
|
<ItemNotificationStyle>
|
||||||
|
{itemList.map(({ info, date, time }, key) => (
|
||||||
|
<div key={key}>
|
||||||
|
{key >= 1 ? <Divider sx={{ marginY: 0.5 }} /> : ''}
|
||||||
|
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||||
|
<Stack
|
||||||
|
direction="column"
|
||||||
|
justifyContent="flex-start"
|
||||||
|
alignItems="flex-start"
|
||||||
|
>
|
||||||
|
<Typography sx={{ typography: 'caption' }}>{info}</Typography>
|
||||||
|
<Link
|
||||||
|
component="button"
|
||||||
|
variant="caption"
|
||||||
|
underline="always"
|
||||||
|
onClick={() => {
|
||||||
|
alert('Info Detail');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Info Detail
|
||||||
|
</Link>
|
||||||
|
</Stack>
|
||||||
|
<Stack
|
||||||
|
direction="column"
|
||||||
|
justifyContent="flex-start"
|
||||||
|
alignItems="flex-start"
|
||||||
|
>
|
||||||
|
<Typography sx={{ typography: 'caption', color: '#656565' }}>
|
||||||
|
{date}
|
||||||
|
</Typography>
|
||||||
|
<Typography sx={{ typography: 'caption', color: '#656565' }}>
|
||||||
|
{time}
|
||||||
|
</Typography>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</ItemNotificationStyle>
|
||||||
|
</Stack>
|
||||||
|
</RootNotificationStyle>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} lg={6} md={12}>
|
||||||
|
<RootBalanceStyle>
|
||||||
|
<Stack direction="row" justifyContent="space-between" sx={{ mb: 1 }}>
|
||||||
|
<div>
|
||||||
|
<Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
|
||||||
|
Total Limit
|
||||||
|
</Typography>
|
||||||
|
<Typography sx={{ typography: 'body2' }}>{fCurrency(TOTAL)}</Typography>
|
||||||
|
<Typography sx={{ typography: 'caption', color: '#919EAB' }}>
|
||||||
|
/ {INITIAL}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Stack direction="row" alignItems="center" justifyContent="center">
|
||||||
|
<Typography variant="h5" sx={{ ml: 0.5 }}>
|
||||||
|
{PERCENT}%
|
||||||
|
</Typography>
|
||||||
|
</Stack>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<BorderLinearProgress variant="determinate" value={PERCENT} sx={{ mb: 1 }} />
|
||||||
|
|
||||||
|
<Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
|
||||||
|
<Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
|
||||||
|
<Iconify
|
||||||
|
icon="bxs:lock-alt"
|
||||||
|
width={12}
|
||||||
|
height={13}
|
||||||
|
sx={{ color: '#424242', marginRight: '6px' }}
|
||||||
|
/>
|
||||||
|
<Typography variant="caption" component="span">
|
||||||
|
Lock Fund ( 25% )
|
||||||
|
</Typography>
|
||||||
|
</Typography>
|
||||||
|
<Typography sx={{ typography: 'caption', color: '#637381' }}>
|
||||||
|
125.000.000 / 125.000.000
|
||||||
|
</Typography>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<Stack direction="row" spacing={2}>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
startIcon={<Iconify icon="bi:clipboard-check-fill" />}
|
||||||
|
fullWidth={true}
|
||||||
|
onClick={() => setOpenPopup(true)}
|
||||||
|
>
|
||||||
|
Submit Claim
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="contained"
|
||||||
|
startIcon={<Iconify icon="heroicons-solid:cash" />}
|
||||||
|
fullWidth={true}
|
||||||
|
>
|
||||||
|
Top Up
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
</RootBalanceStyle>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} lg={12} md={12}>
|
||||||
|
<List />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Container>
|
||||||
|
|
||||||
|
{/* <Popup openPopup={openPopup} setOpenPopup={setOpenPopup} /> */}
|
||||||
|
</Page>
|
||||||
|
);
|
||||||
|
}
|
||||||
314
frontend/client-portal/src/pages/Dashboard/List.tsx
Executable file
314
frontend/client-portal/src/pages/Dashboard/List.tsx
Executable file
@@ -0,0 +1,314 @@
|
|||||||
|
// @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, 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';
|
||||||
|
import UploadIcon from '@mui/icons-material/Upload';
|
||||||
|
import CancelIcon from '@mui/icons-material/Cancel';
|
||||||
|
// hooks
|
||||||
|
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
|
||||||
|
import useSettings from '../../hooks/useSettings';
|
||||||
|
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||||||
|
// components
|
||||||
|
import axios from '../../utils/axios';
|
||||||
|
import { LaravelPaginatedData } from '../../@types/paginated-data';
|
||||||
|
import { Icd } from '../../@types/diagnosis';
|
||||||
|
import BasePagination from '../../components/BasePagination';
|
||||||
|
import { Member } from '../../@types/member';
|
||||||
|
|
||||||
|
export default function List() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { themeStretch } = useSettings();
|
||||||
|
const { corporate_id } = useParams();
|
||||||
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
|
const [importResult, setImportResult] = useState(null);
|
||||||
|
|
||||||
|
function SearchInput(props: any) {
|
||||||
|
// SEARCH
|
||||||
|
const searchInput = useRef<HTMLInputElement>(null);
|
||||||
|
const [searchText, setSearchText] = useState("");
|
||||||
|
|
||||||
|
const handleSearchChange = (event: any) => {
|
||||||
|
const newSearchText = event.target.value ?? ''
|
||||||
|
setSearchText(newSearchText);
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearchSubmit = (event: any) => {
|
||||||
|
event.preventDefault();
|
||||||
|
props.onSearch(searchText); // Trigger to Parent
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => { // Trigger First Search
|
||||||
|
setSearchText(searchParams.get('search') ?? '');
|
||||||
|
}, [searchParams])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
|
||||||
|
<TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ImportForm(props: any) {
|
||||||
|
// IMPORT
|
||||||
|
// Create Button Menu
|
||||||
|
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||||
|
const createMenu = Boolean(anchorEl);
|
||||||
|
const importForm = useRef<HTMLInputElement>(null)
|
||||||
|
const [currentImportFileName, setCurrentImportFileName] = useState(null)
|
||||||
|
|
||||||
|
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||||
|
setAnchorEl(event.currentTarget);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setAnchorEl(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleImportButton = () => {
|
||||||
|
if (importForm?.current) {
|
||||||
|
handleClose();
|
||||||
|
importForm.current ? importForm.current.click() : console.log('No File selected');
|
||||||
|
} else {
|
||||||
|
alert('No file selected')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCancelImportButton = () => {
|
||||||
|
importForm.current.value = "";
|
||||||
|
importForm.current.dispatchEvent(new Event("change", { bubbles: true }));
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleImportChange = (event: any) => {
|
||||||
|
if (event.target.files[0]) {
|
||||||
|
setCurrentImportFileName(event.target.files[0].name)
|
||||||
|
} else {
|
||||||
|
setCurrentImportFileName(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleUpload = () => {
|
||||||
|
if (importForm.current?.files.length) {
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append("file", importForm.current?.files[0])
|
||||||
|
axios.post(`master/formularium/import`, formData )
|
||||||
|
.then(response => {
|
||||||
|
handleCancelImportButton();
|
||||||
|
loadDataTableData();
|
||||||
|
setImportResult(response.data)
|
||||||
|
// alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows');
|
||||||
|
})
|
||||||
|
.catch(response => {
|
||||||
|
alert('Looks like something went wrong. Please check your data and try again. ' + response.message)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
alert('No File Selected')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<input type='file' id='file' ref={importForm} style={{ display: 'none' }} onChange={handleImportChange} accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" />
|
||||||
|
{( !currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||||
|
<SearchInput onSearch={applyFilter}/>
|
||||||
|
{/* <h1>kjasndkjandskjasndkjansdkjansd</h1> */}
|
||||||
|
<Button
|
||||||
|
id="import-button"
|
||||||
|
variant='outlined'
|
||||||
|
startIcon={<AddIcon />} sx={{ p: 1.8 }}
|
||||||
|
aria-controls={createMenu ? 'basic-menu' : undefined}
|
||||||
|
aria-haspopup="true"
|
||||||
|
aria-expanded={createMenu ? 'true' : undefined}
|
||||||
|
onClick={handleClick}
|
||||||
|
>
|
||||||
|
Create
|
||||||
|
</Button>
|
||||||
|
<Menu
|
||||||
|
id="import-button"
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
open={createMenu}
|
||||||
|
onClose={handleClose}
|
||||||
|
MenuListProps={{
|
||||||
|
'aria-labelledby': 'basic-button',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem onClick={() => {navigate('/master/formularium/create')} }>Create</MenuItem>
|
||||||
|
<MenuItem onClick={handleImportButton}>Import</MenuItem>
|
||||||
|
<MenuItem onClick={handleClose}>Download Template</MenuItem>
|
||||||
|
</Menu>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{( currentImportFileName && <Stack direction={'row'} spacing={2} sx={{ p: 2 }}>
|
||||||
|
<ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
|
||||||
|
<Button onClick={handleImportButton} fullWidth>{currentImportFileName ?? "No File Selected"}</Button>
|
||||||
|
<Button onClick={handleCancelImportButton} size="small" fullWidth={false} sx={{ p: 1.8 }}><CancelIcon color="error"/></Button>
|
||||||
|
</ButtonGroup>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
id="upload-button"
|
||||||
|
variant='outlined'
|
||||||
|
startIcon={<UploadIcon />} sx={{ p: 1.8 }}
|
||||||
|
onClick={handleUpload}
|
||||||
|
>
|
||||||
|
Upload
|
||||||
|
</Button>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
{( importResult &&
|
||||||
|
<Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
|
||||||
|
<Box sx={{ color: "text.secondary" }}>Last Import Result Report : <a href={importResult.result_file?.url ?? "#"}>{importResult.result_file?.name ?? "-"}</a></Box>
|
||||||
|
</Stack>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Called on every row to map the data to the columns
|
||||||
|
function createData( member: Member ): Member {
|
||||||
|
return {
|
||||||
|
...member,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate the every row of the table
|
||||||
|
function Row(props: { row: ReturnType<typeof createData> }) {
|
||||||
|
const { row } = props;
|
||||||
|
const [open, setOpen] = React.useState(true);
|
||||||
|
|
||||||
|
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.member_id}</TableCell>
|
||||||
|
<TableCell align="left">{row.payor_id}</TableCell>
|
||||||
|
<TableCell align="left">{row.name}</TableCell>
|
||||||
|
<TableCell align="left">{row.nik}</TableCell>
|
||||||
|
<TableCell align="left">{row.nric}</TableCell>
|
||||||
|
|
||||||
|
<TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
|
||||||
|
{/* <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell> */}
|
||||||
|
</TableRow>
|
||||||
|
{/* COLLAPSIBLE ROW */}
|
||||||
|
<TableRow>
|
||||||
|
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={99}>
|
||||||
|
<Collapse in={open} timeout="auto" unmountOnExit>
|
||||||
|
<Box sx={{ borderBottom: 1 }}>
|
||||||
|
<Typography variant="body2" gutterBottom component="div">
|
||||||
|
<Grid ></Grid>
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
</Collapse>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dummy Default Data
|
||||||
|
const [dataTableIsLoading, setDataTableLoading] = useState(true);
|
||||||
|
const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
|
||||||
|
const [dataTableResponseState, setDataTableResponseState] = useState('idle');
|
||||||
|
const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
|
||||||
|
current_page: 1,
|
||||||
|
data: [],
|
||||||
|
path: "",
|
||||||
|
first_page_url: "",
|
||||||
|
last_page: 1,
|
||||||
|
last_page_url: "",
|
||||||
|
next_page_url: "",
|
||||||
|
prev_page_url: "",
|
||||||
|
per_page: 10,
|
||||||
|
from: 0,
|
||||||
|
to: 0,
|
||||||
|
total: 0
|
||||||
|
});
|
||||||
|
const [dataTablePage, setDataTablePage] = useState(5);
|
||||||
|
|
||||||
|
const loadDataTableData = async (appliedFilter : any | null = null) => {
|
||||||
|
setDataTableLoading(true);
|
||||||
|
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
|
||||||
|
const response = await axios.get('/members', { params: filter });
|
||||||
|
|
||||||
|
setDataTableData(response.data.members);
|
||||||
|
setDataTableLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
const headStyle = {
|
||||||
|
fontWeight: 'bold',
|
||||||
|
};
|
||||||
|
|
||||||
|
const applyFilter = async (searchFilter: string) => {
|
||||||
|
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();
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Stack>
|
||||||
|
<ImportForm />
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
{/* The Main Table */}
|
||||||
|
<TableContainer component={Paper}>
|
||||||
|
<Table aria-label="collapsible table">
|
||||||
|
<TableBody>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell style={headStyle} align="left">Detail</TableCell>
|
||||||
|
<TableCell style={headStyle} align="left">MemberID</TableCell>
|
||||||
|
<TableCell style={headStyle} align="left">PayorID</TableCell>
|
||||||
|
<TableCell style={headStyle} align="left">Name</TableCell>
|
||||||
|
<TableCell style={headStyle} align="left">NIK</TableCell>
|
||||||
|
<TableCell style={headStyle} align="left">PlanID</TableCell>
|
||||||
|
<TableCell style={headStyle} align="right" width={100}>Status</TableCell>
|
||||||
|
{/* <TableCell style={headStyle} align="right" width={100}>Action</TableCell> */}
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
|
{dataTableIsLoading ?
|
||||||
|
(
|
||||||
|
<TableBody>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={8} align="center">Loading</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
|
) : (
|
||||||
|
dataTableData.data.length == 0 ?
|
||||||
|
(
|
||||||
|
<TableBody>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={8} align="center">No Data</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
|
) : (
|
||||||
|
<TableBody>
|
||||||
|
{dataTableData.data.map(row => (
|
||||||
|
<Row key={row.id} row={row} />
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
)
|
||||||
|
)}
|
||||||
|
</Table>
|
||||||
|
</TableContainer>
|
||||||
|
|
||||||
|
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
|
||||||
|
</Card>
|
||||||
|
</Stack>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user