[SCSE-78] Implement Merch Overview Page

apps/cms/package.json

@@ -15,16 +15,23 @@
     "generate:graphQLSchema": "PAYLOAD_CONFIG_PATH=src/payload.config.ts payload generate:graphQLSchema"
   },
   "dependencies": {
+    "@mui/icons-material": "^5.11.9",
+    "@mui/material": "^5.11.9",
+    "apexcharts": "^3.37.0",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "payload": "^1.3.4",
     "react": "^18.0.0",
+    "react-apexcharts": "^1.4.0",
+    "react-perfect-scrollbar": "^1.5.8",
     "tsconfig": "*"
   },
   "devDependencies": {
     "@types/express": "^4.17.9",
+    "axios": "^1.3.4",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
+    "jest": "^29.5.0",
     "nodemon": "^2.0.6",
     "ts-node": "^9.1.1",
     "tsconfig": "*",

apps/cms/src/__mocks__/axios.tsx

@@ -0,0 +1,23 @@
+const mockResponse = {
+    data: {
+        results: [
+            {
+                name: {
+                    first: "Laith",
+                    last: "Harb"
+                },
+                picture: {
+                    large: "https://randomuser.me/api/portraits/men/59.jpg"
+                },
+                login: {
+                    username: "ThePhonyGOAT"
+                }
+            }
+        ]
+    }
+}
+
+
+export default {
+    get: jest.fn().mockResolvedValue(mockResponse)
+}

apps/cms/src/admin/components/Budget.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { Avatar, Box, Card, CardContent, Grid, Typography } from '@mui/material';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import MoneyIcon from '@mui/icons-material/Money';
+
+const Budget = (props) => {
+    return ( 
+        <Card
+        sx={{ height: '100%' }}
+        {...props}
+      >
+        <CardContent>
+          <Grid
+            container
+            spacing={3}
+            sx={{ justifyContent: 'space-between' }}
+          >
+            <Grid item>
+              <Typography
+                color="textSecondary"
+                gutterBottom
+                variant="overline"
+              >
+                BUDGET
+              </Typography>
+              <Typography
+                color="textPrimary"
+                variant="h4"
+              >
+                $24k
+              </Typography>
+            </Grid>
+            <Grid item>
+              <Avatar
+                sx={{
+                  backgroundColor: 'error.main',
+                  height: 56,
+                  width: 56
+                }}
+              >
+                <MoneyIcon />
+              </Avatar>
+            </Grid>
+          </Grid>
+          <Box
+            sx={{
+              pt: 2,
+              display: 'flex',
+              alignItems: 'center'
+            }}
+          >
+            <ArrowDownwardIcon color="error" />
+            <Typography
+              color="error"
+              sx={{
+                mr: 1
+              }}
+              variant="body2"
+            >
+              12%
+            </Typography>
+            <Typography
+              color="textSecondary"
+              variant="caption"
+            >
+              Since last month
+            </Typography>
+          </Box>
+        </CardContent>
+      </Card>
+
+    );
+}
+
+export default Budget;

apps/cms/src/admin/components/LatestOrder.tsx

@@ -0,0 +1,168 @@
+import React from "react";
+import { format } from 'date-fns';
+import { v4 as uuid } from 'uuid';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import {
+  Box,
+  Button,
+  Card,
+  CardHeader,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TableSortLabel,
+  Tooltip
+} from '@mui/material';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import { SeverityPill } from './SeverityPill';
+
+const orders = [
+    {
+      id: uuid(),
+      ref: 'Merch 1',
+      amount: 30.5,
+      customer: {
+        name: 'Ekaterina Tankova'
+      },
+      createdAt: 1555016400000,
+      status: 'pending'
+    },
+    {
+      id: uuid(),
+      ref: 'Merch 2',
+      amount: 25.1,
+      customer: {
+        name: 'Cao Yu'
+      },
+      createdAt: 1555016400000,
+      status: 'delivered'
+    },
+    {
+      id: uuid(),
+      ref: 'Merch 3',
+      amount: 10.99,
+      customer: {
+        name: 'Alexa Richardson'
+      },
+      createdAt: 1554930000000,
+      status: 'refunded'
+    },
+    {
+      id: uuid(),
+      ref: 'Merch 4',
+      amount: 96.43,
+      customer: {
+        name: 'Anje Keizer'
+      },
+      createdAt: 1554757200000,
+      status: 'pending'
+    },
+    {
+      id: uuid(),
+      ref: 'Merch 5',
+      amount: 32.54,
+      customer: {
+        name: 'Clarke Gillebert'
+      },
+      createdAt: 1554670800000,
+      status: 'delivered'
+    },
+    {
+      id: uuid(),
+      ref: 'Merch 5',
+      amount: 16.76,
+      customer: {
+        name: 'Adam Denisov'
+      },
+      createdAt: 1554670800000,
+      status: 'delivered'
+    }
+  ];
+
+
+const LatestOrder = (props) => {
+    return ( 
+<Card {...props}>
+    <CardHeader title="Latest Orders" />
+    <PerfectScrollbar>
+      <Box sx={{ minWidth: 800 }}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>
+                Merch Ordered
+              </TableCell>
+              <TableCell>
+                Customer
+              </TableCell>
+              <TableCell sortDirection="desc">
+                <Tooltip
+                  enterDelay={300}
+                  title="Sort"
+                >
+                  <TableSortLabel
+                    active
+                    direction="desc"
+                  >
+                    Date
+                  </TableSortLabel>
+                </Tooltip>
+              </TableCell>
+              <TableCell>
+                Status
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {orders.map((order) => (
+              <TableRow
+                hover
+                key={order.id}
+              >
+                <TableCell>
+                  {order.ref}
+                </TableCell>
+                <TableCell>
+                  {order.customer.name}
+                </TableCell>
+                <TableCell>
+                  {format(order.createdAt, 'dd/MM/yyyy')}
+                </TableCell>
+                <TableCell>
+                  <SeverityPill
+                    color={(order.status === 'delivered' && 'success')
+                    || (order.status === 'refunded' && 'error')
+                    || 'warning'}
+                  >
+                    {order.status}
+                  </SeverityPill>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </Box>
+    </PerfectScrollbar>
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'flex-end',
+        p: 2
+      }}
+    >
+      <Button
+        color="primary"
+        endIcon={<ArrowRightIcon fontSize="small" />}
+        size="small"
+        variant="text"
+      >
+        View all
+      </Button>
+    </Box>
+  </Card>
+    );
+}
+
+export default LatestOrder;

apps/cms/src/admin/components/LineChart.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import useChart from './UseChart';
+
+import dynamic from 'next/dynamic'
+const ReactApexChart = dynamic(() => import('react-apexcharts'), { ssr: false });
+
+
+import {Card, CardHeader, Box} from '@mui/material';
+
+const LineChart = ({title, subheader, chartLabels, chartData, ...other}) => {
+
+    const chartOptions = useChart({
+        plotOptions: { bar: { columnWidth: '16%' } },
+        fill: { type: chartData.map((i) => i.fill) },
+        labels: chartLabels,
+        xaxis: { type: 'datetime' },
+        tooltip: {
+          shared: true,
+          intersect: false,
+          y: {
+            formatter: (y) => {
+              if (typeof y !== 'undefined') {
+                return `${y.toFixed(0)} sales`;
+              }
+              return y;
+            },
+          },
+        },
+      });
+
+    return (
+    <Card {...other}>
+        <CardHeader
+            title = {title}
+            subheader={subheader} 
+        />
+
+        <Box sx={{ p: 3, pb: 1 }} dir="ltr">
+            <ReactApexChart type="line" series={chartData} options={chartOptions} height={364} />
+        </Box>
+    </Card>
+    );
+}
+
+export default LineChart;