Touch Up Dashboard

frontend/client-portal/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>
   );

frontend/client-portal/src/pages/auth/Login.tsx

@@ -71,12 +71,15 @@ export default function Login() {
     <Page title="Login">
       <RootStyle>
         <HeaderStyle>
-          <Logo />
+          <Logo sx={{ width: 150, height: 150 }} />
           {smUp && (
             <Typography variant="body2" sx={{ mt: { md: -2 } }}>
-              Don’t have an account? {''}
-              <Link variant="subtitle2" component={RouterLink} to={PATH_AUTH.register}>
-                Get started
+              Has problem with your account? {''}
+              <Link variant="subtitle2" component={RouterLink} to="#" onClick={(e) => {
+                  window.location.href = "mailto:admin@linksehat.com";
+                  e.preventDefault();
+              }}>
+                Contact Us
               </Link>
             </Typography>
           )}
@@ -101,7 +104,7 @@ export default function Login() {
             <Stack direction="row" alignItems="center" sx={{ mb: 5 }}>
               <Box sx={{ flexGrow: 1 }}>
                 <Typography variant="h4" gutterBottom>
-                  Sign in to Minimal
+                  Sign in to LinkSehat
                 </Typography>
                 <Typography sx={{ color: 'text.secondary' }}>Enter your details below.</Typography>
               </Box>
@@ -119,7 +122,7 @@ export default function Login() {
 
             <LoginForm />
 
-            {!smUp && (
+            {false && !smUp && (
               <Typography variant="body2" align="center" sx={{ mt: 3 }}>
                 Don’t have an account?{' '}
                 <Link variant="subtitle2" component={RouterLink} to={PATH_AUTH.register}>