From 0411f8c7e578ae86172f633f14a23c12dc1975a1 Mon Sep 17 00:00:00 2001 From: pajri Date: Tue, 25 Jun 2024 16:29:13 +0700 Subject: [PATCH] dashboard --- .../Api/CorporateMemberController.php | 16 +- .../src/pages/Dashboard/Index.tsx | 315 +++++++++++++----- 2 files changed, 239 insertions(+), 92 deletions(-) diff --git a/Modules/Client/Http/Controllers/Api/CorporateMemberController.php b/Modules/Client/Http/Controllers/Api/CorporateMemberController.php index 01d40529..8901d747 100644 --- a/Modules/Client/Http/Controllers/Api/CorporateMemberController.php +++ b/Modules/Client/Http/Controllers/Api/CorporateMemberController.php @@ -260,7 +260,13 @@ class CorporateMemberController extends Controller public function getDeposit($corporate_id) { $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) ->first(); $usage = DB::table('corporate_employees') @@ -272,7 +278,13 @@ class CorporateMemberController extends Controller $deposit = [ 'deposit' => $deposit->total_premi, '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); diff --git a/frontend/client-portal/src/pages/Dashboard/Index.tsx b/frontend/client-portal/src/pages/Dashboard/Index.tsx index 8bae1f72..c07eacaa 100644 --- a/frontend/client-portal/src/pages/Dashboard/Index.tsx +++ b/frontend/client-portal/src/pages/Dashboard/Index.tsx @@ -1,5 +1,5 @@ // @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 import useSettings from '../../hooks/useSettings'; // components @@ -9,6 +9,7 @@ import useAuth from '../../hooks/useAuth'; import SomethingUsage from '../../sections/dashboard/SomethingUsage'; import { fCurrency } from '../../utils/formatNumber'; import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'; +import SendIcon from '@mui/icons-material/Send'; import TrendingUpIcon from '@mui/icons-material/TrendingUp'; import MonetizationOnIcon from '@mui/icons-material/MonetizationOn'; import { useContext, useEffect, useState } from 'react'; @@ -20,32 +21,29 @@ import { useNavigate, useParams } from 'react-router-dom'; // ---------------------------------------------------------------------- export default function Dashboard() { - - const navigate = useNavigate(); + const navigate = useNavigate(); const { themeStretch } = useSettings(); const { user } = useAuth(); - - 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); - useEffect(() => { - const doesNameExist = checkIfNameExists(nameToCheck); - if (!doesNameExist) { - navigate('/corporate'); - } - }, [nameToCheck, user, navigate]); -// const loadSomething = () => { -// axios.get('/user') -// }; + if (!doesNameExist) { + navigate('/corporate'); + } + }, [nameToCheck, user, navigate]); + // const loadSomething = () => { + // axios.get('/user') + // }; const Wallet = styled(AccountBalanceWalletIcon)(({ theme }) => ({ - color: 'orange', + color: 'rgba(249, 131, 124, 1)', marginRight: theme.spacing(1), })); @@ -54,8 +52,8 @@ export default function Dashboard() { marginRight: theme.spacing(1), })); - const Monet = styled(MonetizationOnIcon)(({ theme }) => ({ - color: 'orange', + const Send = styled(SendIcon)(({ theme }) => ({ + color: 'rgba(243, 204, 92, 1)', marginRight: theme.spacing(1), })); @@ -74,32 +72,50 @@ export default function Dashboard() { })); 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 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 }); + const { corporateValue } = useContext(UserCurrentCorporateContext); - 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 [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, + }); - fetchDepositData(); - }, [corporateValue]); + 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 handleGoBack = () => { - // Logic untuk kembali ke halaman sebelumnya atau halaman utama - navigate('/corporate') - }; + fetchDepositData(); + }, [corporateValue]); + + const handleGoBack = () => { + // Logic untuk kembali ke halaman sebelumnya atau halaman utama + navigate('/corporate'); + }; return ( @@ -108,67 +124,186 @@ const [depositData, setDepositData] = useState({ deposit: 0, limit: 0, usage: 0 Dashboard {doesNameExist ? ( - - - {/* */} - + + + + + - - - {fCurrency(depositData.deposit)} - - - Deposit + + + {fCurrency(depositData.deposit)} + + + Deposit + + + + + • Minimal Deposit {depositData.minimal_deposit_percentage}% + + + {fCurrency(depositData.minimal_deposit_net)} + + + + + • Stop Service {depositData.minimal_stop_service_percentage}% + + + {fCurrency(depositData.minimal_stop_service_net)} + + + + + • Reminder Alert Level {depositData.minimal_alert_percentage}% + + + {fCurrency(depositData.minimal_alert_net)} + + + + - - - - + + - - - {fCurrency(depositData.limit)} - - - Limit + + + {fCurrency(depositData.usage)} + + + This Year Usage + + - - - - - - - - {fCurrency(depositData.usage)} - - - This Year Usage - - - + + {/* */} + - ):( - - - Maaf, halaman ini tidak bisa diakses atau tidak ada. - - - + + ) : ( + // + // + // {/* */} + // + // + // + // + // {fCurrency(depositData.deposit)} + // + // + // Deposit + // + // + // + // + // + // + // + // + // + // {fCurrency(depositData.limit)} + // + // + // Limit + // + // + // + // + // + // + // + // + // + // {fCurrency(depositData.usage)} + // + // + // This Year Usage + // + // + // + // + // + + + Maaf, halaman ini tidak bisa diakses atau tidak ada. + + + )} - );