Feature/analytics 1 page layout (#56)

canopeum_frontend/src/App.scss

@@ -15,27 +15,27 @@ body {
 }
 
 .navbar {
-    position: sticky;
-    top: 0;
-    z-index: 1000;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
-    padding-bottom: 0;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  padding-bottom: 0;
 }
 
 .navbar-logo {
-    padding-bottom: 0.3rem;
+  padding-bottom: 0.3rem;
 }
 
 .navbar li {
-    border-bottom: 0.3rem solid transparent;
+  border-bottom: 0.3rem solid transparent;
 }
 
 .nav-item.active {
-    border-bottom-color: white;
+  border-bottom-color: white;
 }
 
 .nav-item.active .material-symbols-outlined {
-    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
+  font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
 }
 
 .fill-icon {

canopeum_frontend/src/pages/Analytics.tsx

@@ -1,10 +1,93 @@
-const Analytics = () => (
-  <div>
-    <div className='container mt-2 d-flex flex-column gap-2'>
-      <div className='bg-white rounded-2 px-3 py-2'>
-        <h1>Analytics</h1>
+import { useEffect, useState } from 'react'
+
+import type { SiteSummary } from '../services/api';
+import api from '../services/apiInterface';
+import { ensureError } from '../services/errors';
+
+const Analytics = () => {
+  const [siteSummaries, setSiteSummaries] = useState<SiteSummary[]>([]);
+  const [isLoadingSiteSummaries, setIsLoadingSiteSummaries] = useState(false);
+  const [siteSummariesError, setSiteSummariesError] = useState<Error | undefined>(undefined);
+
+  const fetchSites = async () => {
+    setIsLoadingSiteSummaries(true);
+    try {
+      const response = await api.siteSummary();
+      setSiteSummaries(response);
+    } catch (error_: unknown) {
+      setSiteSummariesError(ensureError(error_));
+    } finally {
+      setIsLoadingSiteSummaries(false);
+    }
+  };
+
+  useEffect((): void => {
+    void fetchSites();
+  }, []);
+
+  const renderSiteCards = () => {
+    if (isLoadingSiteSummaries) {
+      return <p>Loading...</p>
+    }
+
+    if (siteSummariesError) {
+      return <p>Error: {siteSummariesError.message}</p>
+    }
+
+    return siteSummaries.map(site => (
+      <div
+        className='col-12 col-md-6 col-lg-3'
+        key={site.name}
+      >
+        <div className="card h-100">
+          <div className='card-body d-flex flex-column h-100'>
+            <h5 className='card-title'>{site.name ?? 'Unnamed site'}</h5>
+            <p className='card-text'>
+              Site summary content here.
+            </p>
+          </div>
+        </div>
       </div>
+    ))
+  }
+
+
+  const renderSuccessRatesChart = () => (
+    <div>
+      <span>Chart to be rendered here</span>
     </div>
-  </div>
-)
+  )
+
+  return (
+    <div>
+      <div className='container pt-3 d-flex flex-column gap-2'>
+        <div className='d-flex justify-content-between'>
+          <h1 className='text-light'>Manage my Sites</h1>
+
+          <button className='btn btn-secondary' type='button'>Create a New Site</button>
+        </div>
+
+        <div className="mt-2 row gx-3 gy-3">
+          {renderSiteCards()}
+        </div>
+
+        <div className='mt-4 bg-white rounded p-3' >
+          <h2>Average Annual Success Rate Per Site</h2>
+          {renderSuccessRatesChart()}
+        </div>
+
+        <div className='mt-4 bg-white rounded p-3' >
+          <div className='d-flex justify-content-between'>
+            <h2>Batch Tracking</h2>
+            <div>
+              <span>Filters Go Here</span>
+            </div>
+          </div>
+          {renderSuccessRatesChart()}
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export default Analytics