Base Template
This commit is contained in:
@@ -1,11 +1,13 @@
|
||||
// @mui
|
||||
import { Button, Container, Typography } from '@mui/material';
|
||||
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';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
@@ -18,30 +20,47 @@ export default function Dashboard() {
|
||||
axios.get('/user')
|
||||
};
|
||||
|
||||
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>
|
||||
<Typography gutterBottom>
|
||||
Curabitur turpis. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc,
|
||||
vitae euismod ligula urna in dolor. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit
|
||||
id, lorem. Phasellus blandit leo ut odio. Vestibulum ante ipsum primis in faucibus orci
|
||||
luctus et ultrices posuere cubilia Curae; Fusce id purus. Aliquam lorem ante, dapibus in,
|
||||
viverra quis, feugiat a, tellus. In consectetuer turpis ut velit. Aenean posuere, tortor
|
||||
sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus.
|
||||
Vestibulum suscipit nulla quis orci. Nam commodo suscipit quam. Sed a libero.
|
||||
</Typography>
|
||||
<Typography>
|
||||
Praesent ac sem eget est egestas volutpat. Phasellus viverra nulla ut metus varius
|
||||
laoreet. Curabitur ullamcorper ultricies nisi. Ut non enim eleifend felis pretium feugiat.
|
||||
Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Fusce vel dui. Quisque
|
||||
libero metus, condimentum nec, tempor a, commodo mollis, magna. In enim justo, rhoncus ut,
|
||||
imperdiet a, venenatis vitae, justo. Cras dapibus.
|
||||
</Typography>
|
||||
<Button onClick={loadSomething}>Something</Button>
|
||||
<Button onClick={logout}>Logout</Button>
|
||||
|
||||
<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>
|
||||
);
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
// @mui
|
||||
import { Button, Container, Typography } 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 { Link } from 'react-router-dom';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function PageOne() {
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
const { logout } = useAuth();
|
||||
|
||||
const loadSomething = () => {
|
||||
console.log('Loading Something')
|
||||
}
|
||||
|
||||
return (
|
||||
<Page title="Obat">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Typography variant="h3" component="h1" paragraph>
|
||||
Daftar Obat
|
||||
</Typography>
|
||||
<Typography>askdnkasndka jsndkajsndkajsdnkajsndk jansdkasjdnkjansd</Typography>
|
||||
<Button onClick={loadSomething}>Something</Button>
|
||||
<Link to='/medicines/create'>asdasdasd</Link>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
319
frontend/dashboard/src/pages/Members/Index.tsx
Normal file
319
frontend/dashboard/src/pages/Members/Index.tsx
Normal file
@@ -0,0 +1,319 @@
|
||||
// @mui
|
||||
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
|
||||
import Page from '../../components/Page';
|
||||
import axios from '../../utils/axios';
|
||||
import useAuth from '../../hooks/useAuth';
|
||||
import { Link } from 'react-router-dom';
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Theme, useTheme } from '@mui/material/styles';
|
||||
|
||||
export default function Members() {
|
||||
const { themeStretch } = useSettings();
|
||||
|
||||
const { logout } = useAuth();
|
||||
|
||||
const loadSomething = () => {
|
||||
console.log('Loading Something')
|
||||
}
|
||||
|
||||
type Member = {
|
||||
id: number;
|
||||
code: string;
|
||||
nik: string;
|
||||
name: string;
|
||||
plan_code: string;
|
||||
number_of_families: number;
|
||||
number_of_claim: number;
|
||||
active: boolean;
|
||||
history: any[];
|
||||
}
|
||||
|
||||
function createData( member: Member ): Member {
|
||||
return {
|
||||
...member,
|
||||
history: [
|
||||
{
|
||||
date: '2020-01-05',
|
||||
customerId: '11091700',
|
||||
amount: 3,
|
||||
},
|
||||
{
|
||||
date: '2020-01-02',
|
||||
customerId: 'Anonymous',
|
||||
amount: 1,
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
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="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>
|
||||
<TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>
|
||||
</TableRow>
|
||||
<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 [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'}>
|
||||
<Typography variant="h3" component="h1" paragraph>
|
||||
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>
|
||||
|
||||
<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}>
|
||||
<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">Name</TableCell>
|
||||
<TableCell style={headStyle} align="right">NIK</TableCell>
|
||||
<TableCell style={headStyle} align="right">PlanID</TableCell>
|
||||
<TableCell style={headStyle} align="right">Claim (time)</TableCell>
|
||||
<TableCell style={headStyle} align="right">Family (person)</TableCell>
|
||||
<TableCell style={headStyle} align="right">Status</TableCell>
|
||||
</TableRow>
|
||||
</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>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
@@ -71,18 +71,21 @@ export default function Login() {
|
||||
<Page title="Login">
|
||||
<RootStyle>
|
||||
<HeaderStyle>
|
||||
<Logo />
|
||||
<Logo sx={{ width: 150, height: 150 }} />
|
||||
{smUp && (
|
||||
<Typography variant="body2" sx={{ mt: { md: -2 } }}>
|
||||
Don’t have an account? {''}
|
||||
<Link variant="subtitle2" component={RouterLink} to={PATH_AUTH.register}>
|
||||
Get started
|
||||
Has problem with your account? {''}
|
||||
<Link variant="subtitle2" component={RouterLink} to="#" onClick={(e) => {
|
||||
window.location.href = "mailto:admin@linksehat.com";
|
||||
e.preventDefault();
|
||||
}}>
|
||||
Contact Us
|
||||
</Link>
|
||||
</Typography>
|
||||
)}
|
||||
</HeaderStyle>
|
||||
|
||||
{mdUp && (
|
||||
{/* {mdUp && (
|
||||
<SectionStyle>
|
||||
<Typography variant="h3" sx={{ px: 5, mt: 10, mb: 5 }}>
|
||||
Hi, Welcome Back
|
||||
@@ -94,14 +97,14 @@ export default function Login() {
|
||||
alt="login"
|
||||
/>
|
||||
</SectionStyle>
|
||||
)}
|
||||
)} */}
|
||||
|
||||
<Container maxWidth="sm">
|
||||
<ContentStyle>
|
||||
<Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
|
||||
<Box sx={{ flexGrow: 1 }}>
|
||||
<Typography variant="h4" gutterBottom>
|
||||
Sign in to Minimal
|
||||
Sign in to LinkSehat
|
||||
</Typography>
|
||||
<Typography sx={{ color: 'text.secondary' }}>Enter your details below.</Typography>
|
||||
</Box>
|
||||
@@ -119,7 +122,7 @@ export default function Login() {
|
||||
|
||||
<LoginForm />
|
||||
|
||||
{!smUp && (
|
||||
{false && !smUp && (
|
||||
<Typography variant="body2" align="center" sx={{ mt: 3 }}>
|
||||
Don’t have an account?{' '}
|
||||
<Link variant="subtitle2" component={RouterLink} to={PATH_AUTH.register}>
|
||||
|
||||
Reference in New Issue
Block a user