Styled landing page and implemented full stack for dashboard stats

backend/.gitignore

@@ -1 +1,2 @@
-serviceAccountKey.json
+serviceAccountKey.json
+.env

backend/package.json

@@ -11,6 +11,7 @@
     "@types/node": "^18.11.18",
     "@types/swagger-ui-express": "^4.1.3",
     "body-parser": "^1.20.1",
+    "cors": "^2.8.5",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
     "firebase-admin": "^11.11.0",
@@ -28,5 +29,8 @@
     "build": "tsc",
     "test": "jest",
     "swagger": "ts-node -r dotenv/config src/swagger.ts"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.17"
   }
 }

backend/src/customers/views.ts

@@ -108,9 +108,10 @@ docRouter.get("/clusterData/min/:minDate", async (req, res) => {
     );
 });
 
-docRouter.get("/clusterData/max/:maxDate", async (req, res) => {
+docRouter.post("/clusterData/max/:maxDate", async (req, res) => {
   let minDate = new Date("2023-01-01");
   let maxDate = new Date(req.params.maxDate);
+  const { clusterIds } = req.body;
   res
     .status(200)
     .send(

backend/src/index.ts

@@ -5,10 +5,13 @@ import userRouter from "./users/views";
 import swaggerUI from "swagger-ui-express";
 import spec from "../api-spec.json";
 import { dbConnect } from "./database";
-import userRouter from "./users/views";
+import cors from "cors";
+// import userRouter from "./users/views";
 
 const app = express();
 
+app.use(cors());
+
 // Middleware to parse json request bodies
 app.use(bodyParser.json());
 app.use("/api-docs", swaggerUI.serve, swaggerUI.setup(spec));

backend/src/users/controllers.ts

@@ -1,10 +1,10 @@
 import * as admin from 'firebase-admin'
 
-const serviceAccount = require('../../serviceAccountKey.json')
+const serviceAccount = require('./serviceAccountKey.json')
 
-admin.initializeApp({
-  credential: admin.credential.cert(serviceAccount)
-})
+// admin.initializeApp({
+//   credential: admin.credential.cert(serviceAccount)
+// })
 
 /**
  * Modify the claim of a user given user ID and new claim

frontend/package.json

@@ -29,7 +29,7 @@
     "react-leaflet": "^4.2.1",
     "react-native": "^0.72.6",
     "react-router-dom": "^6.18.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "react-simple-maps": "^3.0.0",
     "typescript": "^4.9.5",
     "web-vitals": "^3.1.1"

frontend/src/App.css

@@ -5,6 +5,7 @@ html {
 
 body {
   margin: 0;
+  background-color: #261CA6;
 }
 
 svg {
@@ -31,18 +32,22 @@ ul {
 }
 
 li {
-  float: left;
+  float: right;
 }
 
 li a {
   display: block;
-  color: white;
+  color: #616161;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
+  font: arial;
+  font-weight: 700;
+  size: 24px;
+  line-height: 27.6px;
 }
 
 /* Change the link color to #111 (black) on hover */
 li a:hover {
-  background-color: #111;
+  background-color: #d9d9d9;
 }

frontend/src/App.tsx

@@ -8,6 +8,7 @@ import Login from './pages/login'
 import Forms from './pages/forms'
 import Navbar from './components/navbar';
 
+
 function App() {
   const bottomLeft = [-30, -10];
   const topRight = [40, 30];
@@ -47,7 +48,7 @@ function App() {
   const components = [locationElement, meshElement];
   return (
     <Router>
-      <Navbar/>
+      <Navbar />
       <Routes>
         <Route path='/' element={<Landing />} />
         <Route path='/admin' element={<Admin />} />

frontend/src/MapChart.jsx

@@ -0,0 +1,50 @@
+import React from "react";
+import {
+  ComposableMap,
+  Geographies,
+  Geography,
+  Marker,
+  ZoomableGroup
+} from "react-simple-maps";
+
+const MapChart = ({ bottomLeft, topRight, markers }) => {
+  const viewBox = `${bottomLeft[0]} ${bottomLeft[1]} ${topRight[0] - bottomLeft[0]} ${topRight[1] - bottomLeft[1]}`;
+
+  return (
+    <svg width={800} height={400} viewBox={viewBox}>
+      <ComposableMap
+        projection="geoEquirectangular"
+        projectionConfig={{
+          scale: 100,
+        }}
+        fill={"grey"}
+        width={topRight[0] - bottomLeft[0]}
+        height={topRight[1] - bottomLeft[1]}
+      >
+        <ZoomableGroup center={[(bottomLeft[0] + topRight[0]) / 2, (bottomLeft[1] + topRight[1]) / 2]} zoom={0.55}
+          minZoom={0.55}
+          maxZoom={0.55}>
+          <Geographies geography={"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json"}>
+            {({ geographies }) =>
+              geographies.map((geo) => (
+                <Geography key={geo.rsmKey} geography={geo} />
+              ))
+            }
+          </Geographies>
+          {markers.map((marker, index) => (
+            <Marker key={index} coordinates={marker}>
+              <g fill="blue">
+                <circle r="1" />
+              </g>
+              <text textAnchor="middle" fill="black" fontSize={5}>
+                filler text
+              </text>
+            </Marker>
+          ))}
+        </ZoomableGroup>
+      </ComposableMap>
+    </svg>
+  );
+};
+
+export default MapChart;

frontend/src/components/StatCard.tsx

@@ -10,11 +10,16 @@ interface StatProps {
 const StatCard: FC<StatProps> = ({ num, text }) => {
   return (
     <Card style={{ boxShadow: "none", borderRadius: "10px", background: "#EEF2EF" }}>
-      <CardContent className='card-content'>
-            <h1 style={{textAlign: "center", fontSize: "2rem"}}>{num} {text}</h1>
+      <CardContent className='card-content' style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <h1 style={{ fontSize: "1.5rem", marginRight: '5px' }}>{num}</h1>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <h1 style={{ fontSize: "1rem" }}>{text}</h1>
+        </div>
       </CardContent>
     </Card>
   );
 };
 
-export default StatCard;
+export default StatCard;

frontend/src/components/navbar.tsx

@@ -1,15 +1,20 @@
 // src/Navbar.js
 import { Link } from 'react-router-dom';
+import logo from '../images/logo.png'
+import { Box } from '@mui/material';
 
 const Navbar = () => {
   return (
     <nav>
-      <ul style={{ background: "#5f9ea0" }}>
+      <ul style={{ background: "#FFFFFF" }}>
+        <li><Link to="/admin">About Us</Link></li>
+        <li><Link to="/dataviz">Custom Visualization</Link></li>
         <li><Link to="/">Home</Link></li>
-        <li><Link to="/admin">Admin</Link></li>
-        <li><Link to="/dataviz">Data Viz</Link></li>
+        <img src={logo} alt="" width="250" height="57" />
+
       </ul>
     </nav>
+
   );
 }
 

frontend/src/map.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+import { ComposableMap, Geographies, Geography } from "react-simple-maps"
+
+interface Props {
+  bottom_left: Array<number>
+  top_right: Array<number>
+  clusters: Array<Array<number>>
+}
+
+const map = ({ bottom_left, top_right, clusters }: Props) => {
+  return (<ComposableMap
+    projection="geoEqualEarth"
+    projectionConfig={{
+      center: [(bottom_left[0] + top_right[0]) / 2, (bottom_left[1] + top_right[1])],
+      scale: 1200,
+    }}
+  >
+    ...
+  </ComposableMap>)
+}
+
+export default map;