Development

src/app/components/Footer.jsx

@@ -39,11 +39,7 @@ const Footer = () => {
       <AppBar color="primary" position="static" sx={{ zIndex: 96 }}>
         <AppFooter>
           <FooterContent>
-            <a href="https://ui-lib.com/downloads/matx-pro-react-admin/">
-              <Button variant="contained" color="secondary">
-                Get MatX Pro
-              </Button>
-            </a>
+
             <Span sx={{ m: 'auto' }}></Span>
             <Paragraph sx={{ m: 0 }}>
               Design and Developed by <a href="http://ui-lib.com">UI Lib</a>

src/app/navigations copy.js

@@ -0,0 +1,47 @@
+export const navigations = [
+  { name: 'Dashboard', path: '/dashboard/default', icon: 'dashboard' },
+  { label: 'PAGES', type: 'label' },
+  {
+    name: 'Session/Auth',
+    icon: 'security',
+    children: [
+      { name: 'Sign in', iconText: 'SI', path: '/session/signin' },
+      { name: 'Sign up', iconText: 'SU', path: '/session/signup' },
+      { name: 'Forgot Password', iconText: 'FP', path: '/session/forgot-password' },
+      { name: 'Error', iconText: '404', path: '/session/404' }
+    ]
+  },
+  { label: 'Components', type: 'label' },
+  {
+    name: 'Components',
+    icon: 'favorite',
+    badge: { value: '30+', color: 'secondary' },
+    children: [
+      { name: 'Auto Complete', path: '/material/autocomplete', iconText: 'A' },
+      { name: 'Buttons', path: '/material/buttons', iconText: 'B' },
+      { name: 'Checkbox', path: '/material/checkbox', iconText: 'C' },
+      { name: 'Dialog', path: '/material/dialog', iconText: 'D' },
+      { name: 'Expansion Panel', path: '/material/expansion-panel', iconText: 'E' },
+      { name: 'Form', path: '/material/form', iconText: 'F' },
+      { name: 'Icons', path: '/material/icons', iconText: 'I' },
+      { name: 'Menu', path: '/material/menu', iconText: 'M' },
+      { name: 'Progress', path: '/material/progress', iconText: 'P' },
+      { name: 'Radio', path: '/material/radio', iconText: 'R' },
+      { name: 'Switch', path: '/material/switch', iconText: 'S' },
+      { name: 'Slider', path: '/material/slider', iconText: 'S' },
+      { name: 'Snackbar', path: '/material/snackbar', iconText: 'S' },
+      { name: 'Table', path: '/material/table', iconText: 'T' }
+    ]
+  },
+  {
+    name: 'Charts',
+    icon: 'trending_up',
+    children: [{ name: 'Echarts', path: '/charts/echarts', iconText: 'E' }]
+  },
+  {
+    name: 'Documentation',
+    icon: 'launch',
+    type: 'extLink',
+    path: 'http://demos.ui-lib.com/matx-react-doc/'
+  }
+];

src/app/navigations.js

@@ -1,47 +1,4 @@
 export const navigations = [
   { name: 'Dashboard', path: '/dashboard/default', icon: 'dashboard' },
-  { label: 'PAGES', type: 'label' },
-  {
-    name: 'Session/Auth',
-    icon: 'security',
-    children: [
-      { name: 'Sign in', iconText: 'SI', path: '/session/signin' },
-      { name: 'Sign up', iconText: 'SU', path: '/session/signup' },
-      { name: 'Forgot Password', iconText: 'FP', path: '/session/forgot-password' },
-      { name: 'Error', iconText: '404', path: '/session/404' }
-    ]
-  },
-  { label: 'Components', type: 'label' },
-  {
-    name: 'Components',
-    icon: 'favorite',
-    badge: { value: '30+', color: 'secondary' },
-    children: [
-      { name: 'Auto Complete', path: '/material/autocomplete', iconText: 'A' },
-      { name: 'Buttons', path: '/material/buttons', iconText: 'B' },
-      { name: 'Checkbox', path: '/material/checkbox', iconText: 'C' },
-      { name: 'Dialog', path: '/material/dialog', iconText: 'D' },
-      { name: 'Expansion Panel', path: '/material/expansion-panel', iconText: 'E' },
-      { name: 'Form', path: '/material/form', iconText: 'F' },
-      { name: 'Icons', path: '/material/icons', iconText: 'I' },
-      { name: 'Menu', path: '/material/menu', iconText: 'M' },
-      { name: 'Progress', path: '/material/progress', iconText: 'P' },
-      { name: 'Radio', path: '/material/radio', iconText: 'R' },
-      { name: 'Switch', path: '/material/switch', iconText: 'S' },
-      { name: 'Slider', path: '/material/slider', iconText: 'S' },
-      { name: 'Snackbar', path: '/material/snackbar', iconText: 'S' },
-      { name: 'Table', path: '/material/table', iconText: 'T' }
-    ]
-  },
-  {
-    name: 'Charts',
-    icon: 'trending_up',
-    children: [{ name: 'Echarts', path: '/charts/echarts', iconText: 'E' }]
-  },
-  {
-    name: 'Documentation',
-    icon: 'launch',
-    type: 'extLink',
-    path: 'http://demos.ui-lib.com/matx-react-doc/'
-  }
+  { label: 'Logout', type: 'label' },  
 ];

src/app/views/dashboard/Analytics-backup.jsx

@@ -0,0 +1,72 @@
+import { Card, Grid, styled, useTheme } from '@mui/material';
+import { Fragment } from 'react';
+import Campaigns from './shared/Campaigns';
+import DoughnutChart from './shared/Doughnut';
+import RowCards from './shared/RowCards';
+import StatCards from './shared/StatCards';
+import StatCards2 from './shared/StatCards2';
+import TopSellingTable from './shared/TopSellingTable';
+import UpgradeCard from './shared/UpgradeCard';
+
+const ContentBox = styled('div')(({ theme }) => ({
+  margin: '30px',
+  [theme.breakpoints.down('sm')]: { margin: '16px' },
+}));
+
+const Title = styled('span')(() => ({
+  fontSize: '1rem',
+  fontWeight: '500',
+  marginRight: '.5rem',
+  textTransform: 'capitalize',
+}));
+
+const SubTitle = styled('span')(({ theme }) => ({
+  fontSize: '0.875rem',
+  color: theme.palette.text.secondary,
+}));
+
+const H4 = styled('h4')(({ theme }) => ({
+  fontSize: '1rem',
+  fontWeight: '500',
+  marginBottom: '16px',
+  textTransform: 'capitalize',
+  color: theme.palette.text.secondary,
+}));
+
+const Analytics = () => {
+  const { palette } = useTheme();
+
+  return (
+    <Fragment>
+      <ContentBox className="analytics">
+        <Grid container spacing={3}>
+          <Grid item lg={8} md={8} sm={12} xs={12}>
+            <StatCards />
+            <TopSellingTable />
+            <StatCards2 />
+
+            <H4>Ongoing Projects</H4>
+            <RowCards />
+          </Grid>
+
+          <Grid item lg={4} md={4} sm={12} xs={12}>
+            <Card sx={{ px: 3, py: 2, mb: 3 }}>
+              <Title>Traffic Sources</Title>
+              <SubTitle>Last 30 days</SubTitle>
+
+              <DoughnutChart
+                height="300px"
+                color={[palette.primary.dark, palette.primary.main, palette.primary.light]}
+              />
+            </Card>
+
+            <UpgradeCard />
+            <Campaigns />
+          </Grid>
+        </Grid>
+      </ContentBox>
+    </Fragment>
+  );
+};
+
+export default Analytics;

src/app/views/dashboard/Analytics.jsx

@@ -1,68 +1,62 @@
-import { Card, Grid, styled, useTheme } from '@mui/material';
+import { Grid, styled, useTheme } from '@mui/material';
 import { Fragment } from 'react';
-import Campaigns from './shared/Campaigns';
-import DoughnutChart from './shared/Doughnut';
-import RowCards from './shared/RowCards';
-import StatCards from './shared/StatCards';
+
+// import Campaigns from './shared/Campaigns';
+// import DoughnutChart from './shared/Doughnut';
+// import RowCards from './shared/RowCards';
+// import StatCards from './shared/StatCards';
 import StatCards2 from './shared/StatCards2';
-import TopSellingTable from './shared/TopSellingTable';
-import UpgradeCard from './shared/UpgradeCard';
+// import TopSellingTable from './shared/TopSellingTable';
+// import UpgradeCard from './shared/UpgradeCard';
+
+import SimpleCard from 'app/components/SimpleCard';
+import AreaChart from '../charts/echarts/AreaChart';
+import PaginationTable from '../material-kit/tables/PaginationTable';
+import DoughnutChart from '../charts/echarts/Doughnut';
+
 
 const ContentBox = styled('div')(({ theme }) => ({
   margin: '30px',
   [theme.breakpoints.down('sm')]: { margin: '16px' },
 }));
-
-const Title = styled('span')(() => ({
-  fontSize: '1rem',
-  fontWeight: '500',
-  marginRight: '.5rem',
-  textTransform: 'capitalize',
-}));
-
-const SubTitle = styled('span')(({ theme }) => ({
-  fontSize: '0.875rem',
-  color: theme.palette.text.secondary,
-}));
-
-const H4 = styled('h4')(({ theme }) => ({
-  fontSize: '1rem',
+const H1 = styled('h3')(({ textcolor }) => ({
+  margin: 0,
   fontWeight: '500',
-  marginBottom: '16px',
-  textTransform: 'capitalize',
-  color: theme.palette.text.secondary,
+  marginLeft: '12px',
 }));
-
 const Analytics = () => {
-  const { palette } = useTheme();
+  const theme = useTheme();
 
   return (
     <Fragment>
       <ContentBox className="analytics">
         <Grid container spacing={3}>
-          <Grid item lg={8} md={8} sm={12} xs={12}>
-            <StatCards />
-            <TopSellingTable />
-            <StatCards2 />
+          <Grid item lg={12} md={12} sm={12} xs={12}>
 
-            <H4>Ongoing Projects</H4>
-            <RowCards />
+            <SimpleCard title="When did I Buy?">
+              <AreaChart height="350px" color={[theme.palette.primary.main]} />
+            </SimpleCard>
+          </Grid>
+          <Grid item lg={8} md={8} sm={12} xs={12}>
+            <SimpleCard title="My Home">
+              <PaginationTable />
+            </SimpleCard>
           </Grid>
 
           <Grid item lg={4} md={4} sm={12} xs={12}>
-            <Card sx={{ px: 3, py: 2, mb: 3 }}>
-              <Title>Traffic Sources</Title>
-              <SubTitle>Last 30 days</SubTitle>
-
+            <StatCards2 />
+            <H1 textcolor={'#08ad6c'}>Where's My Money</H1>
               <DoughnutChart
-                height="300px"
-                color={[palette.primary.dark, palette.primary.main, palette.primary.light]}
+                height="350px"
+                color={[
+                  theme.palette.primary.dark,
+                  theme.palette.primary.main,
+                  theme.palette.primary.light
+                ]}
               />
-            </Card>
 
-            <UpgradeCard />
-            <Campaigns />
           </Grid>
+
         </Grid>
       </ContentBox>
     </Fragment>

src/app/views/dashboard/shared/StatCards2.jsx

@@ -49,7 +49,7 @@ const StatCards2 = () => {
 
   return (
     <Grid container spacing={3} sx={{ mb: 3 }}>
-      <Grid item xs={12} md={6}>
+      <Grid item xs={12} md={12}>
         <Card elevation={3} sx={{ p: 2 }}>
           <ContentBox>
             <FabIcon size="medium" sx={{ background: 'rgba(9, 182, 109, 0.15)' }}>
@@ -67,6 +67,26 @@ const StatCards2 = () => {
           </ContentBox>
         </Card>
       </Grid>
+      {/*
+        <Grid item xs={12} md={6}>
+          <Card elevation={3} sx={{ p: 2 }}>
+            <ContentBox>
+              <FabIcon size="medium" sx={{ background: 'rgba(9, 182, 109, 0.15)' }}>
+                <Icon sx={{ color: '#08ad6c' }}>trending_up</Icon>
+              </FabIcon>
+              <H3 textcolor={'#08ad6c'}>Active Users</H3>
+            </ContentBox>
+
+            <ContentBox sx={{ pt: 2 }}>
+              <H1>10.8k</H1>
+              <IconBox sx={{ background: 'rgba(9, 182, 109, 0.15)' }}>
+                <Icon className="icon">expand_less</Icon>
+              </IconBox>
+              <Span textcolor={'#08ad6c'}>(+21%)</Span>
+            </ContentBox>
+          </Card>
+        </Grid>
+
 
       <Grid item xs={12} md={6}>
         <Card elevation={3} sx={{ p: 2 }}>
@@ -85,7 +105,7 @@ const StatCards2 = () => {
             <Span textcolor={textError}>(+21%)</Span>
           </ContentBox>
         </Card>
-      </Grid>
+      </Grid> */}
     </Grid>
   );
 };