delete file unnecessary
This commit is contained in:
Muhammad Fajar
@@ -1,32 +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="Create Obat">
|
|
||||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
|
||||||
<Typography variant="h3" component="h1" paragraph>
|
|
||||||
Create Obat
|
|
||||||
</Typography>
|
|
||||||
<Typography>qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</Typography>
|
|
||||||
</Container>
|
|
||||||
</Page>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,87 +0,0 @@
|
|||||||
import * as Yup from 'yup';
|
|
||||||
import { yupResolver } from '@hookform/resolvers/yup';
|
|
||||||
import { Card, Collapse, Divider, Grid, Stack, Typography } from '@mui/material';
|
|
||||||
import { useForm } from 'react-hook-form';
|
|
||||||
import { useParams } from 'react-router-dom';
|
|
||||||
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
|
|
||||||
import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from '../../components/hook-form';
|
|
||||||
import Page from '../../components/Page';
|
|
||||||
import useSettings from '../../hooks/useSettings';
|
|
||||||
import { useMemo, useState } from 'react';
|
|
||||||
import Form from './Form';
|
|
||||||
|
|
||||||
export default function Divisions() {
|
|
||||||
const { themeStretch } = useSettings();
|
|
||||||
|
|
||||||
const [isEdit, setIsEdit] = useState(false);
|
|
||||||
|
|
||||||
const [currentFormularium, setCurrentFormularium] = useState({});
|
|
||||||
|
|
||||||
const NewDivisionSchema = Yup.object().shape({
|
|
||||||
name: Yup.string().required('Name is required'),
|
|
||||||
code: Yup.string().required('Corporate Code is required'),
|
|
||||||
active: Yup.boolean().required('Corporate Status is required'),
|
|
||||||
});
|
|
||||||
|
|
||||||
const defaultValues = useMemo(
|
|
||||||
() => ({
|
|
||||||
code: '',
|
|
||||||
}),
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
const methods = useForm({
|
|
||||||
resolver: yupResolver(NewDivisionSchema),
|
|
||||||
defaultValues,
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
|
||||||
reset,
|
|
||||||
watch,
|
|
||||||
control,
|
|
||||||
setValue,
|
|
||||||
getValues,
|
|
||||||
setError,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { isSubmitting },
|
|
||||||
} = methods;
|
|
||||||
|
|
||||||
const onSubmit = async (data: any) => {
|
|
||||||
console.log(data);
|
|
||||||
};
|
|
||||||
|
|
||||||
const pageTitle = 'Create Formularium';
|
|
||||||
return (
|
|
||||||
<Page title={pageTitle}>
|
|
||||||
<HeaderBreadcrumbs
|
|
||||||
heading={pageTitle}
|
|
||||||
links={[
|
|
||||||
{
|
|
||||||
name: 'Master',
|
|
||||||
href: '/master',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Formularium',
|
|
||||||
href: '/master/formularium/',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Create',
|
|
||||||
href: '/master/formularium/create/',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item xs={12}>
|
|
||||||
<Card sx={{ p: 2 }}>
|
|
||||||
<Form
|
|
||||||
isSubmitting={isSubmitting}
|
|
||||||
isEdit={isEdit}
|
|
||||||
currentFormularium={currentFormularium}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</Page>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,265 +0,0 @@
|
|||||||
import * as Yup from 'yup';
|
|
||||||
import { useSnackbar } from 'notistack';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
||||||
// form
|
|
||||||
import { useForm } from 'react-hook-form';
|
|
||||||
import { yupResolver } from '@hookform/resolvers/yup';
|
|
||||||
// @mui
|
|
||||||
import { styled } from '@mui/material/styles';
|
|
||||||
import { LoadingButton } from '@mui/lab';
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
ButtonGroup,
|
|
||||||
Card,
|
|
||||||
FormHelperText,
|
|
||||||
Grid,
|
|
||||||
Stack,
|
|
||||||
Typography,
|
|
||||||
} from '@mui/material';
|
|
||||||
|
|
||||||
import CancelIcon from '@mui/icons-material/Cancel';
|
|
||||||
|
|
||||||
// components
|
|
||||||
import {
|
|
||||||
FormProvider,
|
|
||||||
RHFTextField,
|
|
||||||
RHFRadioGroup,
|
|
||||||
RHFUploadAvatar,
|
|
||||||
RHFSwitch,
|
|
||||||
RHFEditor,
|
|
||||||
RHFDatepicker,
|
|
||||||
RHFMultiCheckbox,
|
|
||||||
RHFCheckbox,
|
|
||||||
RHFCustomMultiCheckbox,
|
|
||||||
} from '../../components/hook-form';
|
|
||||||
import { Corporate } from '../../@types/corporates';
|
|
||||||
import axios from '../../utils/axios';
|
|
||||||
import { fCurrency } from '../../utils/formatNumber';
|
|
||||||
|
|
||||||
const LabelStyle = styled(Typography)(({ theme }) => ({
|
|
||||||
...theme.typography.subtitle2,
|
|
||||||
color: theme.palette.text.secondary,
|
|
||||||
marginBottom: theme.spacing(1),
|
|
||||||
}));
|
|
||||||
|
|
||||||
interface FormValuesProps extends Partial<Corporate> {
|
|
||||||
taxes: boolean;
|
|
||||||
inStock: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
isEdit: boolean;
|
|
||||||
currentFormularium?: Corporate;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function FormulariumForm({ isEdit, currentFormularium }: Props) {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
// const [ errors, setErrors ] = useState<{ [key: string]: string }>({});
|
|
||||||
|
|
||||||
const { enqueueSnackbar } = useSnackbar();
|
|
||||||
|
|
||||||
const NewCorporateSchema = Yup.object().shape({
|
|
||||||
name: Yup.string().required('Name is required'),
|
|
||||||
// code: Yup.string().required('Corporate Code is required'),
|
|
||||||
// file: Yup.boolean().required('Corporate Status is required'),
|
|
||||||
});
|
|
||||||
|
|
||||||
const defaultValues = useMemo(
|
|
||||||
() => ({
|
|
||||||
code: currentFormularium?.code || '',
|
|
||||||
name: currentFormularium?.name || '',
|
|
||||||
}),
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
[currentFormularium]
|
|
||||||
);
|
|
||||||
|
|
||||||
const methods = useForm<FormValuesProps>({
|
|
||||||
resolver: yupResolver(NewCorporateSchema),
|
|
||||||
defaultValues,
|
|
||||||
});
|
|
||||||
|
|
||||||
const {
|
|
||||||
reset,
|
|
||||||
watch,
|
|
||||||
control,
|
|
||||||
setValue,
|
|
||||||
getValues,
|
|
||||||
setError,
|
|
||||||
handleSubmit,
|
|
||||||
formState: { isSubmitting },
|
|
||||||
} = methods;
|
|
||||||
|
|
||||||
const values = watch();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (isEdit && currentFormularium) {
|
|
||||||
reset(defaultValues);
|
|
||||||
}
|
|
||||||
if (!isEdit) {
|
|
||||||
reset(defaultValues);
|
|
||||||
}
|
|
||||||
|
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
}, [isEdit, currentFormularium]);
|
|
||||||
|
|
||||||
const onSubmit = async (data: FormValuesProps) => {
|
|
||||||
try {
|
|
||||||
if (!isEdit) {
|
|
||||||
const response = await axios.post('/master/formulariums', data);
|
|
||||||
} else {
|
|
||||||
const response = await axios.put(
|
|
||||||
'/master/formulariums/' + currentFormularium?.id ?? '',
|
|
||||||
data
|
|
||||||
);
|
|
||||||
}
|
|
||||||
reset();
|
|
||||||
enqueueSnackbar(
|
|
||||||
!isEdit ? 'Formularium Created Successfully!' : 'Formularium Udpated Successfully!',
|
|
||||||
{ variant: 'success' }
|
|
||||||
);
|
|
||||||
navigate('/master/formularium');
|
|
||||||
} catch (error: any) {
|
|
||||||
if (error && error.response.status === 422) {
|
|
||||||
for (const [key, value] of Object.entries(error.response.data.errors)) {
|
|
||||||
setError(key, { message: value[0] });
|
|
||||||
enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const ascent = document?.querySelector('ascent');
|
|
||||||
if (ascent != null) {
|
|
||||||
ascent.innerHTML = '';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDrop = useCallback(
|
|
||||||
(acceptedFiles) => {
|
|
||||||
setValue(
|
|
||||||
'logo',
|
|
||||||
acceptedFiles.map((file: Blob | MediaSource) =>
|
|
||||||
Object.assign(file, {
|
|
||||||
preview: URL.createObjectURL(file),
|
|
||||||
})
|
|
||||||
)
|
|
||||||
);
|
|
||||||
},
|
|
||||||
[setValue]
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleRemove = (file: File | string) => {
|
|
||||||
setValue('logo', null);
|
|
||||||
};
|
|
||||||
|
|
||||||
const linking_rules_checkbox_name = 'linking_rules';
|
|
||||||
const linking_tools = [
|
|
||||||
{
|
|
||||||
value: 'nrik',
|
|
||||||
label: 'No. KTP',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'nik',
|
|
||||||
label: 'Nomor Induk Karyawan (NIK)',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'member_id',
|
|
||||||
label: 'Member ID',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'phone',
|
|
||||||
label: 'Nomor Telepon',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'email',
|
|
||||||
label: 'E-Mail',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const importForm = useRef<HTMLInputElement>(null);
|
|
||||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
|
||||||
const [currentImportFileName, setCurrentImportFileName] = useState<string | null>(null);
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
|
||||||
<Stack spacing={3}>
|
|
||||||
<Typography variant="h6">Formularium Detail</Typography>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<RHFTextField name="code" label="Code" />
|
|
||||||
{!currentFormularium?.id && (
|
|
||||||
<Typography variant="caption">Will be generated if empty</Typography>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<RHFTextField name="name" label="Name" />
|
|
||||||
|
|
||||||
<Typography variant="h6">Formularium Drug List Import</Typography>
|
|
||||||
|
|
||||||
<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"
|
|
||||||
/>
|
|
||||||
<ButtonGroup variant="outlined" aria-label="outlined button group" fullWidth>
|
|
||||||
<Button onClick={handleImportButton} fullWidth>
|
|
||||||
{currentImportFileName ?? 'No File Selected'}
|
|
||||||
</Button>
|
|
||||||
{currentImportFileName && (
|
|
||||||
<Button
|
|
||||||
onClick={handleCancelImportButton}
|
|
||||||
size="small"
|
|
||||||
fullWidth={false}
|
|
||||||
sx={{ p: 1.8 }}
|
|
||||||
>
|
|
||||||
<CancelIcon color="error" />
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</ButtonGroup>
|
|
||||||
|
|
||||||
<LoadingButton
|
|
||||||
type="submit"
|
|
||||||
variant="contained"
|
|
||||||
size="large"
|
|
||||||
fullWidth={true}
|
|
||||||
loading={isSubmitting}
|
|
||||||
>
|
|
||||||
{!isEdit ? 'Save New Corporate' : 'Save Update'}
|
|
||||||
</LoadingButton>
|
|
||||||
</Stack>
|
|
||||||
</FormProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
import { Card, Grid } from "@mui/material";
|
|
||||||
import { useParams } from "react-router-dom";
|
|
||||||
import HeaderBreadcrumbs from "../../components/HeaderBreadcrumbs";
|
|
||||||
import Page from "../../components/Page";
|
|
||||||
import useSettings from "../../hooks/useSettings";
|
|
||||||
import List from "./List";
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default function Drugs() {
|
|
||||||
const { themeStretch } = useSettings();
|
|
||||||
|
|
||||||
const { corporate_id } = useParams();
|
|
||||||
|
|
||||||
const pageTitle = 'Formularium';
|
|
||||||
return (
|
|
||||||
<Page title={ pageTitle }>
|
|
||||||
|
|
||||||
<HeaderBreadcrumbs
|
|
||||||
heading={ pageTitle }
|
|
||||||
links={[
|
|
||||||
{
|
|
||||||
name: 'Master',
|
|
||||||
href: '/master',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Formularium',
|
|
||||||
href: '/master/formulariums',
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<List />
|
|
||||||
</Card>
|
|
||||||
</Page>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,314 +0,0 @@
|
|||||||
// @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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,80 +0,0 @@
|
|||||||
import merge from 'lodash/merge';
|
|
||||||
import ReactApexChart from 'react-apexcharts';
|
|
||||||
// @mui
|
|
||||||
import { styled } from '@mui/material/styles';
|
|
||||||
import { Card, Typography, Stack } from '@mui/material';
|
|
||||||
// utils
|
|
||||||
import { fCurrency, fPercent } from '../../utils/formatNumber';
|
|
||||||
// components
|
|
||||||
import Iconify from '../../components/Iconify';
|
|
||||||
import BaseOptionChart from '../../components/chart/BaseOptionChart';
|
|
||||||
|
|
||||||
// ----------------------------------------------------------------------
|
|
||||||
|
|
||||||
const RootStyle = styled(Card)(({ theme }) => ({
|
|
||||||
boxShadow: 'none',
|
|
||||||
padding: theme.spacing(3),
|
|
||||||
color: theme.palette.primary.darker,
|
|
||||||
backgroundColor: theme.palette.primary.lighter,
|
|
||||||
}));
|
|
||||||
|
|
||||||
// ----------------------------------------------------------------------
|
|
||||||
|
|
||||||
const INITIAL = 500000000
|
|
||||||
const TOTAL = 257907000;
|
|
||||||
const PERCENT = -3;
|
|
||||||
const CHART_DATA = [{ data: [100, 99, 99, 85, 74, 57, 54, 51] }];
|
|
||||||
|
|
||||||
export default function SomethingUsage() {
|
|
||||||
const chartOptions = merge(BaseOptionChart(), {
|
|
||||||
chart: { sparkline: { enabled: true } },
|
|
||||||
xaxis: { labels: { show: true } },
|
|
||||||
yaxis: { labels: { show: false } },
|
|
||||||
stroke: { width: 4 },
|
|
||||||
legend: { show: false },
|
|
||||||
grid: { show: false },
|
|
||||||
tooltip: {
|
|
||||||
marker: { show: false },
|
|
||||||
y: {
|
|
||||||
formatter: (seriesName: string) => (seriesName) + "%",
|
|
||||||
title: {
|
|
||||||
formatter: () => '',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
fill: { gradient: { opacityFrom: 0, opacityTo: 0 } },
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<RootStyle>
|
|
||||||
<Stack direction="row" justifyContent="space-between" sx={{ mb: 3 }}>
|
|
||||||
<div>
|
|
||||||
<Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
|
|
||||||
{fCurrency(INITIAL)}
|
|
||||||
</Typography>
|
|
||||||
<Typography sx={{ typography: 'subtitle2' }}>Remaining Balance</Typography>
|
|
||||||
<Typography sx={{ typography: 'h3' }}>{fCurrency(TOTAL)}</Typography>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<Stack direction="row" alignItems="center" justifyContent="flex-end" sx={{ mb: 0.6 }}>
|
|
||||||
<Iconify
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
icon={PERCENT >= 0 ? 'eva:trending-up-fill' : 'eva:trending-down-fill'}
|
|
||||||
/>
|
|
||||||
<Typography variant="subtitle2" component="span" sx={{ ml: 0.5 }}>
|
|
||||||
{PERCENT > 0 && '+'}
|
|
||||||
{fPercent(PERCENT)}
|
|
||||||
</Typography>
|
|
||||||
</Stack>
|
|
||||||
<Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
|
|
||||||
than last month
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</Stack>
|
|
||||||
|
|
||||||
<ReactApexChart type="area" series={CHART_DATA} options={chartOptions} height={100} />
|
|
||||||
</RootStyle>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user