dashboard

2024-06-25 16:29:13 +07:00
parent 13d54063e4
commit 0411f8c7e5
2 changed files with 239 additions and 92 deletions
--- 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);
--- 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 (
    <Page title="Dashboard">
@@ -108,67 +124,186 @@ const [depositData, setDepositData] = useState({ deposit: 0, limit: 0, usage: 0
          Dashboard
        </Typography>
        {doesNameExist ? (
-            <Grid container spacing={2}>
-                <Grid item xs={4}>
-                {/* <SomethingUsage /> */}
-                <DefaultCard>
+          <Grid container spacing={2}>
+            <Grid item xs={12}>
+              <DefaultCard>
+                <Grid container spacing={2}>
+                  <Grid item xs={12} sm={6}>
                    <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
+                        direction="column"
+                        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 />
                        </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>
-                </DefaultCard>
-                </Grid>
-                <Grid item xs={4}>
-                <DefaultCard>
+                  </Grid>
+                  <Grid item xs={12} sm={6}>
                    <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
+                        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>
+                          <Send />
                        </Stack>
+                        <Typography variant="h6" style={{ color: 'rgba(137, 137, 137, 1)' }}>
+                          This Year Usage
+                        </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>
+                {/* </CardContent> */}
+              </DefaultCard>
            </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>
+          </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
+            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>
    </Page>
  );