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

dashboard

Browse Source
This commit is contained in:
pajri
2024-06-25 16:29:13 +07:00
parent 13d54063e4
commit 0411f8c7e5
2 changed files with 239 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
Modules/Client/Http/Controllers/Api/CorporateMemberController.php
View File

@@ -260,7 +260,13 @@ class CorporateMemberController extends Controller
public function getDeposit($corporate_id) public function getDeposit($corporate_id)
{ {
$deposit = DB::table('corporate_policies') $deposit = DB::table('corporate_policies')
->select('total_premi') ->select('total_premi',
'minimal_deposit_percentage',
'minimal_deposit_net',
'minimal_alert_percentage',
'minimal_alert_net',
'minimal_stop_service_net',
'minimal_stop_service_percentage')
->where('corporate_id','=', $corporate_id) ->where('corporate_id','=', $corporate_id)
->first(); ->first();
$usage = DB::table('corporate_employees') $usage = DB::table('corporate_employees')
@@ -272,7 +278,13 @@ class CorporateMemberController extends Controller
$deposit = [ $deposit = [
'deposit' => $deposit->total_premi, 'deposit' => $deposit->total_premi,
'limit' => $deposit->total_premi - $usage, 'limit' => $deposit->total_premi - $usage,
'usage' => $usage 'usage' => $usage,
'minimal_deposit_percentage' => $deposit->minimal_deposit_percentage,
'minimal_deposit_net' => $deposit->minimal_deposit_net,
'minimal_alert_percentage' => $deposit->minimal_alert_percentage,
'minimal_alert_net' => $deposit->minimal_alert_net,
'minimal_stop_service_net' => $deposit->minimal_stop_service_net,
'minimal_stop_service_percentage' => $deposit->minimal_stop_service_percentage
]; ];
return response()->json($deposit); return response()->json($deposit);

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

@@ -1,5 +1,5 @@
// @mui // @mui
import { Box,CardContent,Button, Container, Grid, styled, Typography, Card, Stack } from '@mui/material'; import { Box, Button, Container, Grid, styled, Typography, Card, Stack } from '@mui/material';
// hooks // hooks
import useSettings from '../../hooks/useSettings'; import useSettings from '../../hooks/useSettings';
// components // components
@@ -9,6 +9,7 @@ import useAuth from '../../hooks/useAuth';
import SomethingUsage from '../../sections/dashboard/SomethingUsage'; import SomethingUsage from '../../sections/dashboard/SomethingUsage';
import { fCurrency } from '../../utils/formatNumber'; import { fCurrency } from '../../utils/formatNumber';
import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'; import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
import SendIcon from '@mui/icons-material/Send';
import TrendingUpIcon from '@mui/icons-material/TrendingUp'; import TrendingUpIcon from '@mui/icons-material/TrendingUp';
import MonetizationOnIcon from '@mui/icons-material/MonetizationOn'; import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
import { useContext, useEffect, useState } from 'react'; import { useContext, useEffect, useState } from 'react';
@@ -20,32 +21,29 @@ import { useNavigate, useParams } from 'react-router-dom';
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
export default function Dashboard() { export default function Dashboard() {
const navigate = useNavigate();
const navigate = useNavigate();
const { themeStretch } = useSettings(); const { themeStretch } = useSettings();
const { user } = useAuth(); const { user } = useAuth();
const checkIfNameExists = (name) => { const checkIfNameExists = (name) => {
return user.user.permissions.some(item => item.name === name); return user.user.permissions.some((item) => item.name === name);
}; };
const nameToCheck = 'dashboard-list-client-portal'; const nameToCheck = 'dashboard-list-client-portal';
const doesNameExist = checkIfNameExists(nameToCheck);
useEffect(() => {
const doesNameExist = checkIfNameExists(nameToCheck); const doesNameExist = checkIfNameExists(nameToCheck);
useEffect(() => { if (!doesNameExist) {
const doesNameExist = checkIfNameExists(nameToCheck); navigate('/corporate');
if (!doesNameExist) { }
navigate('/corporate'); }, [nameToCheck, user, navigate]);
} // const loadSomething = () => {
}, [nameToCheck, user, navigate]); // axios.get('/user')
// const loadSomething = () => { // };
// axios.get('/user')
// };
const Wallet = styled(AccountBalanceWalletIcon)(({ theme }) => ({ const Wallet = styled(AccountBalanceWalletIcon)(({ theme }) => ({
color: 'orange', color: 'rgba(249, 131, 124, 1)',
marginRight: theme.spacing(1), marginRight: theme.spacing(1),
})); }));
@@ -54,8 +52,8 @@ export default function Dashboard() {
marginRight: theme.spacing(1), marginRight: theme.spacing(1),
})); }));
const Monet = styled(MonetizationOnIcon)(({ theme }) => ({ const Send = styled(SendIcon)(({ theme }) => ({
color: 'orange', color: 'rgba(243, 204, 92, 1)',
marginRight: theme.spacing(1), marginRight: theme.spacing(1),
})); }));
@@ -74,32 +72,50 @@ export default function Dashboard() {
})); }));
const DefaultCard = styled(Card)(({ theme }) => ({ 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.neutral, // Latar belakang putih
}));
const CardContent = styled(Card)(({ theme }) => ({
boxShadow: theme.shadows[3], // Menggunakan bayangan standar dari tema boxShadow: theme.shadows[3], // Menggunakan bayangan standar dari tema
padding: theme.spacing(3), padding: theme.spacing(3),
color: theme.palette.text.primary, color: theme.palette.text.primary,
backgroundColor: theme.palette.background.paper, // Latar belakang putih backgroundColor: theme.palette.background.paper, // Latar belakang putih
})); }));
const { corporateValue } = useContext(UserCurrentCorporateContext);
const [depositData, setDepositData] = useState({ deposit: 0, limit: 0, usage: 0 }); const { corporateValue } = useContext(UserCurrentCorporateContext);
useEffect(() => { const [depositData, setDepositData] = useState({
const fetchDepositData = async () => { deposit: 0,
try { limit: 0,
const response = await axios.get(`${corporateValue}/get-deposits`); usage: 0,
setDepositData(response.data); minimal_deposit_percentage: 0,
} catch (error) { minimal_deposit_net: 0,
console.error('Failed to fetch deposit data:', error); minimal_alert_percentage: 0,
} minimal_alert_net: 0,
}; minimal_stop_service_net: 0,
minimal_stop_service_percentage: 0,
});
fetchDepositData(); useEffect(() => {
}, [corporateValue]); 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 handleGoBack = () => { fetchDepositData();
// Logic untuk kembali ke halaman sebelumnya atau halaman utama }, [corporateValue]);
navigate('/corporate')
}; const handleGoBack = () => {
// Logic untuk kembali ke halaman sebelumnya atau halaman utama
navigate('/corporate');
};
return ( return (
<Page title="Dashboard"> <Page title="Dashboard">
@@ -108,67 +124,186 @@ const [depositData, setDepositData] = useState({ deposit: 0, limit: 0, usage: 0
Dashboard Dashboard
</Typography> </Typography>
{doesNameExist ? ( {doesNameExist ? (
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={4}> <Grid item xs={12}>
{/* <SomethingUsage /> */} <DefaultCard>
<DefaultCard> <Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<CardContent> <CardContent>
<Stack direction="column" alignItems="flex-start" justifyContent="space-between" sx={{ mb: 0.6 }}> <Stack
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}> direction="column"
<Typography variant='h4'>{fCurrency(depositData.deposit)}</Typography> alignItems="flex-start"
<Wallet /> justifyContent="space-between"
</Stack> sx={{ mb: 0.6, width: '100%' }}
<Typography variant='h6'>Deposit</Typography> >
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
sx={{ width: '100%' }}
>
<Typography variant="h4">{fCurrency(depositData.deposit)}</Typography>
<Wallet />
</Stack> </Stack>
<Typography variant="h6" style={{ color: 'rgba(137, 137, 137, 1)' }}>
Deposit
</Typography>
<Stack spacing={1} mt={2} sx={{ width: '100%' }}>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
sx={{
backgroundColor: 'rgba(233, 252, 212, 1)',
padding: '8px 16px',
borderRadius: '6px',
width: '80%',
}}
>
<Typography
variant="body2"
style={{ paddingRight: '10px', color: 'rgba(8, 102, 13, 1)' }}
>
• Minimal Deposit {depositData.minimal_deposit_percentage}%
</Typography>
<Typography variant="body2" style={{ color: 'rgba(8, 102, 13, 1)' }}>
{fCurrency(depositData.minimal_deposit_net)}
</Typography>
</Stack>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
sx={{
backgroundColor: 'rgba(214, 228, 255, 1)',
padding: '8px 16px',
borderRadius: '6px',
width: '80%',
}}
>
<Typography
variant="body2"
style={{ paddingRight: '10px', color: 'rgba(9, 26, 122, 1)' }}
>
• Stop Service {depositData.minimal_stop_service_percentage}%
</Typography>
<Typography variant="body2" style={{ color: 'rgba(9, 26, 122, 1)' }}>
{fCurrency(depositData.minimal_stop_service_net)}
</Typography>
</Stack>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
sx={{
backgroundColor: 'rgba(255, 249, 242, 1)',
padding: '8px 16px',
borderRadius: '6px',
width: '80%',
}}
>
<Typography
variant="body2"
style={{ paddingRight: '10px', color: 'rgba(115, 64, 17, 1)' }}
>
• Reminder Alert Level {depositData.minimal_alert_percentage}%
</Typography>
<Typography variant="body2" style={{ color: 'rgba(115, 64, 17, 1)' }}>
{fCurrency(depositData.minimal_alert_net)}
</Typography>
</Stack>
</Stack>
</Stack>
</CardContent> </CardContent>
</DefaultCard> </Grid>
</Grid> <Grid item xs={12} sm={6}>
<Grid item xs={4}>
<DefaultCard>
<CardContent> <CardContent>
<Stack direction="column" alignItems="flex-start" justifyContent="space-between" sx={{ mb: 0.6 }}> <Stack
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}> direction="column"
<Typography variant='h4'>{fCurrency(depositData.limit)}</Typography> alignItems="flex-start"
<TrendUp /> justifyContent="space-between"
</Stack> sx={{ mb: 0.6 }}
<Typography variant='h6'>Limit</Typography> >
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
sx={{ width: '100%' }}
>
<Typography variant="h4">{fCurrency(depositData.usage)}</Typography>
<Send />
</Stack> </Stack>
<Typography variant="h6" style={{ color: 'rgba(137, 137, 137, 1)' }}>
This Year Usage
</Typography>
</Stack>
</CardContent> </CardContent>
</DefaultCard> </Grid>
</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>
{/* </CardContent> */}
</DefaultCard>
</Grid> </Grid>
):( </Grid>
<Box ) : (
display="flex" // <Grid container spacing={2}>
flexDirection="column" // <Grid item xs={4}>
alignItems="center" // {/* <SomethingUsage /> */}
justifyContent="center" // <DefaultCard>
minHeight="55vh" // <CardContent>
textAlign="center" // <Stack direction="column" alignItems="flex-start" justifyContent="space-between" sx={{ mb: 0.6 }}>
padding={2} // <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
> // <Typography variant='h4'>{fCurrency(depositData.deposit)}</Typography>
<Typography variant="body1" color="textSecondary" paragraph> // <Wallet />
Maaf, halaman ini tidak bisa diakses atau tidak ada. // </Stack>
</Typography> // <Typography variant='h6'>Deposit</Typography>
<Button variant="contained" color="primary" onClick={handleGoBack}> // </Stack>
Kembali // </CardContent>
</Button> // </DefaultCard>
</Box> // </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>
<Box
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
minHeight="55vh"
textAlign="center"
padding={2}
>
<Typography variant="body1" color="textSecondary" paragraph>
Maaf, halaman ini tidak bisa diakses atau tidak ada.
</Typography>
<Button variant="contained" color="primary" onClick={handleGoBack}>
Kembali
</Button>
</Box>
)} )}
</Container> </Container>
</Page> </Page>
); );