Merge pull request #76 from otienodominic/ft-dashboard

Added Admin User dashboard

components/Dashboard/Chart.js

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import dynamic from 'next/dynamic'
+const DynamicComponentWithNoSSR = dynamic(
+  () => import('@mui/material/styles'),
+  { ssr: false }
+)
+const { LineChart, axisClasses } = DynamicComponentWithNoSSR;
+// import { LineChart, axisClasses } from '@mui/x-charts';
+
+import Title from './Title';
+
+function createData(month, users) {
+    return{month, users: users ?? null}
+}
+
+const data = [
+    createData('Jan', 3),
+    createData('Feb', 5),
+    createData('Mar', 4),
+    createData('Apr', 5),
+    createData('May', 4),
+    createData('Jun', 45),
+    createData('Jul', 4),
+    createData('Aug', 95),
+    createData('Sep', 14),
+    createData('Oct', 45),
+    createData('Nov', 24),
+    createData('Dec', 15)
+]
+export default function Chart() {
+    const theme = useTheme();
+
+    return(
+        <React.Fragment>
+            <Title>Today</Title>
+      <div style={{ width: '100%', flexGrow: 1, overflow: 'hidden' }}>
+        <LineChart
+          dataset={data}
+          margin={{
+            top: 16,
+            right: 20,
+            left: 70,
+            bottom: 30,
+          }}
+          xAxis={[
+            {
+              scaleType: 'point',
+              dataKey: 'month',
+              tickNumber: 2,
+              tickLabelStyle: theme.typography.body2,
+            },
+          ]}
+          yAxis={[
+            {
+              label: 'Sales ($)',
+              labelStyle: {
+                ...theme.typography.body1,
+                fill: theme.palette.text.primary,
+              },
+              tickLabelStyle: theme.typography.body2,
+              max: 2500,
+              tickNumber: 3,
+            },
+          ]}
+          series={[
+            {
+              dataKey: 'users',
+              showMark: false,
+              color: theme.palette.primary.light,
+            },
+          ]}
+          sx={{
+            [`.${axisClasses.root} line`]: { stroke: theme.palette.text.secondary },
+            [`.${axisClasses.root} text`]: { fill: theme.palette.text.secondary },
+            [`& .${axisClasses.left} .${axisClasses.label}`]: {
+              transform: 'translateX(-25px)',
+            },
+          }}
+        />
+      </div>
+        </React.Fragment>
+    )
+}

components/Dashboard/Concepts.js

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import Link from '@mui/material/Link';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Title from './Title';
+
+// Generate Order Data
+function createData(id, date, name, shipTo, paymentMethod, amount) {
+  return { id, date, name, shipTo, paymentMethod, amount };
+}
+
+const rows = [
+  createData(
+    0,
+    '16 Mar, 2023',
+    'Malaria with mentioned HIV',
+    'Diagnosis',
+    'SNOMED-4355',
+    "WHO",
+  ),
+  createData(
+    1,
+    '16 Mar, 2019',
+    'Paul McCartney',
+    'Diagnosis',
+    'SNOMED-9993',
+    "WHO",
+  ),
+  createData(
+    2,
+     '16 Mar, 2019',
+      'Tom Scholz', 
+      'Diagnosis',
+       'MAKON', 
+       "WHO"
+       ),
+  createData(
+    3,
+    '16 Mar, 2019',
+    'Michael Jackson',
+    'Diagnosis',
+    'ICD-11',
+    "WHO",
+  ),
+  createData(
+    4,
+    '15 Mar, 2019',
+    'Bruce Springsteen',
+    'Diagnosis',
+    'SNOMED-3663',
+    "WHO",
+  ),
+];
+
+function preventDefault(event) {
+  event.preventDefault();
+}
+
+export default function Orders() {
+  return (
+    <React.Fragment>
+      <Title>Recent Concepts</Title>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell>Date Created</TableCell>
+            <TableCell>Concept Name</TableCell>
+            <TableCell>Class</TableCell>
+            <TableCell>Mapping</TableCell>
+            <TableCell align="right">Source</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.id}>
+              <TableCell>{row.date}</TableCell>
+              <TableCell>{row.name}</TableCell>
+              <TableCell>{row.shipTo}</TableCell>
+              <TableCell>{row.paymentMethod}</TableCell>
+              <TableCell align="right">{`${row.amount}`}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <Link color="primary" href="#" onClick={preventDefault} sx={{ mt: 3 }}>
+        See more concepts
+      </Link>
+    </React.Fragment>
+  );
+}

components/Dashboard/RecentConcepts.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import Title from './Title';
+
+function preventDefault(event) {
+  event.preventDefault();
+}
+
+export default function Deposits() {
+  return (
+    <React.Fragment>
+       <Title>Recent Concepts</Title>
+      <Typography component="p" variant="h4">
+       Total 3,024
+      </Typography>
+      <Typography color="text.secondary" sx={{ flex: 1 }}>
+      {new Date().toISOString().split('T')[0] }
+      </Typography>
+      <div>
+        <Link color="primary" href="#" onClick={preventDefault}>
+          View more Statistics
+        </Link>
+      </div> 
+    </React.Fragment>
+  );
+}

components/Dashboard/Title.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+
+function Title(props) {
+  return (
+    <Typography component="h2" variant="h6" color="primary" gutterBottom>
+      {props.children}
+    </Typography>
+  );
+}
+
+Title.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Title;