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

table member dan table benefit

Browse Source
This commit is contained in:
pajri
2022-12-20 17:48:28 +07:00
parent da14589328
commit 88ad144921
17 changed files with 1365 additions and 499 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
frontend/dashboard/src/pages/Corporates/Benefit/Form.tsx Executable file
View File

@@ -0,0 +1,125 @@
import * as Yup from 'yup';
import { LoadingButton } from '@mui/lab';
import { Box, Card, Grid, Stack, Typography } from '@mui/material';
import { CorporatePlan } from '../../../@types/corporates';
import { FormProvider, RHFSwitch, RHFTextField } from '../../../components/hook-form';
import { useEffect, useMemo } from 'react';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { useSnackbar } from 'notistack';
import { useNavigate, useParams } from 'react-router-dom';
import axios from '../../../utils/axios';
type Props = {
isEdit: boolean;
currentCorporatePlan?: CorporatePlan;
};
export default function CorporatePlanForm({ isEdit, currentCorporatePlan }: Props) {
const { enqueueSnackbar } = useSnackbar();
const navigate = useNavigate();
const { corporate_id } = useParams();
const NewCorporatePlanSchema = Yup.object().shape({
name: Yup.string().required('Name is required'),
code: Yup.string().required('Corporate Code is required'),
});
const defaultValues = useMemo(
() => ({
name: currentCorporatePlan?.name || '',
code: currentCorporatePlan?.code || '',
active: currentCorporatePlan?.active === 1 ? true : false,
}),
[currentCorporatePlan]
);
useEffect(() => {
if (isEdit && currentCorporatePlan) {
reset(defaultValues);
}
if (!isEdit) {
reset(defaultValues);
}
}, [isEdit, currentCorporatePlan]);
const methods = useForm({
resolver: yupResolver(NewCorporatePlanSchema),
defaultValues,
});
const {
reset,
watch,
control,
setValue,
getValues,
setError,
handleSubmit,
formState: { isSubmitting },
} = methods;
const onSubmit = async (data: any) => {
if (!isEdit) {
await axios
.post('/corporates/' + corporate_id + '/divisions', data)
.then((res) => {
enqueueSnackbar('Division created successfully', { variant: 'success' });
})
.then((res) => {
navigate('/corporates/' + corporate_id + '/divisions', { replace: true });
})
.catch(({ response }) => {
if (response.status === 422) {
for (const [key, value] of Object.entries(response.data.errors)) {
setError(key, { message: value[0] });
enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
}
} else {
enqueueSnackbar('Create Failed : ' + response.data.message, { variant: 'error' });
}
});
} else {
await axios
.put('/corporates/' + corporate_id + '/divisions/' + currentCorporatePlan?.id, data)
.then((res) => {
enqueueSnackbar('Division updated successfully', { variant: 'success' });
})
.then((res) => {
navigate('/corporates/' + corporate_id + '/divisions/', { replace: true });
})
.catch(({ response }) => {
enqueueSnackbar('Update Failed : ' + response.data.message, { variant: 'error' });
});
}
};
return (
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
<Box sx={{ margin: 1, pb: 2, pl: 4 }}>
<Grid container>
<Grid item xs={6} sx={{ padding: 2 }}>
<Grid container>
<Stack direction="row" alignItems="center" sx={{ width: '100%' }}>
<Typography variant="subtitle2" sx={{ mr: 2 }}>
ASO/Budget
</Typography>
<RHFTextField name="budget" />
</Stack>
</Grid>
</Grid>
<Grid item xs={6} sx={{ padding: 2 }}>
<Grid container>
<Stack direction="row" alignItems="center" sx={{ width: '100%' }}>
<Typography variant="subtitle2" sx={{ mr: 2 }}>
ASO/Budget
</Typography>
<RHFTextField name="budget" />
</Stack>
</Grid>
</Grid>
</Grid>
</Box>
</FormProvider>
);
}

879
frontend/dashboard/src/pages/Corporates/Benefit/List.tsx
View File

File diff suppressed because it is too large Load Diff

509
frontend/dashboard/src/pages/Corporates/Member/List.tsx
View File

@@ -1,5 +1,33 @@
// @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, Grid } from '@mui/material';
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,
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';
@@ -21,77 +49,85 @@ export default function CorporatePlanList() {
const { themeStretch } = useSettings();
const { corporate_id } = useParams();
const [searchParams, setSearchParams] = useSearchParams();
const [importResult, setImportResult] = useState(null)
const [importResult, setImportResult] = useState(null);
// Dummy Default Data
const [dataTableIsLoading, setDataTableLoading] = React.useState(true);
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 = null) => {
setDataTableLoading(true);
const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
const response = await axios
.get('/corporates/'+corporate_id+'/members', { params: filter })
.get('/corporates/' + corporate_id + '/members', { params: filter })
.catch((response) => {
enqueueSnackbar('Failed getting data. ' + response.message, { variant: 'error' })
enqueueSnackbar('Failed getting data. ' + response.message, { variant: 'error' });
});
// console.log(response.data);
setDataTableLoading(false);
setDataTableData(response.data);
}
};
const applyFilter = async (searchFilter: string) => {
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();
}, [])
}, []);
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%' }}>
<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}
/>
</form>
);
}
@@ -101,8 +137,8 @@ export default function CorporatePlanList() {
// Create Button Menu
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const createMenu = Boolean(anchorEl);
const importPlan = useRef<HTMLInputElement>(null)
const [currentImportFileName, setCurrentImportFileName] = useState(null)
const importPlan = useRef<HTMLInputElement>(null);
const [currentImportFileName, setCurrentImportFileName] = useState(null);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
@@ -117,51 +153,65 @@ export default function CorporatePlanList() {
handleClose();
importPlan.current ? importPlan.current.click() : console.log('No File selected');
} else {
alert('No file selected')
alert('No file selected');
}
}
};
const handleCancelImportButton = () => {
importPlan.current.value = "";
importPlan.current.dispatchEvent(new Event("change", { bubbles: true }));
}
importPlan.current.value = '';
importPlan.current.dispatchEvent(new Event('change', { bubbles: true }));
};
const handleImportChange = (event: any) => {
if (event.target.files[0]) {
setCurrentImportFileName(event.target.files[0].name)
setCurrentImportFileName(event.target.files[0].name);
} else {
setCurrentImportFileName(null);
}
}
};
const handleUpload = () => {
if (importPlan.current?.files.length) {
const formData = new FormData();
formData.append("file", importPlan.current?.files[0])
axios.post(`corporates/${corporate_id}/members/import`, formData )
.then(response => {
formData.append('file', importPlan.current?.files[0]);
axios
.post(`corporates/${corporate_id}/members/import`, formData)
.then((response) => {
handleCancelImportButton();
loadDataTableData();
setImportResult(response.data)
})
.catch(response => {
enqueueSnackbar('Looks like something went wrong. Please check your data and try again. ' + response.message, { variant: 'error' })
setImportResult(response.data);
})
.catch((response) => {
enqueueSnackbar(
'Looks like something went wrong. Please check your data and try again. ' +
response.message,
{ variant: 'error' }
);
});
} else {
enqueueSnackbar('No File Selected', { variant: 'warning' })
enqueueSnackbar('No File Selected', { variant: 'warning' });
}
}
};
return (
<div>
<input type='file' id='file' ref={importPlan} 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
<input
type="file"
id="file"
ref={importPlan}
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 }}
variant="outlined"
startIcon={<AddIcon />}
sx={{ p: 1.8 }}
aria-controls={createMenu ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={createMenu ? 'true' : undefined}
@@ -181,153 +231,268 @@ export default function CorporatePlanList() {
<MenuItem onClick={handleImportButton}>Import</MenuItem>
<MenuItem onClick={handleClose}>Download Template</MenuItem>
</Menu>
</Stack>
</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>
{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>
<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 : <Box sx={{ color: "success.main", display: "inline" }}>{ importResult.total_success_row ?? 0 }</Box> Row Processed, <Box sx={{ color: "error.main", display: "inline" }}>{ importResult.total_failed_row }</Box> Failed, Report : <a href={importResult.result_file?.url ?? "#"}>{importResult.result_file?.name ?? "-"}</a></Box>
</Stack>
{importResult && (
<Stack direction={'row'} sx={{ px: 2, pb: 2 }}>
<Box sx={{ color: 'text.secondary' }}>
Last Import Result :{' '}
<Box sx={{ color: 'success.main', display: 'inline' }}>
{importResult.total_success_row ?? 0}
</Box>{' '}
Row Processed,{' '}
<Box sx={{ color: 'error.main', display: 'inline' }}>
{importResult.total_failed_row}
</Box>{' '}
Failed, 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 {
function createData(member: Member): Member {
return {
...member,
}
};
}
const [columns, setColumns] = React.useState([
{ id: 'member_id', label: 'MemberID', minWidth: 100, align: "left" },
{ id: 'principal_id', label: 'Mapping ID', minWidth: 100, align: "left" },
{ id: 'nik', label: 'NIK', minWidth: 100, align: "left" },
{ id: 'current_policy.policy_number', label: 'Policy Number', minWidth: 100, align: "left" },
{ id: 'effective_date', label: 'Effective Date', minWidth: 100, align: "left" },
{ id: 'name', label: 'Name', minWidth: 100, align: "left" },
{ id: 'nric', label: 'NRIC', minWidth: 100, align: "left" },
{ id: 'email', label: 'E-mail', minWidth: 100, align: "left" },
{ id: 'plan_id', label: 'PlanID', minWidth: 100, align: "left" },
{ id: 'activation_date', label: 'Activation Date', minWidth: 100, align: "right" },
{ id: 'termination_date', label: 'Termination Date', minWidth: 100, align: 'right' },
{ id: 'member_id', label: 'MemberID', minWidth: 100, align: 'left' },
// { id: 'principal_id', label: 'Mapping ID', minWidth: 100, align: 'left' },
// { id: 'nik', label: 'NIK', minWidth: 100, align: 'left' },
// { id: 'current_policy.policy_number', label: 'Policy Number', minWidth: 100, align: 'left' },
{ id: 'effective_date', label: 'Effective Date', minWidth: 100, align: 'left' },
{ id: 'name', label: 'Name', minWidth: 100, align: 'left' },
// { id: 'nric', label: 'NRIC', minWidth: 100, align: 'left' },
// { id: 'email', label: 'E-mail', minWidth: 100, align: 'left' },
{ id: 'plan_id', label: 'PlanID', minWidth: 100, align: 'left' },
{ id: 'activation_date', label: 'Activation Date', minWidth: 100, align: 'left' },
{ id: 'termination_date', label: 'Termination Date', minWidth: 100, align: 'left' },
]);
// Generate the every row of the table
function Row(props: { row: ReturnType<typeof createData> }) {
const { row } = props;
const [open, setOpen] = React.useState(false);
const handleActivate = (model: any, status: string) => {
axios
.put(`/members/${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.member.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>
{/* { columns.map((column, index) =>
<TableCell key={ index } align={ column.align } minwidth={ column.minWidth }>{ row[column.id] ?? '-' }</TableCell>
) } */}
{/* TODO FIX DISPLAY DATA FROM RELATION */}
{/* { id: 'member_id', label: 'MemberID', minWidth: 100, align: "left" },
{ id: 'principal_id', label: 'Mapping ID', minWidth: 100, align: "left" },
{ id: 'nik', label: 'NIK', minWidth: 100, align: "left" },
{ id: 'current_policy.policy_number', label: 'Policy Number', minWidth: 100, align: "left" },
{ id: 'effective_date', label: 'Effective Date', minWidth: 100, align: "left" },
{ id: 'name', label: 'Name', minWidth: 100, align: "left" },
{ id: 'nric', label: 'NRIC', minWidth: 100, align: "left" },
{ id: 'email', label: 'E-mail', minWidth: 100, align: "left" },
{ id: 'plan_id', label: 'PlanID', minWidth: 100, align: "left" },
{ id: 'termination_date', label: 'Termination Date', minWidth: 100, align: 'right' },
{ id: 'activation_date', label: 'Activation Date', minWidth: 100, align: "right" },
*/}
<TableCell align="left">{row.member_id}</TableCell>
<TableCell align="left">{row.principal_id}</TableCell>
<TableCell align="left">{row.employeds[0]?.nik}</TableCell>
<TableCell align="left">{row.current_policy?.policy_id}</TableCell>
<TableCell align="left">{row.current_policy?.start}</TableCell>
<TableCell align="left">{row.name}</TableCell>
<TableCell align="left">{row.nric}</TableCell>
<TableCell align="left">{row.email}</TableCell>
<TableCell align="left">{row.current_plan?.code}</TableCell>
<TableCell align="left">{row.current_policy?.start}</TableCell>
<TableCell align="left">{row.current_policy?.end}</TableCell>
{( row.active ? (<TableCell align="right"><Button variant="outlined" color="success" size="small">Active</Button></TableCell>)
: (<TableCell align="right"><Button variant="outlined" color="error" size="small">Inactive</Button></TableCell>)
)}
<TableCell align="center">
{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"><Button variant="outlined" color="success" size="small">Edit</Button></TableCell> */}
</TableRow>
{/* COLLAPSIBLE ROW */}
<TableRow>
<TableCell></TableCell>
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={30}>
<TableCell />
<TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={15}>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ margin: 1, borderBottom: 1, pb: 2 }}>
<Typography sx={{ fontWeight: '600', mb: 1 }}>Claim History</Typography>
<Grid container>
<Box sx={{ pb: 2 }}>
<Typography sx={{ fontWeight: '600', mb: 1 }}>Detail</Typography>
<Grid container sx={{ pb: 2, mb: 2, borderBottom: 1 }}>
<Grid item xs={6}>
<Grid container>
<Grid item xs={6}>
Requested
Mapping ID
</Grid>
<Grid item xs={6}>
: {row.total_claims.requested}
: {row.principal_id ?? '-'}
</Grid>
<Grid item xs={6}>
Policy Number
</Grid>
<Grid item xs={6}>
: {row.current_policy?.code ?? '-'}
</Grid>
<Grid item xs={6}>
NRIC
</Grid>
<Grid item xs={6}>
: {row.nric ?? '-'}
</Grid>
<Grid item xs={6}>
Pending
NIK
</Grid>
<Grid item xs={6}>
: {row.total_claims.received}
: {row.employeds[0]?.nik ?? '-'}
</Grid>
<Grid item xs={6}>
Email
</Grid>
<Grid item xs={6}>
: {row.email ?? '-'}
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Grid container>
<Grid item xs={6}>
Birth Date
</Grid>
<Grid item xs={6}>
: {row.birth_date ?? '-'}
</Grid>
<Grid item xs={6}>
Gender
</Grid>
<Grid item xs={6}>
: {row.gender ?? '-'}
</Grid>
<Grid item xs={6}>
Martial Status
</Grid>
<Grid item xs={6}>
: {row.marital_status ?? '-'}
</Grid>
<Grid item xs={6}>
Language
</Grid>
<Grid item xs={6}>
: {row.language ?? '-'}
</Grid>
<Grid item xs={6}>
Race
</Grid>
<Grid item xs={6}>
: {row.race ?? '-'}
</Grid>
</Grid>
</Grid>
</Grid>
<Typography sx={{ fontWeight: '600', mb: 1 }}>Claim History</Typography>
<Grid container sx={{ pb: 2, mb: 2, borderBottom: 1 }}>
<Grid item xs={6}>
<Grid container>
<Grid item xs={6}>
Requested
</Grid>
<Grid item xs={6}>
: {row.total_claims?.requested}
</Grid>
<Grid item xs={6}>
Approved
Pending
</Grid>
<Grid item xs={6}>
: {row.total_claims.approved}
: {row.total_claims?.received}
</Grid>
<Grid item xs={6}>
Declined
Approved
</Grid>
<Grid item xs={6}>
: {row.total_claims.declined}
</Grid>
<Grid item xs={6}>
Paid
</Grid>
<Grid item xs={6}>
: {row.total_claims.paid}
: {row.total_claims?.approved}
</Grid>
<Grid item xs={6}>
Declined
</Grid>
<Grid item xs={6}>
: {row.total_claims?.declined}
</Grid>
<Grid item xs={6}>
Paid
</Grid>
<Grid item xs={6}>
: {row.total_claims?.paid}
</Grid>
</Grid>
</Grid>
</Grid>
@@ -360,48 +525,54 @@ export default function CorporatePlanList() {
<Stack>
<ImportForm />
<Card>
<Card>
{/* The Main Table */}
<TableContainer component={Paper}>
<Table aria-label="collapsible table">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left" />
{ columns.map((column, index) => (
<TableCell style={headStyle} key={index} align={column.align}>{column.label}</TableCell>
)) }
<TableCell style={headStyle} align="right">Status</TableCell>
<TableCell style={headStyle} align="right">Action</TableCell>
{columns.map((column, index) => (
<TableCell style={headStyle} key={index} align={column.align}>
{column.label}
</TableCell>
))}
<TableCell style={headStyle} align="center">
Status
</TableCell>
<TableCell style={headStyle} align="center">
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, index) => (
<Row key={index} row={row} />
))}
</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, index) => (
<Row key={index} row={row} />
))}
</TableBody>
)}
</Table>
</TableContainer>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange}/>
</Card>
<BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
</Card>
</Stack>
);
}