Base Template

frontend/dashboard/src/pages/Dashboard.tsx

@@ -1,11 +1,13 @@
 // @mui
-import { Button, Container, Typography } from '@mui/material';
+import { Button, Container, Grid, styled, Typography, Card, Stack } from '@mui/material';
 // hooks
 import useSettings from '../hooks/useSettings';
 // components
 import Page from '../components/Page';
 import axios from '../utils/axios';
 import useAuth from '../hooks/useAuth';
+import SomethingUsage from '../sections/dashboard/SomethingUsage';
+import { fCurrency } from '../utils/formatNumber';
 
 // ----------------------------------------------------------------------
 
@@ -18,30 +20,47 @@ export default function Dashboard() {
     axios.get('/user')
   };
 
+  const DangerCard = styled(Card)(({ theme }) => ({
+    boxShadow: 'none',
+    padding: theme.spacing(3),
+    color: theme.palette.error.main,
+    backgroundColor: theme.palette.error.lighter,
+  }));
+
+  const SuccessCard = styled(Card)(({ theme }) => ({
+    boxShadow: 'none',
+    padding: theme.spacing(3),
+    color: theme.palette.success.darker,
+    backgroundColor: theme.palette.success.lighter,
+  }));
+
   return (
     <Page title="Dashboard">
       <Container maxWidth={themeStretch ? false : 'xl'}>
         <Typography variant="h3" component="h1" paragraph>
           Dashboard
         </Typography>
-        <Typography gutterBottom>
-          Curabitur turpis. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc,
-          vitae euismod ligula urna in dolor. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit
-          id, lorem. Phasellus blandit leo ut odio. Vestibulum ante ipsum primis in faucibus orci
-          luctus et ultrices posuere cubilia Curae; Fusce id purus. Aliquam lorem ante, dapibus in,
-          viverra quis, feugiat a, tellus. In consectetuer turpis ut velit. Aenean posuere, tortor
-          sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus.
-          Vestibulum suscipit nulla quis orci. Nam commodo suscipit quam. Sed a libero.
-        </Typography>
-        <Typography>
-          Praesent ac sem eget est egestas volutpat. Phasellus viverra nulla ut metus varius
-          laoreet. Curabitur ullamcorper ultricies nisi. Ut non enim eleifend felis pretium feugiat.
-          Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Fusce vel dui. Quisque
-          libero metus, condimentum nec, tempor a, commodo mollis, magna. In enim justo, rhoncus ut,
-          imperdiet a, venenatis vitae, justo. Cras dapibus.
-        </Typography>
-        <Button onClick={loadSomething}>Something</Button>
-        <Button onClick={logout}>Logout</Button>
+
+        <Grid container spacing={2}>
+          <Grid item xs={6}>
+            <SomethingUsage />
+          </Grid>
+          <Grid item xs={6}>
+            <DangerCard>
+              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
+                <Typography sx={{ typography: 'subtitle2' }}>This Month Usages </Typography>
+                <Typography>{fCurrency(15000000)} (57)</Typography>
+              </Stack>
+            </DangerCard>
+            <br />
+            <SuccessCard>
+              <Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mb: 0.6 }}>
+                <Typography sx={{ typography: 'subtitle2' }}>Remaining Balance Estimation </Typography>
+                <Typography>November 2022</Typography>
+              </Stack>
+            </SuccessCard>
+          </Grid>
+        </Grid>
       </Container>
     </Page>
   );