fix dashboard
This commit is contained in:
Muhammad Fajar
@@ -23,23 +23,6 @@ const itemList = [
|
|||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
const { themeStretch } = useSettings();
|
const { themeStretch } = useSettings();
|
||||||
|
|
||||||
// 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 (
|
return (
|
||||||
<Page title="Dashboard">
|
<Page title="Dashboard">
|
||||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||||
@@ -48,10 +31,10 @@ export default function Dashboard() {
|
|||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
<Grid container spacing={2}>
|
<Grid container spacing={2}>
|
||||||
<Grid item xs={6} lg={6} md={12}>
|
<Grid item xs={12} lg={6} md={12}>
|
||||||
<CardNotification data={itemList} />
|
<CardNotification data={itemList} />
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={6} lg={6} md={12}>
|
<Grid item xs={12} lg={6} md={12}>
|
||||||
<CardBalance />
|
<CardBalance />
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} lg={12} md={12}>
|
<Grid item xs={12} lg={12} md={12}>
|
||||||
|
|||||||
@@ -1,373 +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,
|
|
||||||
Autocomplete,
|
|
||||||
} 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';
|
|
||||||
import Iconify from '../../components/Iconify';
|
|
||||||
|
|
||||||
const options = [
|
|
||||||
{ label: 'The Shawshank Redemption', value: 1994 },
|
|
||||||
{ label: 'The Godfather', year: 1972 },
|
|
||||||
{ label: 'The Godfather: Part II', year: 1974 },
|
|
||||||
{ label: 'The Dark Knight', year: 2008 },
|
|
||||||
{ label: '12 Angry Men', year: 1957 },
|
|
||||||
{ label: "Schindler's List", year: 1993 },
|
|
||||||
{ label: 'Pulp Fiction', year: 1994 },
|
|
||||||
];
|
|
||||||
|
|
||||||
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 [value, setValue] = useState<string | null>(options[0]);
|
|
||||||
const [inputValue, setInputValue] = 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') ?? '');
|
|
||||||
console.log(value, inputValue);
|
|
||||||
}, [searchParams, value, inputValue]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
|
|
||||||
<Stack direction="row" spacing={2}>
|
|
||||||
<Autocomplete
|
|
||||||
value={value}
|
|
||||||
onChange={(event: any, newValue: string | null) => {
|
|
||||||
setValue(newValue);
|
|
||||||
}}
|
|
||||||
inputValue={inputValue}
|
|
||||||
onInputChange={(event, newInputValue) => {
|
|
||||||
setInputValue(newInputValue);
|
|
||||||
}}
|
|
||||||
id="controllable-states-demo"
|
|
||||||
options={options}
|
|
||||||
sx={{ width: 300 }}
|
|
||||||
renderInput={(params) => <TextField {...params} label="Division" />}
|
|
||||||
/>
|
|
||||||
<TextField
|
|
||||||
id="search-input"
|
|
||||||
ref={searchInput}
|
|
||||||
label="Search"
|
|
||||||
variant="outlined"
|
|
||||||
fullWidth
|
|
||||||
onChange={handleSearchChange}
|
|
||||||
value={searchText}
|
|
||||||
/>
|
|
||||||
</Stack>
|
|
||||||
</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 (
|
|
||||||
<Stack direction="row" spacing={2} padding={2}>
|
|
||||||
<SearchInput onSearch={applyFilter} />
|
|
||||||
<Button
|
|
||||||
id="import-button"
|
|
||||||
variant="outlined"
|
|
||||||
startIcon={<Iconify icon="material-symbols:download-rounded" />}
|
|
||||||
sx={{ paddingY: '15px', paddingX: '22px', flex: '10%' }}
|
|
||||||
component="label"
|
|
||||||
>
|
|
||||||
Import
|
|
||||||
<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"
|
|
||||||
/>
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
id="import-button"
|
|
||||||
variant="contained"
|
|
||||||
startIcon={<AddIcon />}
|
|
||||||
sx={{ paddingY: '15px', paddingX: '22px', flex: '15%' }}
|
|
||||||
onClick={handleClick}
|
|
||||||
>
|
|
||||||
Add Data
|
|
||||||
</Button>
|
|
||||||
</Stack>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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>
|
|
||||||
<Card>
|
|
||||||
<ImportForm />
|
|
||||||
|
|
||||||
{/* The Main Table */}
|
|
||||||
<TableContainer component={Paper} sx={{ paddingX: 1, borderRadius: 2 }}>
|
|
||||||
<Table aria-label="collapsible table">
|
|
||||||
<TableBody>
|
|
||||||
<TableRow sx={{ backgroundColor: '#F4F6F8' }}>
|
|
||||||
<TableCell style={headStyle} align="left">
|
|
||||||
Member ID
|
|
||||||
</TableCell>
|
|
||||||
<TableCell style={headStyle} align="center">
|
|
||||||
Name
|
|
||||||
</TableCell>
|
|
||||||
<TableCell style={headStyle} align="center">
|
|
||||||
Divisi
|
|
||||||
</TableCell>
|
|
||||||
<TableCell style={headStyle} align="center">
|
|
||||||
Limit
|
|
||||||
</TableCell>
|
|
||||||
<TableCell style={headStyle} align="center">
|
|
||||||
Status
|
|
||||||
</TableCell>
|
|
||||||
<TableCell style={headStyle} align="right">
|
|
||||||
{' '}
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableBody>
|
|
||||||
{dataTableIsLoading ? (
|
|
||||||
<TableBody>
|
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={6} align="center">
|
|
||||||
Loading
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
</TableBody>
|
|
||||||
) : dataTableData.data.length === 0 ? (
|
|
||||||
<TableBody>
|
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={6} 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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -14,12 +14,14 @@ import {
|
|||||||
IconButton,
|
IconButton,
|
||||||
Card,
|
Card,
|
||||||
Grid,
|
Grid,
|
||||||
|
Autocomplete,
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import { visuallyHidden } from '@mui/utils';
|
import { visuallyHidden } from '@mui/utils';
|
||||||
|
import { Add as AddIcon } from '@mui/icons-material';
|
||||||
/* ---------------------------------- axios --------------------------------- */
|
/* ---------------------------------- axios --------------------------------- */
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
/* ---------------------------------- react --------------------------------- */
|
/* ---------------------------------- react --------------------------------- */
|
||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useRef, useState } from 'react';
|
||||||
/* -------------------------------- component ------------------------------- */
|
/* -------------------------------- component ------------------------------- */
|
||||||
import Iconify from '../../components/Iconify';
|
import Iconify from '../../components/Iconify';
|
||||||
import BaseTablePagination from '../../components/BaseTablePagination';
|
import BaseTablePagination from '../../components/BaseTablePagination';
|
||||||
@@ -177,6 +179,14 @@ export default function TableList() {
|
|||||||
};
|
};
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/* ----------------------------- Field Container ---------------------------- */
|
||||||
|
|
||||||
|
/* ----------------------------- division field ----------------------------- */
|
||||||
|
const optionDivisions = ['All'];
|
||||||
|
|
||||||
|
const [value, setValue] = useState<string | null>(optionDivisions[0]);
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
/* ------------------------------ Search field ------------------------------ */
|
/* ------------------------------ Search field ------------------------------ */
|
||||||
const [searchText, setSearchText] = useState('');
|
const [searchText, setSearchText] = useState('');
|
||||||
|
|
||||||
@@ -194,6 +204,89 @@ export default function TableList() {
|
|||||||
};
|
};
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/* ------------------------------ import button ----------------------------- */
|
||||||
|
const [currentImportFileName, setCurrentImportFileName] = useState(null);
|
||||||
|
const importForm = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
|
const handleImportChange = (event: any) => {
|
||||||
|
if (event.target.files[0]) {
|
||||||
|
setCurrentImportFileName(event.target.files[0].name);
|
||||||
|
} else {
|
||||||
|
setCurrentImportFileName(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/* ------------------------------ create button ----------------------------- */
|
||||||
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
||||||
|
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||||
|
setAnchorEl(event.currentTarget);
|
||||||
|
};
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
const FieldContainer = () => (
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
<Grid item xs={12} lg={3} xl={2}>
|
||||||
|
<Autocomplete
|
||||||
|
disablePortal
|
||||||
|
options={optionDivisions}
|
||||||
|
value={value}
|
||||||
|
onChange={(event: any, newValue: string | null) => {
|
||||||
|
console.log(newValue);
|
||||||
|
setValue(newValue);
|
||||||
|
}}
|
||||||
|
renderInput={(params) => <TextField {...params} label="Division" />}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} lg={5} xl={6}>
|
||||||
|
<form onSubmit={handleSearchSubmit}>
|
||||||
|
<TextField
|
||||||
|
id="search-input"
|
||||||
|
label="Search"
|
||||||
|
variant="outlined"
|
||||||
|
onChange={handleSearch}
|
||||||
|
value={searchText}
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} lg={2} xl={2}>
|
||||||
|
<Button
|
||||||
|
id="import-button"
|
||||||
|
variant="outlined"
|
||||||
|
startIcon={<Iconify icon="material-symbols:download-rounded" />}
|
||||||
|
component="label"
|
||||||
|
fullWidth
|
||||||
|
sx={{ height: '100%' }}
|
||||||
|
>
|
||||||
|
Import
|
||||||
|
<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"
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={12} lg={2} xl={2}>
|
||||||
|
<Button
|
||||||
|
id="import-button"
|
||||||
|
variant="contained"
|
||||||
|
startIcon={<AddIcon />}
|
||||||
|
onClick={handleClick}
|
||||||
|
fullWidth
|
||||||
|
sx={{ height: '100%' }}
|
||||||
|
>
|
||||||
|
Add Data
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
/* ---------------------------- table pagination ---------------------------- */
|
/* ---------------------------- table pagination ---------------------------- */
|
||||||
|
|
||||||
/* ------------------------ button change pagination ------------------------ */
|
/* ------------------------ button change pagination ------------------------ */
|
||||||
@@ -261,16 +354,7 @@ export default function TableList() {
|
|||||||
<Grid container>
|
<Grid container>
|
||||||
{/* Field 1 */}
|
{/* Field 1 */}
|
||||||
<Grid item xs={12} paddingX="24px" paddingY="20px">
|
<Grid item xs={12} paddingX="24px" paddingY="20px">
|
||||||
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
|
<FieldContainer />
|
||||||
<TextField
|
|
||||||
id="search-input"
|
|
||||||
label="Search"
|
|
||||||
variant="outlined"
|
|
||||||
fullWidth
|
|
||||||
onChange={handleSearch}
|
|
||||||
value={searchText}
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
</Grid>
|
</Grid>
|
||||||
{/* End Field 1 */}
|
{/* End Field 1 */}
|
||||||
{/* Field 2 */}
|
{/* Field 2 */}
|
||||||
|
|||||||
Reference in New Issue
Block a user