Base Template

frontend/dashboard/src/sections/auth/login/LoginForm.tsx

@@ -39,8 +39,8 @@ export default function LoginForm() {
   });
 
   const defaultValues = {
-    email: '',
-    password: '',
+    email: 'admin@linksehat.dev',
+    password: 'password',
     remember: true,
   };
 
@@ -58,15 +58,16 @@ export default function LoginForm() {
 
   const onSubmit = async (data: FormValuesProps) => {
     try {
-      await login(data.email, data.password );
-      navigate('/dashboard/one');
+      const loginResult = await login(data.email, data.password );
+      
+      navigate('/dashboard');
     } catch (error) {
       console.error(error);
 
       reset();
 
       if (isMountedRef.current) {
-        setError('afterSubmit', { ...error, message: error.message });
+        setError('afterSubmit', { ...error, message: error.data.message });
       }
     }
   };
@@ -74,6 +75,7 @@ export default function LoginForm() {
   return (
     <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
       <Stack spacing={3}>
+        <Alert severity='info'>Email : admin@linksehat.dev & Password : password</Alert>
         {!!errors.afterSubmit && <Alert severity="error">{errors.afterSubmit.message}</Alert>}
 
         <RHFTextField name="email" label="Email address" />

frontend/dashboard/src/sections/dashboard/SomethingUsage.tsx

@@ -0,0 +1,80 @@
+import merge from 'lodash/merge';
+import ReactApexChart from 'react-apexcharts';
+// @mui
+import { styled } from '@mui/material/styles';
+import { Card, Typography, Stack } from '@mui/material';
+// utils
+import { fCurrency, fPercent } from '../../utils/formatNumber';
+// components
+import Iconify from '../../components/Iconify';
+import BaseOptionChart from '../../components/chart/BaseOptionChart';
+
+// ----------------------------------------------------------------------
+
+const RootStyle = styled(Card)(({ theme }) => ({
+  boxShadow: 'none',
+  padding: theme.spacing(3),
+  color: theme.palette.primary.darker,
+  backgroundColor: theme.palette.primary.lighter,
+}));
+
+// ----------------------------------------------------------------------
+
+const INITIAL = 500000000
+const TOTAL = 257907000;
+const PERCENT = -3;
+const CHART_DATA = [{ data: [100, 99, 99, 85, 74, 57, 54, 51] }];
+
+export default function SomethingUsage() {
+  const chartOptions = merge(BaseOptionChart(), {
+    chart: { sparkline: { enabled: true } },
+    xaxis: { labels: { show: true } },
+    yaxis: { labels: { show: false } },
+    stroke: { width: 4 },
+    legend: { show: false },
+    grid: { show: false },
+    tooltip: {
+      marker: { show: false },
+      y: {
+        formatter: (seriesName: string) => (seriesName) + "%",
+        title: {
+          formatter: () => '',
+        },
+      },
+    },
+    fill: { gradient: { opacityFrom: 0, opacityTo: 0 } },
+  });
+
+  return (
+    <RootStyle>
+      <Stack direction="row" justifyContent="space-between" sx={{ mb: 3 }}>
+        <div>
+          <Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
+            {fCurrency(INITIAL)}
+          </Typography>
+          <Typography sx={{ typography: 'subtitle2' }}>Remaining Balance</Typography>
+          <Typography sx={{ typography: 'h3' }}>{fCurrency(TOTAL)}</Typography>
+        </div>
+
+        <div>
+          <Stack direction="row" alignItems="center" justifyContent="flex-end" sx={{ mb: 0.6 }}>
+            <Iconify
+              width={20}
+              height={20}
+              icon={PERCENT >= 0 ? 'eva:trending-up-fill' : 'eva:trending-down-fill'}
+            />
+            <Typography variant="subtitle2" component="span" sx={{ ml: 0.5 }}>
+              {PERCENT > 0 && '+'}
+              {fPercent(PERCENT)}
+            </Typography>
+          </Stack>
+          <Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
+            &nbsp;than last month
+          </Typography>
+        </div>
+      </Stack>
+
+      <ReactApexChart type="area" series={CHART_DATA} options={chartOptions} height={100} />
+    </RootStyle>
+  );
+}