Merge pull request #66 from jamesspearsv/feature/admin-reporting-ui

Feature/admin reporting UI

api/src/controllers/adminController.js

@@ -127,8 +127,8 @@ async function countTable(req, res, next) {
 
 async function adminReportGet(req, res, next) {
   try {
-    const { start, end, category } = req.query;
-    if (!start || !end || !category) {
+    const { startMonth, endMonth, category } = req.query;
+    if (!startMonth || !endMonth || !category) {
       throw new BadRequestError("Start, end, and category must be provided");
     }
 
@@ -137,15 +137,18 @@ async function adminReportGet(req, res, next) {
     }
 
     // query database for cumulative interactions counts during range
-    const total_interactions = await queries.countInteractionsAdmin(start, end);
+    const total_interactions = await queries.countInteractionsAdmin(
+      startMonth,
+      endMonth,
+    );
     const total_detailed = await queries.countInteractionByCategoryAdmin(
-      start,
-      end,
+      startMonth,
+      endMonth,
       category,
     );
 
     // parse range between start and end month
-    const range = parseMonthRange(start, end);
+    const range = parseMonthRange(startMonth, endMonth);
     const monthly_details = [];
     // query database for each month in range
     for (const month of range) {
@@ -167,12 +170,15 @@ async function adminReportGet(req, res, next) {
       monthly_details.push(monthObject);
     }
 
+    const keys = Object.keys(monthly_details[0]);
+
     res.json({
       message: "ok",
       range,
       total_interactions,
       total_detailed,
       monthly_details,
+      keys,
     });
   } catch (error) {
     return next(error);

client/src/Admin.jsx

@@ -59,6 +59,7 @@ function Admin() {
         navItems={[
           { label: "Back to App", route: "/" },
           { label: "Dashboard", route: "/admin" },
+          { label: "Reporting", route: "/admin/reporting" },
           { label: "Database", route: "/admin/database" },
         ]}
       />

client/src/components/Button.jsx

@@ -1,9 +1,15 @@
 import PropTypes from "prop-types";
 import styles from "./Button.module.css";
 
-/*
+/**
  * Custom button component
- * Variant corresponds to styles in Button.module.css
+ * @param {string} [id] - prop to set `data-id` property of button
+ * @param {string} text - button text property
+ * @param {(e: Event) => void} [action] - button click callback function
+ * @param {'primary' | 'danger'} variant - styled button variant
+ * @param {'button' | 'submit'} type
+ * @param {Object} [style] - Optional React style object
+ * @returns {JSX.Element}
  */
 
 function Button({ id, text, action, variant, type, style }) {
@@ -23,8 +29,8 @@ function Button({ id, text, action, variant, type, style }) {
 Button.propTypes = {
   id: PropTypes.string,
   text: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-  variant: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(["button", "submit"]).isRequired,
+  variant: PropTypes.oneOf(["primary", "danger"]).isRequired,
   action: PropTypes.func,
   style: PropTypes.object,
 };

client/src/components/CardWrapper.jsx

@@ -1,7 +1,12 @@
 import styles from "./CardWrapper.module.css";
 import PropTypes from "prop-types";
 
-/* Wrapper to provide UI styling to elements */
+/**
+ * Wrapper to provide UI styling to children
+ * @param {React.ReactNode} children
+ * @param {Object} [style] - optional React inline styles
+ * @returns {JSX.Element}
+ */
 
 function CardWrapper({ children, style }) {
   return (

client/src/components/CountReport.jsx

@@ -8,6 +8,13 @@ import styles from "./CountReport.module.css";
  *     id, value, number_of_interactions
  */
 
+/**
+ * Component used to display count summary on app report page
+ * @param {string} title - report title
+ * @param {{id: number, value: string, number_of_interaction: number}} count - report from database
+ * @returns {JSX.Element}
+ */
+
 function CountReport({ title, count }) {
   return (
     <div className={styles.report}>

client/src/components/DateInput.jsx

@@ -3,16 +3,27 @@ import styles from "./DateInput.module.css";
 
 /* Custom date input with label and callback */
 
-function DateInput({ label, value, handleChange }) {
-  const id = label.toLowerCase();
+/**
+ * Custom date input with label and callback
+ * @param {string} id
+ * @param {string} label
+ * @param {'date' | 'month'} type
+ * @param {string} value
+ * @param {(e: Event) => void} handleChange
+ * @returns {JSX.Element}
+ */
 
+function DateInput({ id, label, type, value, handleChange }) {
   return (
     <div className={styles.date}>
-      <label htmlFor={id} className={styles.label}>{`${label} Date`}</label>
+      <label htmlFor={id} className={styles.label}>
+        {label}
+      </label>
       <input
-        type="date"
+        type={type}
         name={id}
         id={id}
+        placeholder={type === "month" ? "YYYY-MM" : undefined}
         value={value}
         onChange={handleChange}
       />
@@ -23,7 +34,9 @@ function DateInput({ label, value, handleChange }) {
 export default DateInput;
 
 DateInput.propTypes = {
+  id: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(["date", "month"]).isRequired,
   value: PropTypes.string.isRequired,
   handleChange: PropTypes.func.isRequired,
 };

client/src/components/ErrorComponent.jsx

@@ -1,6 +1,11 @@
 import PropTypes from "prop-types";
 
-/* Error message page */
+/**
+ * Custom error component used throughout app
+ * @param {string} status - HTTP status code represented as a string
+ * @returns {JSX.Element}
+ * @constructor
+ */
 
 function ErrorComponent({ status }) {
   return (

client/src/components/Form.jsx

@@ -1,6 +1,16 @@
 import PropTypes from "prop-types";
 import styles from "./Form.module.css";
 
+/**
+ * Custom form component used to render and display form elements
+ * @param {(e: Event) => void} [onSubmit] - callback function to run when form is submitted
+ * @param {string} [title] - optional form title
+ * @param {Object} [style] - optional React inline styles
+ * @param {React.ReactNode} children
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
 function Form({ onSubmit, title, style, children }) {
   return (
     <form onSubmit={onSubmit} className={styles.form} style={style}>

client/src/components/Modal.jsx

@@ -3,7 +3,15 @@ import PropTypes from "prop-types";
 import styles from "./Modal.module.css";
 import Button from "./Button";
 
-/* Utility modal component */
+/**
+ * Custom modal component
+ * @param {boolean} isOpen
+ * @param {(boolean) => void} setIsOpen
+ * @param {React.ReactNode} children
+ * @param {Object} [style]
+ * @returns {JSX.Element}
+ * @constructor
+ */
 
 function Modal({ isOpen, setIsOpen, children, style }) {
   const modalRef = useRef(null);

client/src/components/Nav.jsx

@@ -2,7 +2,12 @@ import { NavLink } from "react-router-dom";
 import PropTypes from "prop-types";
 import styles from "./Nav.module.css";
 
-/* App navigation menu */
+/**
+ * Add navigation menu component
+ * @param  {Array<{label: string, route: string}>} navItems
+ * @returns {JSX.Element}
+ * @constructor
+ */
 
 function Nav({ navItems }) {
   return (

client/src/components/SelectInput.jsx

@@ -1,16 +1,23 @@
 import PropTypes from "prop-types";
 import styles from "./SelectInput.module.css";
 
-/* Custom select input with label, options, and callback */
+/**
+ * Custom select input with id, label, options, and a callback
+ * @param {string} id
+ * @param {string} label
+ * @param {Array<{id: number | string, value: string}>}options
+ * @param {(e: Event) => void} handleChange
+ * @param {string} value
+ * @returns {JSX.Element}
+ * @constructor
+ */
 
-function SelectInput({ label, options, handleChange, value }) {
+function SelectInput({ id, label, options, handleChange, value }) {
   const style = {
     display: "flex",
     flexDirection: "column",
   };
 
-  const id = label.toLowerCase();
-
   return (
     <div style={style} className={styles.customSelect}>
       <label htmlFor={id} className={styles.label}>
@@ -29,8 +36,14 @@ function SelectInput({ label, options, handleChange, value }) {
 }
 
 SelectInput.propTypes = {
+  id: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
-  options: PropTypes.array.isRequired,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+      value: PropTypes.string.isRequired,
+    }),
+  ).isRequired,
   handleChange: PropTypes.func.isRequired,
   value: PropTypes.string.isRequired,
 };

client/src/components/TabSelector.jsx

@@ -1,7 +1,14 @@
 import PropTypes from "prop-types";
 import styles from "./TabSelector.module.css";
 
-/* Custom tab selector element */
+/**
+ * Custom tab selector component
+ * @param {Arry<{id: string, label: string}>} tabs
+ * @param {(e: Event) => void} handleClick
+ * @param {string} activeTab
+ * @returns {JSX.Element}
+ * @constructor
+ */
 
 function TabSelector({ tabs, handleClick, activeTab }) {
   return (

client/src/components/Table.jsx

@@ -6,6 +6,17 @@ import Button from "../components/Button.jsx";
  * Component to parse and render a given dataset in a table format
  */
 
+/**
+ * Table component to parse and render a given dataset
+ * @param {Array<Object>} rows - dataset being rendered by table
+ * @param {Array<{key: string, label: value}>} columns - array representing columns in given dataset
+ * @param {Object} [style] - optional react styles object
+ * @param {boolean} [readonly] - boolean value to toggle readonly table mode
+ * @param {{text: string, action: (e: Event) => void}} [button] - optional button for editable tables
+ * @returns {JSX.Element}
+ * @constructor
+ */
+
 function Table({ rows, columns, style, readonly, button }) {
   return (
     <div className={styles.table} style={style}>

client/src/lib/parseMonthInput.js

@@ -0,0 +1,18 @@
+/**
+ * Validates dates strings for YYYY-MM format
+ * @param {Array<string>} inputs
+ * @returns {Array<boolean>}
+ */
+
+export default function parseMonthInput(inputs) {
+  const regex = /[0-9]{4}-[0-9]{2}/;
+  const results = [];
+  for (const input of inputs) {
+    const match = input.match(regex);
+
+    if (!match || match[0] !== input) results.push(false);
+    else results.push(true);
+  }
+
+  return results;
+}

client/src/lib/response.js

@@ -1,5 +1,9 @@
-/*
-Helper functions to validate API responses
+/**
+ * Helper function to validate API responses
+ * @param {Response} res
+ * @param {Object} json
+ * @param {() => void} setAuth
+ * @returns {void}
  */
 
 export function validateAdminResponse(res, json, setAuth) {

client/src/pages-admin/Dashboard/Dashboard.jsx

@@ -2,13 +2,18 @@ import { Navigate, useOutletContext } from "react-router-dom";
 import DashboardStats from "./DashboardStats.jsx";
 import DashboardTable from "./DashboardTable.jsx";
 
+/**
+ * Dashboard page in admin app
+ * @returns {JSX.Element}
+ */
+
 function Dashboard() {
   const { auth } = useOutletContext();
 
   if (!auth) return <Navigate to={"/admin/login"} />;
 
   return (
-    <div>
+    <div style={{ margin: "0 2.5rem" }}>
       <DashboardStats />
       <DashboardTable />
     </div>

client/src/pages-admin/Dashboard/DashboardStats.jsx

@@ -14,6 +14,11 @@ import {
 import { validateAdminResponse } from "../../lib/response.js";
 import ErrorComponent from "../../components/ErrorComponent.jsx";
 
+/**
+ * Component used to fetch and render database stats
+ * @returns {JSX.Element}
+ */
+
 function DashboardStats() {
   const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#185c36"];
   const { apihost, auth, setAuth } = useOutletContext();
@@ -117,7 +122,7 @@ function DashboardStats() {
                     <div>
                       {row.total_interactions} (
                       {(
-                        (parseFloat(row.total_interactions) /
+                        (parseInt(row.total_interactions) /
                           parseInt(stats.count_total)) *
                         100
                       ).toFixed()}

client/src/pages-admin/Dashboard/DashboardTable.jsx

@@ -7,6 +7,11 @@ import CardWrapper from "../../components/CardWrapper.jsx";
 import ErrorComponent from "../../components/ErrorComponent.jsx";
 import { validateAdminResponse } from "../../lib/response.js";
 
+/**
+ * Component used to fetch and render all rows in interactions table
+ * @returns {JSX.Element}
+ */
+
 function DashboardTable() {
   const { apihost, auth, setAuth } = useOutletContext();
   const [rows, setRows] = useState([]);
@@ -35,7 +40,6 @@ function DashboardTable() {
         validateAdminResponse(res, json, setAuth);
 
         const total = Math.ceil(json.total_rows / limit);
-        console.log(total);
         setTotalPages(total);
       } catch (error) {
         console.error(error);