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);

223
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,16 +21,13 @@ 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';
@@ -40,12 +38,12 @@ export default function Dashboard() {
navigate('/corporate'); navigate('/corporate');
} }
}, [nameToCheck, user, navigate]); }, [nameToCheck, user, navigate]);
// const loadSomething = () => { // const loadSomething = () => {
// axios.get('/user') // 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),
})); }));
@@ -77,11 +75,29 @@ export default function Dashboard() {
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.neutral, // Latar belakang putih
})); }));
const { corporateValue } = useContext(UserCurrentCorporateContext);
const [depositData, setDepositData] = useState({ deposit: 0, limit: 0, usage: 0 }); const CardContent = 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 [depositData, setDepositData] = useState({
deposit: 0,
limit: 0,
usage: 0,
minimal_deposit_percentage: 0,
minimal_deposit_net: 0,
minimal_alert_percentage: 0,
minimal_alert_net: 0,
minimal_stop_service_net: 0,
minimal_stop_service_percentage: 0,
});
useEffect(() => { useEffect(() => {
const fetchDepositData = async () => { const fetchDepositData = async () => {
@@ -98,7 +114,7 @@ const [depositData, setDepositData] = useState({ deposit: 0, limit: 0, usage: 0
const handleGoBack = () => { const handleGoBack = () => {
// Logic untuk kembali ke halaman sebelumnya atau halaman utama // Logic untuk kembali ke halaman sebelumnya atau halaman utama
navigate('/corporate') navigate('/corporate');
}; };
return ( return (
@@ -109,48 +125,168 @@ const [depositData, setDepositData] = useState({ deposit: 0, limit: 0, usage: 0
</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"
justifyContent="space-between"
sx={{ mb: 0.6, width: '100%' }}
>
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
sx={{ width: '100%' }}
>
<Typography variant="h4">{fCurrency(depositData.deposit)}</Typography>
<Wallet /> <Wallet />
</Stack> </Stack>
<Typography variant='h6'>Deposit</Typography> <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> </Stack>
</CardContent> </CardContent>
</DefaultCard>
</Grid> </Grid>
<Grid item xs={4}> <Grid item xs={12} sm={6}>
<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"
sx={{ mb: 0.6 }}
>
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
sx={{ width: '100%' }}
>
<Typography variant="h4">{fCurrency(depositData.usage)}</Typography>
<Send />
</Stack> </Stack>
<Typography variant='h6'>Limit</Typography> <Typography variant="h6" style={{ color: 'rgba(137, 137, 137, 1)' }}>
This Year Usage
</Typography>
</Stack> </Stack>
</CardContent> </CardContent>
</DefaultCard>
</Grid> </Grid>
<Grid item xs={4}> </Grid>
<DefaultCard> {/* </CardContent> */}
<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> </DefaultCard>
</Grid> </Grid>
</Grid> </Grid>
):( ) : (
// <Grid container spacing={2}>
// <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>
<Box <Box
display="flex" display="flex"
flexDirection="column" flexDirection="column"
@@ -168,7 +304,6 @@ const [depositData, setDepositData] = useState({ deposit: 0, limit: 0, usage: 0
</Button> </Button>
</Box> </Box>
)} )}
</Container> </Container>
</Page> </Page>
); );