Feature/31 analytics see summary of a site (#59)

Co-authored-by: Nicolas Dontigny <[email protected]> Co-authored-by: Olivier B <[email protected]>
BesLogic · Mar 24, 2024 · 79b59f2 · 79b59f2
1 parent fc611ce
commit 79b59f2
Showing 1 changed file with 62 additions and 6 deletions.
diff --git a/canopeum_frontend/src/pages/Analytics.tsx b/canopeum_frontend/src/pages/Analytics.tsx
@@ -36,15 +36,71 @@ const Analytics = () => {
 
     return siteSummaries.map(site => (
       <div
-        className='col-12 col-md-6 col-lg-3'
+        className='col-12 col-md-6 col-lg-4'
         key={site.name}
       >
-        <div className='card h-100'>
+        <div className="card h-100 py-3">
           <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 className='d-flex align-items-center card-title'>
+              <div className='bg-primary rounded-circle d-flex justify-content-center align-items-center p-1 me-2'>
+                <span className='material-symbols-outlined text-light'>school</span>
+              </div>
+              <h5 className='mb-0'>{site.name ?? 'Unnamed site'}</h5>
+            </div>
+
+            <div className="card-subtitle my-1">
+              <div className='d-flex align-items-center text-muted'>
+                <span className='material-symbols-outlined fill-icon text-muted me-1'>location_on</span>
+                <span>Missing Location</span>
+              </div>
+              <div className='d-flex align-items-center text-muted'>
+                <span className='material-symbols-outlined fill-icon text-muted me-1'>person</span>
+                <span>Missing Owner</span>
+              </div>
+            </div>
+
+            <div className='card-text mt-2'>
+              <div className='row my-2'>
+                <div className="col-4 d-flex flex-column align-items-center">
+                  <div className='bg-primary rounded-circle d-flex justify-content-center align-items-center p-2'>
+                    <span className='material-symbols-outlined text-light'>psychiatry</span>
+                  </div>
+                  <span>{site.plantCount}</span>
+                  <span className='text-muted'>Planted</span>
+                </div>
+
+                <div className="col-4 d-flex flex-column align-items-center">
+                  <div className='bg-primary rounded-circle d-flex justify-content-center align-items-center p-2'>
+                    <span className='material-symbols-outlined text-light'>forest</span>
+                  </div>
+                  <span>{site.survivedCount}</span>
+                  <span className='text-muted'>Survived</span>
+                </div>
+
+                <div className="col-4 d-flex flex-column align-items-center">
+                  <div className='bg-primary rounded-circle d-flex justify-content-center align-items-center p-2'>
+                    <span className='material-symbols-outlined text-light'>forest</span>
+                  </div>
+                  <span>{site.propagationCount}</span>
+                  <span className='text-muted'>Propagation</span>
+                </div>
+              </div>
+
+              <div className="mt-4 d-flex align-items-center">
+                <div className="flex-grow-1 progress">
+                  <div
+                    className="progress-bar"
+                    role="progressbar"
+                    style={{ width: `${site.progress}%` }}
+                    aria-valuenow={site.progress}
+                    aria-valuemin={0}
+                    aria-valuemax={100}
+                  ></div>
+                </div>
+
+                <span className='text-primary ms-2'>{Math.round(site.progress)}% Sponsored</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>