created

src/screens/Report.css

@@ -0,0 +1,35 @@
+.report-screen {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.report-screen__content {
+  padding-right: 1em;
+  padding-left: 1em;
+  padding-top: 1em;
+  padding-bottom: 5em;
+}
+
+.report-card {
+  background-color: var(--secondary-bg-clr);
+  padding: 1em;
+  border-radius: 1em;
+  transition: 200ms all;
+  cursor: pointer;
+}
+.report-card:hover {
+  transform: scale(1.01);
+}
+
+.report-card__content {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}
+
+.report-screen__content .card-section {
+  margin-top: 2em;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+}

src/screens/Report.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from "react";
+import { Breadcrumbs, Typography } from "@material-ui/core";
+import { Link } from "react-router-dom";
+import colors from "../data/colors";
+
+import "./Report.css";
+import { fetchReports } from "../utils/requestHelper";
+import moment from "moment";
+
+const Report = () => {
+  const [reports, setReports] = useState<any[]>([]);
+
+  useEffect(() => {
+    fetchReports()
+      .then((res) => setReports(res.data))
+      .catch((e) => console.error(e));
+  }, []);
+
+  return (
+    <div className="report-screen">
+      <div className="report-screen__content">
+        <div className="top">
+          <div className="left-col">
+            <h2>Report</h2>
+            <Breadcrumbs aria-label="breadcrumb" style={{ color: "white" }}>
+              <Link to="/dashboard">Dashboard</Link>
+              <Typography style={{ color: colors.dimmedClr }}>
+                Report
+              </Typography>
+            </Breadcrumbs>
+          </div>
+        </div>
+
+        <div className="card-section">
+          {reports.map((report) => {
+            return (
+              <div className="report-card">
+                <div className="report-card__content">
+                  <h4 className="report-title">{report.name}</h4>
+                  <p className="report-date">
+                    {moment(report.createdAt, "YYYY-MM-DD").format(
+                      "YYYY-MM-DD"
+                    )}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Report;

src/screens/ReportView.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+import "./ReportView.css";
+
+const ReportView = () => {
+  return (
+    <div className="report-view-screen">
+      <h1>Hello</h1>
+    </div>
+  );
+};
+
+export default ReportView;