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

dashboard table, alarm center table

Browse Source
This commit is contained in:
Muhammad Fajar
2022-12-02 15:31:50 +07:00
parent e83a6784f3
commit 3dc3c474eb
13 changed files with 938 additions and 607 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

3
frontend/client-portal/src/components/TablePagination.tsx → frontend/client-portal/src/components/BaseTablePagination.tsx
View File

@@ -10,9 +10,10 @@ export default function BaseTablePagination({
onRowsPerPageChange,
}: TablePaginationProps) {
return (
<Box sx={{ m: 2 }} display="flex" justifyContent="flex-end">
<Box>
<TablePagination
component="div"
rowsPerPageOptions={[10, 25]}
count={count}
page={page}
onPageChange={onPageChange}

50
frontend/client-portal/src/hooks/useMap.ts Normal file
View File

@@ -0,0 +1,50 @@
import { useCallback, useState } from 'react'
export type MapOrEntries<K, V> = Map<K, V> | [K, V][]
// Public interface
export interface Actions<K, V> {
set: (key: K, value: V) => void
setAll: (entries: MapOrEntries<K, V>) => void
remove: (key: K) => void
reset: Map<K, V>['clear']
}
// We hide some setters from the returned map to disable autocompletion
type Return<K, V> = [Omit<Map<K, V>, 'set' | 'clear' | 'delete'>, Actions<K, V>]
function useMap<K, V>(
initialState: MapOrEntries<K, V> = new Map(),
): Return<K, V> {
const [map, setMap] = useState(new Map(initialState))
const actions: Actions<K, V> = {
set: useCallback((key, value) => {
setMap(prev => {
const copy = new Map(prev)
copy.set(key, value)
return copy
})
}, []),
setAll: useCallback(entries => {
setMap(() => new Map(entries))
}, []),
remove: useCallback(key => {
setMap(prev => {
const copy = new Map(prev)
copy.delete(key)
return copy
})
}, []),
reset: useCallback(() => {
setMap(() => new Map())
}, []),
}
return [map, actions]
}
export default useMap

5
frontend/client-portal/src/layouts/dashboard/navbar/NavbarVertical.tsx
View File

@@ -16,7 +16,6 @@ import Scrollbar from '../../../components/Scrollbar';
import { NavSectionVertical } from '../../../components/nav-section';
//
import navConfig from './NavConfig';
import NavbarDocs from './NavbarDocs';
import NavbarAccount from './NavbarAccount';
import CollapseButton from './CollapseButton';
@@ -76,7 +75,7 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
<Stack direction="row" alignItems="center" justifyContent="space-between">
<Stack direction="row" alignItems="center">
<Logo />
<Typography ml={3}>PRIME CENTER</Typography>
<Typography ml={3}>Client Portal</Typography>
</Stack>
<CollapseButton onToggleCollapse={onToggleCollapse} collapseClick={collapseClick} />
</Stack>
@@ -92,8 +91,6 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
<NavSectionVertical navConfig={navConfig} isCollapse={isCollapse} />
<Box sx={{ flexGrow: 1 }} />
{!isCollapse && <NavbarDocs />}
</Scrollbar>
);

8
frontend/client-portal/src/pages/AlarmCenter/Index.tsx
View File

@@ -1,7 +1,7 @@
/* ---------------------------------- react --------------------------------- */
import { useState, SyntheticEvent } from 'react';
/* ---------------------------------- @mui ---------------------------------- */
import { Box, Tabs, Tab, Container, Grid, Card, Typography } from '@mui/material';
import { Box, Tabs, Tab, Container, Grid, Card } from '@mui/material';
import { styled } from '@mui/material/styles';
/* ------------------------------- components ------------------------------- */
import Page from '../../components/Page';
@@ -43,11 +43,7 @@ function TabPanel(props: TabPanelProps) {
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Box>
<Typography>{children}</Typography>
</Box>
)}
{value === index && <Box>{children}</Box>}
</div>
);
}

375
frontend/client-portal/src/pages/AlarmCenter/List.tsx
View File

@@ -1,4 +1,4 @@
// @mui
/* ---------------------------------- @mui ---------------------------------- */
import {
Paper,
Table,
@@ -9,101 +9,322 @@ import {
TableRow,
TextField,
Stack,
Button,
TableSortLabel,
Box,
} from '@mui/material';
// hooks
import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
// components
import axios from '../../utils/axios';
import BasePagination from '../../components/BasePagination';
import { visuallyHidden } from '@mui/utils';
/* ---------------------------------- axios --------------------------------- */
import axios from 'axios';
/* ---------------------------------- react --------------------------------- */
import { useEffect, useState } from 'react';
/* -------------------------------- component ------------------------------- */
import Iconify from '../../components/Iconify';
import BaseTablePagination from '../../components/BaseTablePagination';
/* ---------------------------------- hooks --------------------------------- */
import useMap from '../../hooks/useMap';
/* ---------------------------------- theme --------------------------------- */
import palette from '../../theme/palette';
/* ---------------------------------- types --------------------------------- */
type PaginationTableProps = {
current_page: number;
from: number;
last_page: number;
links: [];
path: string;
per_page: number;
to: number;
total: number;
};
type DataTableProps = {
name: string;
member_id: string;
service: string;
start_date: string;
end_date: string;
status: string;
};
/* -------------------------------------------------------------------------- */
/* -------------------------- enchanced table head -------------------------- */
type Order = 'asc' | 'desc';
interface HeadCell {
id: string;
label: string;
}
const headCells: readonly HeadCell[] = [
{
id: 'name',
label: 'Name',
},
{
id: 'member_id',
label: 'Member ID',
},
{
id: 'service',
label: 'Service',
},
{
id: 'start_date',
label: 'Start Date',
},
{
id: 'end_date',
label: 'End Date',
},
{
id: 'status',
label: 'Status',
},
];
interface EnhancedTableProps {
onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
order: Order;
orderBy: string;
}
function EnhancedTableHead(props: EnhancedTableProps) {
const { order, orderBy, onRequestSort } = props;
const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
onRequestSort(event, property);
};
return (
<TableHead>
<TableRow>
<TableCell align="center">No</TableCell>
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
sortDirection={orderBy === headCell.id ? order : false}
align="center"
>
<TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : 'asc'}
onClick={createSortHandler(headCell.id)}
>
{headCell.label}
{orderBy === headCell.id ? (
<Box component="span" sx={visuallyHidden}>
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
</Box>
) : null}
</TableSortLabel>
</TableCell>
))}
</TableRow>
</TableHead>
);
}
/* -------------------------------------------------------------------------- */
export default function List() {
const [searchParams, setSearchParams] = useSearchParams();
const [order, setOrder] = useState<Order>('asc');
const [orderBy, setOrderBy] = useState('name');
const [customSearchParams, setCustomSearchParams] = useMap<string, any>();
const [isLoading, setIsLoading] = useState(true);
const [dataTable, setDataTable] = useState([]);
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
current_page: 0,
from: 0,
last_page: 0,
links: [],
path: '',
per_page: 0,
to: 0,
total: 0,
});
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') ?? '');
}, []);
return (
<form onSubmit={handleSearchSubmit} style={{ width: '100%', padding: '20px 24px' }}>
<TextField
id="search-input"
ref={searchInput}
label="Search"
variant="outlined"
fullWidth
onChange={handleSearchChange}
value={searchText}
/>
</form>
);
}
const headStyle = {
fontWeight: 'bold',
/* ------------------------------- handle sort ------------------------------ */
const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
const params = Object.fromEntries([
...customSearchParams.entries(),
['order', isAsc ? 'desc' : 'asc'],
['orderBy', property],
]);
setIsLoading(true);
await new Promise((resolve) => setTimeout(resolve, 500));
loadDataTable(params);
setIsLoading(false);
};
/* -------------------------------------------------------------------------- */
/* ------------------------------ Search field ------------------------------ */
const [searchText, setSearchText] = useState('');
const handleSearch = (event: any) => {
setSearchText(event.target.value);
};
const handleSearchSubmit = async (event: any) => {
event.preventDefault();
const params = Object.fromEntries([...customSearchParams.entries(), ['search', searchText]]);
setIsLoading(true);
await new Promise((resolve) => setTimeout(resolve, 500));
loadDataTable(params);
setIsLoading(false);
};
/* -------------------------------------------------------------------------- */
/* --------------------------- Load Data Table API -------------------------- */
const loadDataTable = async (appliedParams: any | null = null) => {
setIsLoading(true);
const params = appliedParams
? appliedParams
: Object.fromEntries([
...customSearchParams.entries(),
['order', order],
['orderBy', orderBy],
]);
const response = await axios.get('http://localhost:8001/api/alarm-center', { params: params });
setDataTable(response.data.data);
setPaginationTable(response.data.meta);
setRowsPerPage(response.data.meta.per_page);
setIsLoading(false);
};
/* -------------------------------------------------------------------------- */
/* ------------------------ button change pagination ------------------------ */
const onPageChangeHandle = async (event: unknown, newPage: number) => {
const params = Object.fromEntries([...customSearchParams.entries(), ['page', newPage + 1]]);
setPage(newPage);
setIsLoading(true);
await new Promise((resolve) => setTimeout(resolve, 500));
loadDataTable(params);
setIsLoading(false);
setCustomSearchParams.set('page', newPage + 1);
};
/* -------------------------------------------------------------------------- */
/* ----------------------- row page per limit on click ---------------------- */
const onRowsPerPageChangeHandle = async (event: React.ChangeEvent<HTMLInputElement>) => {
setPage(0);
const params = Object.fromEntries([
...customSearchParams.entries(),
['page', 0],
['per_page', parseInt(event.target.value, 10)],
]);
setRowsPerPage(parseInt(event.target.value, 10));
setIsLoading(true);
await new Promise((resolve) => setTimeout(resolve, 500));
loadDataTable(params);
setIsLoading(false);
setCustomSearchParams.set('per_page', parseInt(event.target.value, 10));
};
/* -------------------------------------------------------------------------- */
useEffect(() => {
loadDataTable();
}, []);
return (
<Stack>
{/* Search */}
<SearchInput />
<form onSubmit={handleSearchSubmit} style={{ width: '100%', padding: '20px 24px' }}>
<TextField
id="search-input"
label="Search"
variant="outlined"
fullWidth
onChange={handleSearch}
value={searchText}
/>
</form>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableHead>
<TableRow>
<TableCell style={headStyle} align="left">
No
</TableCell>
<TableCell style={headStyle} align="left">
Name
</TableCell>
<TableCell style={headStyle} align="left">
Member ID
</TableCell>
<TableCell style={headStyle} align="left">
Service
</TableCell>
<TableCell style={headStyle} align="left">
Start Date
</TableCell>
<TableCell style={headStyle} align="left">
End Date
</TableCell>
<TableCell style={headStyle} align="right" width={100}>
Status
</TableCell>
</TableRow>
</TableHead>
<EnhancedTableHead order={order} orderBy={orderBy} onRequestSort={handleRequestSort} />
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">
No Data
</TableCell>
</TableRow>
{isLoading ? (
<TableRow>
<TableCell colSpan={8} align="center">
Loading . . .
</TableCell>
</TableRow>
) : dataTable.length >= 1 ? (
dataTable.map((row: DataTableProps, index) => (
<TableRow key={index}>
<TableCell align="center">{paginationTable.from + index++}</TableCell>
<TableCell align="center">{row.name}</TableCell>
<TableCell align="center">{row.member_id}</TableCell>
<TableCell align="center">{row.service}</TableCell>
<TableCell align="center">{row.start_date}</TableCell>
<TableCell align="center">{row.end_date}</TableCell>
<TableCell align="center">
{row.status.toLowerCase() === 'done' ? (
<Button
startIcon={<Iconify icon="ic:round-check" />}
sx={{
backgroundColor: palette.light.grey[300],
color: palette.light.grey[800],
paddingX: 1.5,
paddingY: 1,
'&:hover': {
backgroundColor: palette.light.grey[400],
color: palette.light.grey[800],
},
}}
>
{row.status}
</Button>
) : (
<Button
startIcon={<Iconify icon="fa6-solid:clock" />}
sx={{
backgroundColor: '#CD7B2E',
color: '#FFFF',
paddingX: 1.5,
paddingY: 1,
'&:hover': {
backgroundColor: '#BF6919',
color: '#FFFF',
},
}}
>
{row.status}
</Button>
)}
</TableCell>
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={8} align="center">
No Data Found
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
{/* Pagination */}
{/* <BasePagination onPageChange={handlePageChange} /> */}
<BaseTablePagination
count={paginationTable.total}
onPageChange={onPageChangeHandle}
page={page}
rowsPerPage={rowsPerPage}
onRowsPerPageChange={onRowsPerPageChangeHandle}
/>
</Stack>
);
}

4
frontend/client-portal/src/pages/Dashboard/Dashboard.tsx
View File

@@ -7,6 +7,7 @@ import Page from '../../components/Page';
// theme
import CardNotification from '../../sections/dashboard/CardNotification';
import CardBalance from '../../sections/dashboard/CardBalance';
import TableList from '../../sections/dashboard/TableList';
import List from './List';
// ----------------------------------------------------------------------
@@ -55,7 +56,8 @@ export default function Dashboard() {
<CardBalance />
</Grid>
<Grid item xs={12} lg={12} md={12}>
<List />
<TableList />
{/* <List /> */}
</Grid>
</Grid>
</Container>

13
frontend/client-portal/src/pages/Dashboard/List.tsx
View File

@@ -47,7 +47,15 @@ import BasePagination from '../../components/BasePagination';
import { Member } from '../../@types/member';
import Iconify from '../../components/Iconify';
const options = ['All', 'Option 2'];
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();
@@ -77,7 +85,8 @@ export default function List() {
useEffect(() => {
// Trigger First Search
setSearchText(searchParams.get('search') ?? '');
}, [searchParams]);
console.log(value, inputValue);
}, [searchParams, value, inputValue]);
return (
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>

401
frontend/client-portal/src/pages/Dashboard/ListTest.tsx
View File

@@ -1,401 +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 ListTest() {
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>
);
}

379
frontend/client-portal/src/sections/dashboard/TableList.tsx Executable file
View File

@@ -0,0 +1,379 @@
/* ---------------------------------- @mui ---------------------------------- */
import {
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Button,
TableSortLabel,
Box,
IconButton,
Card,
Grid,
Autocomplete,
} from '@mui/material';
import { visuallyHidden } from '@mui/utils';
/* ---------------------------------- axios --------------------------------- */
import axios from 'axios';
/* ---------------------------------- react --------------------------------- */
import { useEffect, useState } from 'react';
/* -------------------------------- component ------------------------------- */
import Iconify from '../../components/Iconify';
import BaseTablePagination from '../../components/BaseTablePagination';
/* ---------------------------------- hooks --------------------------------- */
import useMap from '../../hooks/useMap';
/* ---------------------------------- theme --------------------------------- */
import palette from '../../theme/palette';
import { useSearchParams } from 'react-router-dom';
/* ---------------------------------- types --------------------------------- */
type PaginationTableProps = {
current_page: number;
from: number;
last_page: number;
links: [];
path: string;
per_page: number;
to: number;
total: number;
};
type DataTableProps = {
name: string;
member_id: string;
service: string;
start_date: string;
end_date: string;
status: string;
};
type Order = 'asc' | 'desc';
interface HeadCell {
id: string;
align: string;
label: string;
isSort: boolean;
}
interface EnhancedTableProps {
onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
order: Order;
orderBy: string;
}
/* -------------------------------------------------------------------------- */
/* -------------------------- enchanced table head -------------------------- */
const headCells: readonly HeadCell[] = [
{
id: 'member_id',
align: 'left',
label: 'Member ID',
isSort: false,
},
{
id: 'name',
align: 'center',
label: 'Name',
isSort: false,
},
{
id: 'division',
align: 'center',
label: 'Divisi',
isSort: false,
},
{
id: 'limit',
align: 'center',
label: 'Limit',
isSort: false,
},
{
id: 'status',
align: 'center',
label: 'Status',
isSort: false,
},
];
function EnhancedTableHead({ order, orderBy, onRequestSort }: EnhancedTableProps) {
const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
onRequestSort(event, property);
};
return (
<TableHead>
<TableRow>
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
sortDirection={orderBy === headCell.id ? order : false}
// @ts-ignore
align={headCell.align}
sx={{ padding: 2 }}
>
{headCell.isSort ? (
<TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : 'asc'}
onClick={createSortHandler(headCell.id)}
>
{headCell.label}
{orderBy === headCell.id ? (
<Box component="span" sx={visuallyHidden}>
{order === 'desc' ? 'sorted descending' : 'sorted ascending'}
</Box>
) : null}
</TableSortLabel>
) : (
headCell.label
)}
</TableCell>
))}
<TableCell align="center">{''}</TableCell>
</TableRow>
</TableHead>
);
}
/* -------------------------------------------------------------------------- */
export default function TableList() {
const [order, setOrder] = useState<Order>('asc');
const [orderBy, setOrderBy] = useState('name');
const [customSearchParams, setCustomSearchParams] = useSearchParams();
const [isLoading, setIsLoading] = useState(true);
const [dataTable, setDataTable] = useState([]);
const [dataDivision, setDataDivision] = useState([]);
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [appliedParams, setAppliedParams] = useState({});
const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
current_page: 0,
from: 0,
last_page: 0,
links: [],
path: '',
per_page: 0,
to: 0,
total: 0,
});
/* ------------------------------- handle sort ------------------------------ */
const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
const isAsc = orderBy === property && order === 'asc';
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
const params = Object.fromEntries([
...customSearchParams.entries(),
['order', isAsc ? 'desc' : 'asc'],
['orderBy', property],
]);
setAppliedParams(params);
};
/* -------------------------------------------------------------------------- */
/* ------------------------------ Search field ------------------------------ */
const [searchText, setSearchText] = useState('');
const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchText(event.target.value);
};
const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
setIsLoading(true);
const params = Object.fromEntries([
...customSearchParams.entries(),
['page', 0],
['search', searchText],
]);
await new Promise((resolve) => setTimeout(resolve, 500));
setAppliedParams(params);
setIsLoading(false);
};
/* -------------------------------------------------------------------------- */
/* ---------------------------- table pagination ---------------------------- */
/* ------------------------ button change pagination ------------------------ */
const onPageChangeHandle = async (
event: React.MouseEvent<HTMLButtonElement> | null,
newPage: number
) => {
setIsLoading(true);
const params = Object.fromEntries([
...customSearchParams.entries(),
['page', newPage + 1],
['order', order],
['orderBy', orderBy],
]);
setPage(newPage);
await new Promise((resolve) => setTimeout(resolve, 500));
setAppliedParams(params);
setIsLoading(false);
// setCustomSearchParams.set('page', newPage + 1);
};
/* -------------------------------------------------------------------------- */
/* --------------------------- row page per limit --------------------------- */
const onRowsPerPageChangeHandle = async (event: React.ChangeEvent<HTMLInputElement>) => {
setIsLoading(true);
setPage(0);
const params = Object.fromEntries([
...customSearchParams.entries(),
['page', 0],
['order', order],
['orderBy', orderBy],
['per_page', parseInt(event.target.value, 10)],
]);
setRowsPerPage(parseInt(event.target.value, 10));
await new Promise((resolve) => setTimeout(resolve, 500));
setAppliedParams(params);
setIsLoading(false);
// setCustomSearchParams.set('per_page', parseInt(event.target.value, 10));
};
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
useEffect(() => {
(async () => {
setIsLoading(true);
const params =
Object.keys(appliedParams).length !== 0
? appliedParams
: Object.fromEntries([
...customSearchParams.entries(),
// ['order', order],
// ['orderBy', orderBy],
]);
const response = await axios.get('http://localhost:8001/api/dashboard', {
params: params,
});
const division = await axios.get('http://localhost:8001/api/division');
setDataDivision(division.data);
setDataTable(response.data.data);
setPaginationTable(response.data.meta);
setRowsPerPage(response.data.meta.per_page);
setIsLoading(false);
})();
}, [appliedParams, customSearchParams, order, orderBy]);
return (
<Card>
<Grid container>
{/* Field 1 */}
<Grid item xs={12} paddingX="24px" paddingY="20px">
<form onSubmit={handleSearchSubmit} style={{ width: '100%' }}>
<TextField
id="search-input"
label="Search"
variant="outlined"
fullWidth
onChange={handleSearch}
value={searchText}
/>
</form>
</Grid>
{/* End Field 1 */}
{/* Field 2 */}
<Grid item xs={12}>
<TableContainer component={Paper}>
<Table aria-label="collapsible table" size="small">
<EnhancedTableHead
order={order}
orderBy={orderBy}
onRequestSort={handleRequestSort}
/>
<TableBody>
{isLoading ? (
<TableRow>
<TableCell colSpan={6} align="center">
Loading . . .
</TableCell>
</TableRow>
) : dataTable.length >= 1 ? (
dataTable.map((row: DataTableProps, index) => (
<TableRow key={index}>
<TableCell align="left">{row.member_id}</TableCell>
<TableCell align="center">{row.name}</TableCell>
<TableCell align="center">{row.service}</TableCell>
<TableCell align="center">{row.start_date}</TableCell>
<TableCell align="center">
{row.status.toLowerCase() === 'active' ? (
<Button
sx={{
backgroundColor: 'rgba(84, 214, 44, 0.16)',
color: palette.dark.success.dark,
paddingX: 1.5,
paddingY: 1,
'&:hover': {
backgroundColor: palette.light.grey[400],
color: palette.light.grey[800],
},
}}
>
{row.status}
</Button>
) : (
<Button
sx={{
backgroundColor: '#CD7B2E',
color: '#FFFF',
paddingX: 1.5,
paddingY: 1,
'&:hover': {
backgroundColor: '#BF6919',
color: '#FFFF',
},
}}
>
{row.status}
</Button>
)}
</TableCell>
<TableCell align="right">
<IconButton>
<Iconify icon="ic:baseline-more-vert" />
</IconButton>
</TableCell>
</TableRow>
))
) : (
<TableRow>
<TableCell colSpan={6} align="center">
No Data Found
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</TableContainer>
{/* Pagination */}
<BaseTablePagination
count={paginationTable.total}
onPageChange={onPageChangeHandle}
page={page}
rowsPerPage={rowsPerPage}
onRowsPerPageChange={onRowsPerPageChangeHandle}
/>
</Grid>
{/* End Field 2 */}
</Grid>
</Card>
);
}

10
frontend/client-portal/src/theme/overrides/Table.ts
View File

@@ -4,9 +4,19 @@ import { Theme } from '@mui/material/styles';
export default function Table(theme: Theme) {
return {
MuiTableHead: {
styleOverrides: {
root: {
'.MuiTableRow-root': {
borderBottom: 'none',
},
},
},
},
MuiTableRow: {
styleOverrides: {
root: {
borderBottom: '1px solid rgba(241, 243, 244, 1)',
'&.Mui-selected': {
backgroundColor: theme.palette.action.selected,
'&:hover': {

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

@@ -1,5 +1,30 @@
// @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, Stack } from '@mui/material';
import {
Box,
Button,
Card,
Collapse,
Container,
FormControl,
Grid,
IconButton,
InputLabel,
MenuItem,
OutlinedInput,
Paper,
Select,
SelectChangeEvent,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Typography,
Badge,
Stack,
} from '@mui/material';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import PublishIcon from '@mui/icons-material/Publish';
@@ -10,7 +35,7 @@ import useSettings from '../../hooks/useSettings';
import Page from '../../components/Page';
import axios from '../../utils/axios';
import useAuth from '../../hooks/useAuth';
import { Link , NavLink as RouterLink, useSearchParams } from 'react-router-dom';
import { Link, NavLink as RouterLink, useSearchParams } from 'react-router-dom';
import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
import { Theme, useTheme } from '@mui/material/styles';
import { Corporate } from '../../@types/corporates';
@@ -25,10 +50,10 @@ export default function Corporates() {
const [searchParams, setSearchParams] = useSearchParams();
// Called on every row to map the data to the columns
function createData( corporate: Corporate ): Corporate {
function createData(corporate: Corporate): Corporate {
return {
...corporate,
}
};
}
// Dummy Default Data
@@ -36,19 +61,19 @@ export default function Corporates() {
const [dataTableData, setDataTableData] = React.useState<LaravelPaginatedData>({
current_page: 1,
data: [],
path: "",
first_page_url: "",
path: '',
first_page_url: '',
last_page: 1,
last_page_url: "",
next_page_url: "",
prev_page_url: "",
last_page_url: '',
next_page_url: '',
prev_page_url: '',
per_page: 10,
from: 0,
to: 0,
total: 0
total: 0,
});
const loadDataTableData = async (appliedFilter : any | null = null) => {
const loadDataTableData = async (appliedFilter: any | null = null) => {
setDataTableLoading(true);
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
const response = await axios.get('/corporates', { params: filter });
@@ -56,31 +81,28 @@ export default function Corporates() {
setDataTableLoading(false);
setDataTableData(response.data);
}
};
const applyFilter = async (searchFilter: any) => {
await loadDataTableData({ "search" : searchFilter });
setSearchParams({ "search" : searchFilter });
}
await loadDataTableData({ search: searchFilter });
setSearchParams({ search: searchFilter });
};
const handlePageChange = (event : ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]);
const handlePageChange = (event: ChangeEvent, value: number) => {
const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
loadDataTableData(filter);
setSearchParams(filter);
}
};
useEffect(() => {
loadDataTableData();
}, [])
}, []);
const headStyle = {
fontWeight: 'bold',
};
// FILTER SELECT
// FILTER SELECT
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
@@ -92,13 +114,7 @@ export default function Corporates() {
},
};
const names = [
'PLAN001',
'PLAN002',
'PLAN003',
'PLAN004',
'PLAN005',
];
const names = ['PLAN001', 'PLAN002', 'PLAN003', 'PLAN004', 'PLAN005'];
function getStyles(name: string, personName: string[], theme: Theme) {
return {
fontWeight:
@@ -107,7 +123,7 @@ export default function Corporates() {
: theme.typography.fontWeightMedium,
};
}
const theme = useTheme();
const [planIdFilter, setPlanIdFilter] = React.useState<string[]>([]);
@@ -117,7 +133,7 @@ export default function Corporates() {
} = event;
setPlanIdFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
typeof value === 'string' ? value.split(',') : value
);
};
@@ -128,37 +144,45 @@ export default function Corporates() {
} = event;
setStatusFilter(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
typeof value === 'string' ? value.split(',') : value
);
};
// END FILTER SELECT
// Component Search Input
function SearchInput(props: any) {
// SEARCH
// SEARCH
const searchInput = useRef<HTMLInputElement>(null);
const [searchText, setSearchText] = useState("");
const [searchText, setSearchText] = useState('');
const handleSearchChange = (event: any) => {
const newSearchText = event.target.value ?? ''
const newSearchText = event.target.value ?? '';
setSearchText(newSearchText);
}
};
const handleSubmit = (event: any) => {
event.preventDefault();
props.onSearch(searchText); // Trigger to Parent
}
};
useEffect(() => {
useEffect(() => {
// console.log('Search Input: useEffect')
setSearchText(searchParams.get('search') ?? '');
}, [searchParams])
}, [searchParams]);
return (
<form onSubmit={handleSubmit} style={{ width: '100%' }}>
<Stack direction={'row'} spacing={2} sx={{ mb: 2 }}>
<TextField id="search-input" ref={searchInput} label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchText}/>
<TextField
id="search-input"
ref={searchInput}
label="Search"
variant="outlined"
fullWidth
onChange={handleSearchChange}
value={searchText}
/>
{/* <Grid item>
<TextField id="outlined-basic" label="Search" variant="outlined" sx={{ width: 400 }}/>
</Grid>
@@ -214,17 +238,21 @@ export default function Corporates() {
</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' />
{/* <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> */}
<Link to={"/corporates/create"}>
<Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }} >Create</ Button>
</Link>
<Link to={'/corporates/create'}>
<Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }}>
Create
</Button>
</Link>
{/* </Grid> */}
</Stack>
<Button type='submit' sx={{ display: 'none' }}>Search</Button>
<Button type="submit" sx={{ display: 'none' }}>
Search
</Button>
</form>
);
}
@@ -236,50 +264,80 @@ export default function Corporates() {
const [open, setOpen] = React.useState(false);
const handleActivate = (model: any, status: string) => {
axios.put(`/corporates/${row.id}/activation`, {
// service_code: service.service_code,
active: status == 'active'
})
.then((res) => {
setDataTableData({
...dataTableData,
data: dataTableData.data.map((model) => {
let updatedModel = model
if (row.id == model.id) {
updatedModel.active = res.data.corporate.active
}
return updatedModel
})
axios
.put(`/corporates/${row.id}/activation`, {
// service_code: service.service_code,
active: status == 'active',
})
})
.catch((error) => {
// console.log('asdasd', error.response.data.message)
enqueueSnackbar(error.response.data.message ?? error.message ?? 'Failed Processing Request', { variant: 'error' });
})
}
.then((res) => {
setDataTableData({
...dataTableData,
data: dataTableData.data.map((model) => {
let updatedModel = model;
if (row.id == model.id) {
updatedModel.active = res.data.corporate.active;
}
return updatedModel;
}),
});
})
.catch((error) => {
// console.log('asdasd', error.response.data.message)
enqueueSnackbar(
error.response.data.message ?? error.message ?? 'Failed Processing Request',
{ variant: 'error' }
);
});
};
return (
<React.Fragment>
<TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
<TableCell>
<IconButton
aria-label="expand row"
size="small"
onClick={() => setOpen(!open)}
>
<IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
{open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
</IconButton>
</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">
{( row.active == 1 && <Button variant="outlined" color="success" size="small" onClick={() => { handleActivate(row, 'inactive') }}>Active</Button> )}
{( row.active != 1 && <Button variant="outlined" color="error" size="small" onClick={() => { handleActivate(row, 'active') }}>Inactive</Button> )}
{row.active == 1 && (
<Button
variant="outlined"
color="success"
size="small"
onClick={() => {
handleActivate(row, 'inactive');
}}
>
Active
</Button>
)}
{row.active != 1 && (
<Button
variant="outlined"
color="error"
size="small"
onClick={() => {
handleActivate(row, 'active');
}}
>
Inactive
</Button>
)}
</TableCell>
<TableCell align="right">
<Stack direction="row" justifyContent="flex-end" spacing={1}>
<Link to={"/corporates/" + row.id + "/edit"}><Button variant="outlined" color="primary" size="small">Edit</Button></ Link>
<Link to={"/corporates/" + row.id + ""}><Button variant="outlined" color="primary" size="small">Config</Button></ Link>
<Link to={'/corporates/' + row.id + '/edit'}>
<Button variant="outlined" color="primary" size="small">
Edit
</Button>
</Link>
<Link to={'/corporates/' + row.id + ''}>
<Button variant="outlined" color="primary" size="small">
Config
</Button>
</Link>
</Stack>
</TableCell>
</TableRow>
@@ -335,7 +393,10 @@ export default function Corporates() {
Minimal Deposit
</Grid>
<Grid item xs={6}>
: {row.current_policy ? fCurrency(row.current_policy?.minimal_deposit_net) : '-'}
:{' '}
{row.current_policy
? fCurrency(row.current_policy?.minimal_deposit_net)
: '-'}
</Grid>
</Grid>
</Grid>
@@ -365,7 +426,6 @@ export default function Corporates() {
</Grid>
</Grid>
</Grid>
<Typography sx={{ fontWeight: '600', mb: 1, mt: 2 }}>Sub Corporate</Typography>
<Grid container>
@@ -380,7 +440,6 @@ export default function Corporates() {
</Grid>
</Grid>
</Grid>
</Box>
</Collapse>
</TableCell>
@@ -403,47 +462,55 @@ export default function Corporates() {
]}
/>
<SearchInput onSearch={applyFilter}/>
<SearchInput onSearch={applyFilter} />
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left" width={50} />
<TableCell style={headStyle} align="left">Code</TableCell>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell style={headStyle} align="left" width={100}>Status</TableCell>
<TableCell style={headStyle} align="right" width={100}>Action</TableCell>
</TableRow>
</TableBody>
{dataTableIsLoading ?
(
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left" width={50} />
<TableCell style={headStyle} align="left">
Code
</TableCell>
<TableCell style={headStyle} align="left">
Name
</TableCell>
<TableCell style={headStyle} align="left" 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>
<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>
) : (
dataTableData.data.length == 0 ?
(
<TableBody>
<TableRow>
<TableCell colSpan={8} align="center">No Data</TableCell>
</TableRow>
</TableBody>
) : (
<TableBody>
{dataTableData.data.map(row => (
<Row key={row.code} row={row} />
))}
</TableBody>
)
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
<TableBody>
{dataTableData.data.map((row) => (
<Row key={row.code} row={row} />
))}
</TableBody>
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
</Card>
</Container>
</Page>

BIN
storage/.DS_Store vendored Normal file
View File

Binary file not shown.