Dashboard Client - Portal
This commit is contained in:
ivan-sim
@@ -32,18 +32,16 @@ export default function NavSectionVertical({
|
||||
<Box {...other}>
|
||||
{navConfig.map((group, index) => (
|
||||
<List key={index} disablePadding sx={{ px: 2 }}>
|
||||
{group.subheader && (
|
||||
<ListSubheaderStyle
|
||||
key={index}
|
||||
sx={{
|
||||
...(isCollapse && {
|
||||
opacity: 0,
|
||||
}),
|
||||
}}
|
||||
>
|
||||
{group.subheader}
|
||||
</ListSubheaderStyle>
|
||||
)}
|
||||
<ListSubheaderStyle
|
||||
key={index}
|
||||
sx={{
|
||||
...(isCollapse && {
|
||||
opacity: 0,
|
||||
}),
|
||||
}}
|
||||
>
|
||||
{group.subheader}
|
||||
</ListSubheaderStyle>
|
||||
|
||||
{group.items.map((list) => (
|
||||
<NavListRoot key={list.title} list={list} isCollapse={isCollapse} />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
// @mui
|
||||
import { styled, useTheme } from '@mui/material/styles';
|
||||
@@ -15,9 +15,11 @@ import Logo from '../../../components/Logo';
|
||||
import Scrollbar from '../../../components/Scrollbar';
|
||||
import { NavSectionVertical } from '../../../components/nav-section';
|
||||
//
|
||||
import navConfig from './NavConfig';
|
||||
// import navConfig from './NavConfig';
|
||||
import NavbarAccount from './NavbarAccount';
|
||||
import CollapseButton from './CollapseButton';
|
||||
import useAuth from '@/hooks/useAuth';
|
||||
import axios from '@/utils/axios';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
@@ -42,10 +44,54 @@ export default function NavbarVertical({ isOpenSidebar, onCloseSidebar }: Props)
|
||||
|
||||
const { pathname } = useLocation();
|
||||
|
||||
const {user} = useAuth()
|
||||
|
||||
const isDesktop = useResponsive('up', 'lg');
|
||||
|
||||
const { isCollapse, collapseClick, collapseHover, onToggleCollapse, onHoverEnter, onHoverLeave } =
|
||||
useCollapseDrawer();
|
||||
const [navConfig, setNavConfig] = useState([]);
|
||||
useEffect(() => {
|
||||
const fetchNavConfig = async () => {
|
||||
try {
|
||||
const response = await axios.get('/navigations');
|
||||
const data = response.data.items;
|
||||
|
||||
// Pastikan user dan user.permissions terdefinisi dan merupakan array
|
||||
const userPermissions = user.user?.permissions?.map(permission => permission.name) || [];
|
||||
|
||||
// Fungsi untuk memeriksa apakah pengguna memiliki izin untuk item tertentu
|
||||
const hasPermission = (permission) => {
|
||||
return userPermissions.includes(permission);
|
||||
};
|
||||
|
||||
// Filter data berdasarkan izin pengguna
|
||||
const filteredNavConfig = data.map(section => {
|
||||
if (section.children && section.children.length > 0) {
|
||||
// Cek apakah ada satu atau lebih children yang memiliki izin
|
||||
const filteredChildren = section.children.filter(child => hasPermission(child.permission));
|
||||
|
||||
if (filteredChildren.length > 0) {
|
||||
return {
|
||||
...section,
|
||||
children: filteredChildren
|
||||
};
|
||||
} else {
|
||||
return null; // Lewati bagian yang tidak memiliki children dengan izin
|
||||
}
|
||||
}
|
||||
// Jika tidak ada children, cek izin untuk section itu sendiri
|
||||
return hasPermission(section.permission) ? section : null;
|
||||
}).filter(section => section !== null);
|
||||
|
||||
setNavConfig([{ items: filteredNavConfig }]);
|
||||
} catch (error) {
|
||||
console.error('Gagal mengambil konfigurasi navigasi:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchNavConfig();
|
||||
}, [user]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpenSidebar) {
|
||||
|
||||
@@ -1,276 +1,130 @@
|
||||
// @mui
|
||||
import { Typography, Container, Grid, Button, SelectChangeEvent } from '@mui/material';
|
||||
import { CardContent,Button, Container, Grid, styled, Typography, Card, Stack } from '@mui/material';
|
||||
// hooks
|
||||
import useSettings from '../../hooks/useSettings';
|
||||
// components
|
||||
import Page from '../../components/Page';
|
||||
// theme
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import axios from '../../utils/axios';
|
||||
import { Stack } from '@mui/system';
|
||||
import useAuth from '../../hooks/useAuth';
|
||||
import SomethingUsage from '../../sections/dashboard/SomethingUsage';
|
||||
import { fCurrency } from '../../utils/formatNumber';
|
||||
import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
|
||||
import TrendingUpIcon from '@mui/icons-material/TrendingUp';
|
||||
import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
|
||||
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
|
||||
import Table from '../../components/Table';
|
||||
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import palette from '../../theme/palette';
|
||||
|
||||
export default function Index() {
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function Dashboard() {
|
||||
const { themeStretch } = useSettings();
|
||||
const { corporateValue } = useContext(UserCurrentCorporateContext);
|
||||
const controller = new AbortController();
|
||||
|
||||
const [memberData, setMemberData] = useState([]);
|
||||
const { logout } = useAuth();
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* setting up for the table */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const loadings = {
|
||||
isLoading: isLoading,
|
||||
setIsLoading: setIsLoading,
|
||||
const loadSomething = () => {
|
||||
axios.get('/user')
|
||||
};
|
||||
|
||||
/* ------------------------------ handle params ----------------------------- */
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [appliedParams, setAppliedParams] = useState({});
|
||||
const Wallet = styled(AccountBalanceWalletIcon)(({ theme }) => ({
|
||||
color: 'orange',
|
||||
marginRight: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const params = {
|
||||
searchParams: searchParams,
|
||||
setSearchParams: setSearchParams,
|
||||
appliedParams: appliedParams,
|
||||
setAppliedParams: setAppliedParams,
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
const TrendUp = styled(TrendingUpIcon)(({ theme }) => ({
|
||||
color: 'blue',
|
||||
marginRight: theme.spacing(1),
|
||||
}));
|
||||
|
||||
/* ------------------------------ handle order ------------------------------ */
|
||||
const [order, setOrder] = useState<Order>('asc');
|
||||
const [orderBy, setOrderBy] = useState('fullName');
|
||||
const Monet = styled(MonetizationOnIcon)(({ theme }) => ({
|
||||
color: 'orange',
|
||||
marginRight: theme.spacing(1),
|
||||
}));
|
||||
|
||||
const orders = {
|
||||
order: order,
|
||||
setOrder: setOrder,
|
||||
orderBy: orderBy,
|
||||
setOrderBy: setOrderBy,
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
const DangerCard = styled(Card)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
padding: theme.spacing(3),
|
||||
color: theme.palette.error.main,
|
||||
backgroundColor: theme.palette.error.lighter,
|
||||
}));
|
||||
|
||||
/* ---------------------------- handle pagination --------------------------- */
|
||||
const [page, setPage] = useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = useState(10);
|
||||
const SuccessCard = styled(Card)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
padding: theme.spacing(3),
|
||||
color: theme.palette.success.darker,
|
||||
backgroundColor: theme.palette.success.lighter,
|
||||
}));
|
||||
|
||||
const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
|
||||
current_page: 0,
|
||||
from: 0,
|
||||
last_page: 0,
|
||||
links: [],
|
||||
path: '',
|
||||
per_page: 0,
|
||||
to: 0,
|
||||
total: 0,
|
||||
});
|
||||
const DefaultCard = styled(Card)(({ theme }) => ({
|
||||
boxShadow: theme.shadows[3], // Menggunakan bayangan standar dari tema
|
||||
padding: theme.spacing(3),
|
||||
color: theme.palette.text.primary,
|
||||
backgroundColor: theme.palette.background.paper, // Latar belakang putih
|
||||
}));
|
||||
const { corporateValue } = useContext(UserCurrentCorporateContext);
|
||||
|
||||
const paginations = {
|
||||
page: page,
|
||||
setPage: setPage,
|
||||
rowsPerPage: rowsPerPage,
|
||||
setRowsPerPage: setRowsPerPage,
|
||||
paginationTable: paginationTable,
|
||||
setPaginationTable: setPaginationTable,
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
const [depositData, setDepositData] = useState({ deposit: 0, limit: 0, usage: 0 });
|
||||
|
||||
/* ------------------------------ handle search ----------------------------- */
|
||||
const [searchText, setSearchText] = useState('');
|
||||
useEffect(() => {
|
||||
const fetchDepositData = async () => {
|
||||
try {
|
||||
const response = await axios.get(`${corporateValue}/get-deposits`);
|
||||
setDepositData(response.data);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch deposit data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (searchText === '') {
|
||||
searchParams.delete('search');
|
||||
const params = Object.fromEntries([...searchParams.entries()]);
|
||||
setAppliedParams(params);
|
||||
} else {
|
||||
const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
|
||||
setAppliedParams(params);
|
||||
}
|
||||
};
|
||||
|
||||
const searchs = {
|
||||
useSearchs: false,
|
||||
searchText: searchText,
|
||||
setSearchText: setSearchText,
|
||||
handleSearchSubmit: handleSearchSubmit,
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* ------------------------------ handle filter ----------------------------- */
|
||||
const [divisionValue, setDivisionValue] = useState('all');
|
||||
const [divisionData, setDivisionData] = useState([]);
|
||||
|
||||
const handleDivisionChange = (event: SelectChangeEvent) => {
|
||||
setDivisionValue(event.target.value as string);
|
||||
|
||||
if (event.target.value === 'all') {
|
||||
searchParams.delete('division');
|
||||
const params = Object.fromEntries([...searchParams.entries()]);
|
||||
setAppliedParams(params);
|
||||
} else {
|
||||
const params = Object.fromEntries([
|
||||
...searchParams.entries(),
|
||||
['division', event.target.value as string],
|
||||
]);
|
||||
setAppliedParams(params);
|
||||
}
|
||||
};
|
||||
|
||||
const filters = {
|
||||
useFilter: true,
|
||||
config: {
|
||||
label: 'Division',
|
||||
divisionValue: divisionValue,
|
||||
divisionData: divisionData,
|
||||
handleDivisionChange: handleDivisionChange,
|
||||
},
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* -------------------------------- headCell -------------------------------- */
|
||||
const headCells: HeadCell<never>[] = [
|
||||
{
|
||||
id: 'memberId',
|
||||
align: 'left',
|
||||
label: 'Member ID',
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'fullName',
|
||||
align: 'center',
|
||||
label: 'Name',
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'division',
|
||||
align: 'center',
|
||||
label: 'Divisi',
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
align: 'center',
|
||||
label: 'Status',
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'action',
|
||||
align: 'right',
|
||||
label: '',
|
||||
isSort: false,
|
||||
},
|
||||
];
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
const parameters =
|
||||
Object.keys(appliedParams).length !== 0
|
||||
? appliedParams
|
||||
: Object.fromEntries([
|
||||
...searchParams.entries(),
|
||||
['order', order],
|
||||
['orderBy', orderBy],
|
||||
]);
|
||||
|
||||
const [divisionResponse, membersResponse] = await Promise.all([
|
||||
axios.get(`${corporateValue}/division`, { signal: controller.signal }),
|
||||
axios.get(`${corporateValue}/members`, {
|
||||
params: { ...parameters },
|
||||
signal: controller.signal,
|
||||
}),
|
||||
]);
|
||||
|
||||
setSearchParams(parameters);
|
||||
setDivisionData(divisionResponse.data);
|
||||
setMemberData(
|
||||
membersResponse.data.data.map((obj: any) => ({
|
||||
...obj,
|
||||
status:
|
||||
obj.status === 1 ? (
|
||||
<Button
|
||||
sx={{
|
||||
backgroundColor: 'rgba(84, 214, 44, 0.16)',
|
||||
color: palette.dark.success.dark,
|
||||
paddingY: 0,
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(84, 214, 44, 0.32)',
|
||||
color: palette.dark.success.darker,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Active
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
sx={{
|
||||
backgroundColor: 'rgba(255, 72, 66, 0.16)',
|
||||
color: palette.dark.error.dark,
|
||||
paddingY: 0,
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(255, 72, 66, 0.32)',
|
||||
color: palette.dark.error.darker,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Inactive
|
||||
</Button>
|
||||
),
|
||||
}))
|
||||
);
|
||||
setPaginationTable(membersResponse.data);
|
||||
setRowsPerPage(membersResponse.data.per_page);
|
||||
|
||||
if (searchParams.get('page')) {
|
||||
// @ts-ignore
|
||||
const currentPage = parseInt(searchParams.get('page')) - 1;
|
||||
paginationTable.current_page = currentPage;
|
||||
setPage(currentPage);
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
} catch (error: any) {
|
||||
console.error('Error fetching data:', error.message);
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
controller.abort();
|
||||
};
|
||||
}, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
|
||||
fetchDepositData();
|
||||
}, [corporateValue]);
|
||||
|
||||
return (
|
||||
<Page title="Dashboard">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Stack direction="row" justifyContent="space-between">
|
||||
<Typography variant="h3" component="h1" paragraph>
|
||||
Dashboard
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Typography variant="h3" component="h1" paragraph>
|
||||
Dashboard
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Table
|
||||
headCells={headCells}
|
||||
rows={memberData}
|
||||
orders={orders}
|
||||
paginations={paginations}
|
||||
loadings={loadings}
|
||||
params={params}
|
||||
searchs={searchs}
|
||||
filters={filters}
|
||||
/>
|
||||
<Grid item xs={4}>
|
||||
{/* <SomethingUsage /> */}
|
||||
<DefaultCard>
|
||||
<CardContent>
|
||||
<Stack direction="column" alignItems="flex-start" justifyContent="space-between" sx={{ mb: 0.6 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
|
||||
<Typography variant='h4'>{fCurrency(depositData.deposit)}</Typography>
|
||||
<Wallet />
|
||||
</Stack>
|
||||
<Typography variant='h6'>Deposit</Typography>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</DefaultCard>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<DefaultCard>
|
||||
<CardContent>
|
||||
<Stack direction="column" alignItems="flex-start" justifyContent="space-between" sx={{ mb: 0.6 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
|
||||
<Typography variant='h4'>{fCurrency(depositData.limit)}</Typography>
|
||||
<TrendUp />
|
||||
</Stack>
|
||||
<Typography variant='h6'>Limit</Typography>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</DefaultCard>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<DefaultCard>
|
||||
<CardContent>
|
||||
<Stack direction="column" alignItems="flex-start" justifyContent="space-between" sx={{ mb: 0.6 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
|
||||
<Typography variant='h4'>{fCurrency(depositData.usage)}</Typography>
|
||||
<Monet />
|
||||
</Stack>
|
||||
<Typography variant='h6'>This Year Usage</Typography>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</DefaultCard>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
|
||||
279
frontend/client-portal/src/pages/Dashboard/Index_.tsx
Normal file
279
frontend/client-portal/src/pages/Dashboard/Index_.tsx
Normal file
@@ -0,0 +1,279 @@
|
||||
// @mui
|
||||
import { Typography, Container, Grid, Button, SelectChangeEvent } from '@mui/material';
|
||||
// hooks
|
||||
import useSettings from '../../hooks/useSettings';
|
||||
// components
|
||||
import Page from '../../components/Page';
|
||||
// theme
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import axios from '../../utils/axios';
|
||||
import { Stack } from '@mui/system';
|
||||
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
|
||||
import Table from '../../components/Table';
|
||||
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
import palette from '../../theme/palette';
|
||||
|
||||
export default function Index_() {
|
||||
const { themeStretch } = useSettings();
|
||||
const { corporateValue } = useContext(UserCurrentCorporateContext);
|
||||
const controller = new AbortController();
|
||||
|
||||
const [memberData, setMemberData] = useState([]);
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
/* setting up for the table */
|
||||
/* -------------------------------------------------------------------------- */
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
const loadings = {
|
||||
isLoading: isLoading,
|
||||
setIsLoading: setIsLoading,
|
||||
};
|
||||
|
||||
/* ------------------------------ handle params ----------------------------- */
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const [appliedParams, setAppliedParams] = useState({});
|
||||
|
||||
const params = {
|
||||
searchParams: searchParams,
|
||||
setSearchParams: setSearchParams,
|
||||
appliedParams: appliedParams,
|
||||
setAppliedParams: setAppliedParams,
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* ------------------------------ handle order ------------------------------ */
|
||||
const [order, setOrder] = useState<Order>('asc');
|
||||
const [orderBy, setOrderBy] = useState('fullName');
|
||||
|
||||
const orders = {
|
||||
order: order,
|
||||
setOrder: setOrder,
|
||||
orderBy: orderBy,
|
||||
setOrderBy: setOrderBy,
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* ---------------------------- handle pagination --------------------------- */
|
||||
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,
|
||||
});
|
||||
|
||||
const paginations = {
|
||||
page: page,
|
||||
setPage: setPage,
|
||||
rowsPerPage: rowsPerPage,
|
||||
setRowsPerPage: setRowsPerPage,
|
||||
paginationTable: paginationTable,
|
||||
setPaginationTable: setPaginationTable,
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* ------------------------------ handle search ----------------------------- */
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (searchText === '') {
|
||||
searchParams.delete('search');
|
||||
const params = Object.fromEntries([...searchParams.entries()]);
|
||||
setAppliedParams(params);
|
||||
} else {
|
||||
const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
|
||||
setAppliedParams(params);
|
||||
}
|
||||
};
|
||||
|
||||
const searchs = {
|
||||
useSearchs: false,
|
||||
searchText: searchText,
|
||||
setSearchText: setSearchText,
|
||||
handleSearchSubmit: handleSearchSubmit,
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* ------------------------------ handle filter ----------------------------- */
|
||||
const [divisionValue, setDivisionValue] = useState('all');
|
||||
const [divisionData, setDivisionData] = useState([]);
|
||||
|
||||
const handleDivisionChange = (event: SelectChangeEvent) => {
|
||||
setDivisionValue(event.target.value as string);
|
||||
|
||||
if (event.target.value === 'all') {
|
||||
searchParams.delete('division');
|
||||
const params = Object.fromEntries([...searchParams.entries()]);
|
||||
setAppliedParams(params);
|
||||
} else {
|
||||
const params = Object.fromEntries([
|
||||
...searchParams.entries(),
|
||||
['division', event.target.value as string],
|
||||
]);
|
||||
setAppliedParams(params);
|
||||
}
|
||||
};
|
||||
|
||||
const filters = {
|
||||
useFilter: true,
|
||||
config: {
|
||||
label: 'Division',
|
||||
divisionValue: divisionValue,
|
||||
divisionData: divisionData,
|
||||
handleDivisionChange: handleDivisionChange,
|
||||
},
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* -------------------------------- headCell -------------------------------- */
|
||||
const headCells: HeadCell<never>[] = [
|
||||
{
|
||||
id: 'memberId',
|
||||
align: 'left',
|
||||
label: 'Member ID',
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'fullName',
|
||||
align: 'center',
|
||||
label: 'Name',
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'division',
|
||||
align: 'center',
|
||||
label: 'Divisi',
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'status',
|
||||
align: 'center',
|
||||
label: 'Status',
|
||||
isSort: true,
|
||||
},
|
||||
{
|
||||
id: 'action',
|
||||
align: 'right',
|
||||
label: '',
|
||||
isSort: false,
|
||||
},
|
||||
];
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
|
||||
const parameters =
|
||||
Object.keys(appliedParams).length !== 0
|
||||
? appliedParams
|
||||
: Object.fromEntries([
|
||||
...searchParams.entries(),
|
||||
['order', order],
|
||||
['orderBy', orderBy],
|
||||
]);
|
||||
|
||||
const [divisionResponse, membersResponse] = await Promise.all([
|
||||
axios.get(`${corporateValue}/division`, { signal: controller.signal }),
|
||||
axios.get(`${corporateValue}/members`, {
|
||||
params: { ...parameters },
|
||||
signal: controller.signal,
|
||||
}),
|
||||
]);
|
||||
|
||||
setSearchParams(parameters);
|
||||
setDivisionData(divisionResponse.data);
|
||||
setMemberData(
|
||||
membersResponse.data.data.map((obj: any) => ({
|
||||
...obj,
|
||||
status:
|
||||
obj.status === 1 ? (
|
||||
<Button
|
||||
sx={{
|
||||
backgroundColor: 'rgba(84, 214, 44, 0.16)',
|
||||
color: palette.dark.success.dark,
|
||||
paddingY: 0,
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(84, 214, 44, 0.32)',
|
||||
color: palette.dark.success.darker,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Active
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
sx={{
|
||||
backgroundColor: 'rgba(255, 72, 66, 0.16)',
|
||||
color: palette.dark.error.dark,
|
||||
paddingY: 0,
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(255, 72, 66, 0.32)',
|
||||
color: palette.dark.error.darker,
|
||||
},
|
||||
}}
|
||||
>
|
||||
Inactive
|
||||
</Button>
|
||||
),
|
||||
}))
|
||||
);
|
||||
setPaginationTable(membersResponse.data);
|
||||
setRowsPerPage(membersResponse.data.per_page);
|
||||
|
||||
if (searchParams.get('page')) {
|
||||
// @ts-ignore
|
||||
const currentPage = parseInt(searchParams.get('page')) - 1;
|
||||
paginationTable.current_page = currentPage;
|
||||
setPage(currentPage);
|
||||
}
|
||||
|
||||
setIsLoading(false);
|
||||
} catch (error: any) {
|
||||
console.error('Error fetching data:', error.message);
|
||||
}
|
||||
})();
|
||||
|
||||
return () => {
|
||||
controller.abort();
|
||||
};
|
||||
}, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]);
|
||||
|
||||
return (
|
||||
<Page title="Dashboard">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Stack direction="row" justifyContent="space-between">
|
||||
<Typography variant="h3" component="h1" paragraph>
|
||||
Dashboard
|
||||
</Typography>
|
||||
</Stack>
|
||||
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} lg={12} md={12}>
|
||||
<Table
|
||||
headCells={headCells}
|
||||
rows={memberData}
|
||||
orders={orders}
|
||||
paginations={paginations}
|
||||
loadings={loadings}
|
||||
params={params}
|
||||
searchs={searchs}
|
||||
filters={filters}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
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