Volunteer Hour Tracking

_config.yml

@@ -10,6 +10,7 @@ admin_email: damien@alphagame.dev
 # TODO: Add this at launch.
 # tracking_id:
 
+# force_backend_url: "http://192.168.0.167:8000/api" # Temporary for local testing FIXME: Remove this line
 permalink: /news/:year/:month/:title
 description: >- # this means to ignore newlines until "baseurl:"
   St. Anthony de Padua Catholic Parish Confirmation Program, guiding youth 

_layouts/default.html

@@ -10,7 +10,11 @@
   <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
 
   <script>
-    window.backendBaseURL = "{% if site.environment == 'development' %}http://localhost:8000/api{% else %}https://stanthonyyouth.alphagame.dev/api{% endif %}";
+    {% if site.force_backend_url %}
+      window.backendBaseURL = "{{ site.force_backend_url }}";
+    {% else %}
+      window.backendBaseURL = "{% if jekyll.environment == 'development' %}http://localhost:8000/api{% else %}https://stanthonyyouth.alphagame.dev/api{% endif %}";
+    {% endif %}
   </script>
   <!-- google analytics (gtag.js) -->
   {% if site.tracking_id %}

_sass/_volunteer-hours.scss

@@ -0,0 +1,66 @@
+/* 
+ * Styles for Volunteer Hours Tracking Tool 
+ */
+
+.volunteer-hours {
+  &-tabs {
+    .nav-link {
+      color: #495057;
+
+      &.active {
+        font-weight: bold;
+      }
+    }
+  }
+
+  &-card {
+    border-radius: 10px;
+    overflow: hidden;
+
+    .card-header {
+      border-bottom: 0;
+    }
+  }
+
+  #statsContent {
+    .card {
+      transition: all 0.3s ease;
+
+      &:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      }
+    }
+
+    h5 {
+      color: #495057;
+    }
+  }
+
+  #statsEmptyState {
+    color: #6c757d;
+    transition: all 0.3s ease;
+
+    i {
+      opacity: 0.7;
+    }
+  }
+
+  // Mobile optimizations
+  @media (max-width: 768px) {
+    .nav-tabs .nav-link {
+      padding: .5rem .75rem;
+      font-size: 0.9rem;
+    }
+
+    .card-body {
+      padding: 1rem;
+    }
+
+    #statsContent {
+      .row > div {
+        margin-bottom: 1rem;
+      }
+    }
+  }
+}

assets/css/main.scss

@@ -18,6 +18,7 @@
 @use "people";
 @use "healthcheck";
 @use "registration";
+@use "volunteer-hours";
 
 // note - for some gosh darn reason, if I include the following blockcomment at the top,
 // it will repeat the comment a million times in the compiled CSS.