Volunteer Logging Tool

_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 
@@ -20,6 +21,7 @@ description: >- # this means to ignore newlines until "baseurl:"
 instagram_username: stanthonyyouth.novato
 
 publisher: "St. Anthony de Padua Catholic Parish"
+
 plugins:
   - jekyll-feed
   - jekyll-sitemap

_includes/volunteer-hours/card-footer.html

@@ -0,0 +1,8 @@
+<!-- Card footer with API stats -->
+<div class="card-footer bg-light text-end">
+  <small class="volunteer-hours-footer text-muted">
+    <span class="d-block">Backend v<span class="fw-bold" id="backendVersion{{ include.id }}">LOADING...</span></span>
+    <span class="d-block">API Requests: <span class="fw-bold" id="apiRequests{{ include.id }}">LOADING...</span></span>
+    <span class="d-block">POST: <span class="fw-bold" id="postRequests{{ include.id }}">0</span> | Failed: <span class="fw-bold" id="failedRequests{{ include.id }}">0</span></span>
+  </small>
+</div>

_includes/volunteer-hours/create-user-form.html

@@ -0,0 +1,26 @@
+<!-- Create user form -->
+<form id="createUserForm">
+  <div class="mb-3">
+    <label for="nameInput" class="form-label">Name</label>
+    <input type="text" class="form-control" id="nameInput" required>
+  </div>
+  <div class="mb-3">
+    <label for="emailInput" class="form-label">Email</label>
+    <input type="email" class="form-control" id="emailInput" required>
+  </div>
+  <div class="mb-3">
+    <label for="phoneInput" class="form-label">Phone (optional)</label>
+    <input type="tel" class="form-control" id="phoneInput">
+  </div>
+  <div class="d-grid">
+    <button type="submit" class="btn btn-success">
+      <i class="fas fa-user-plus me-2"></i>Register Volunteer
+    </button>
+  </div>
+</form>
+<div class="alert alert-success mt-3 d-none" id="createUserSuccess">
+  Volunteer registered successfully!
+</div>
+<div class="alert alert-danger mt-3 d-none" id="createUserError">
+  Error registering volunteer. Please try again.
+</div>

_includes/volunteer-hours/log-hours-form.html

@@ -0,0 +1,33 @@
+<!-- Log hours form -->
+<form id="logHoursForm">
+  <div class="mb-3">
+    <label for="userSelect" class="form-label">Volunteer</label>
+    <select class="form-select" id="userSelect" required>
+      <option value="">Select volunteer...</option>
+      <!-- Options will be populated dynamically -->
+    </select>
+  </div>
+  <div class="mb-3">
+    <label for="dateInput" class="form-label">Date</label>
+    <input type="date" class="form-control" id="dateInput" required>
+  </div>
+  <div class="mb-3">
+    <label for="hoursInput" class="form-label">Hours</label>
+    <input type="number" class="form-control" id="hoursInput" min="0.5" step="0.5" required>
+  </div>
+  <div class="mb-3">
+    <label for="notesInput" class="form-label">Notes</label>
+    <textarea class="form-control" id="notesInput" rows="3"></textarea>
+  </div>
+  <div class="d-grid">
+    <button type="submit" class="btn btn-primary">
+      <i class="fas fa-save me-2"></i>Submit Hours
+    </button>
+  </div>
+</form>
+<div class="alert alert-success mt-3 d-none" id="logHoursSuccess">
+  Hours logged successfully!
+</div>
+<div class="alert alert-danger mt-3 d-none" id="logHoursError">
+  Error logging hours. Please try again.
+</div>

_includes/volunteer-hours/tab-card.html

@@ -0,0 +1,10 @@
+<!-- Tab card template with customizable header and content -->
+<div class="card shadow-sm volunteer-hours-card">
+  <div class="card-header {{ include.header_class }}" {% if include.header_style %}style="{{ include.header_style }}"{% endif %}>
+    <h5 class="mb-0"><i class="{{ include.icon_class }} me-2"></i>{{ include.title }}</h5>
+  </div>
+  <div class="card-body">
+    {{ include.content }}
+  </div>
+  {% include volunteer-hours/card-footer.html id=include.footer_id %}
+</div>

_includes/volunteer-hours/tabs-nav.html

@@ -0,0 +1,23 @@
+<!-- Volunteer hours navigation tabs -->
+<ul class="nav nav-tabs mb-4 volunteer-hours-tabs" id="volunteerTabs" role="tablist">
+  <li class="nav-item" role="presentation">
+    <button class="nav-link active" id="log-hours-tab" data-bs-toggle="tab" data-bs-target="#log-hours" type="button" role="tab" aria-controls="log-hours" aria-selected="true">
+      <i class="fas fa-clock me-2"></i>Log Hours
+    </button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="create-user-tab" data-bs-toggle="tab" data-bs-target="#create-user" type="button" role="tab" aria-controls="create-user" aria-selected="false">
+      <i class="fas fa-user-plus me-2"></i>New Volunteer
+    </button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="view-hours-tab" data-bs-toggle="tab" data-bs-target="#view-hours" type="button" role="tab" aria-controls="view-hours" aria-selected="false">
+      <i class="fas fa-table me-2"></i>View Hours
+    </button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="user-stats-tab" data-bs-toggle="tab" data-bs-target="#user-stats" type="button" role="tab" aria-controls="user-stats" aria-selected="false">
+      <i class="fas fa-chart-bar me-2"></i>My Stats
+    </button>
+  </li>
+</ul>

_includes/volunteer-hours/user-stats.html

@@ -0,0 +1,70 @@
+<!-- User stats selector -->
+<div class="mb-4">
+  <label for="statsUserSelect" class="form-label">Select Volunteer</label>
+  <div class="input-group">
+    <select class="form-select" id="statsUserSelect">
+      <option value="">Choose volunteer...</option>
+      <!-- Options will be populated dynamically -->
+    </select>
+    <button class="btn btn-outline-secondary" type="button" id="loadStatsBtn">
+      <i class="fas fa-search me-1"></i> View Stats
+    </button>
+  </div>
+</div>
+
+<!-- Stats content (hidden until user is selected) -->
+<div id="statsContent" class="d-none">
+  <div class="row mb-4">
+    <div class="col-md-6">
+      <div class="card bg-light">
+        <div class="card-body text-center">
+          <h6 class="card-subtitle mb-1 text-muted">Volunteer Name</h6>
+          <h4 class="card-title" id="statsName">-</h4>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-6">
+      <div class="card bg-light">
+        <div class="card-body text-center">
+          <h6 class="card-subtitle mb-1 text-muted">Total Hours</h6>
+          <h4 class="card-title" id="statsTotalHours">-</h4>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <h5 class="border-bottom pb-2 mb-3">Volunteer History</h5>
+  <div class="table-responsive">
+    <table class="table table-striped table-hover" id="userHistoryTable">
+      <thead>
+        <tr>
+          <th>Date</th>
+          <th>Hours</th>
+          <th>Notes</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!-- Table will be populated dynamically -->
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<!-- Empty state (shown before selecting a user) -->
+<div id="statsEmptyState" class="text-center py-4">
+  <i class="fas fa-user-clock fa-3x mb-3 text-muted"></i>
+  <p>Select a volunteer to view their stats</p>
+</div>
+
+<!-- Loading spinner -->
+<div id="statsLoading" class="text-center py-4 d-none">
+  <div class="spinner-border text-primary" role="status">
+    <span class="visually-hidden">Loading...</span>
+  </div>
+  <p class="mt-2">Loading volunteer stats...</p>
+</div>
+
+<!-- Error message -->
+<div class="alert alert-danger mt-3 d-none" id="statsError">
+  Error retrieving volunteer stats. Please try again.
+</div>

_includes/volunteer-hours/view-hours-table.html

@@ -0,0 +1,29 @@
+<!-- View hours table -->
+<div class="table-responsive">
+  <table class="table table-striped table-hover" id="hoursTable">
+    <thead>
+      <tr>
+        <th>Name</th>
+        <th>Date</th>
+        <th>Hours</th>
+        <th>Notes</th>
+        <th class="text-center">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Table will be populated dynamically -->
+    </tbody>
+  </table>
+</div>
+<div class="alert alert-info mt-3 d-none" id="noHoursData">
+  No volunteer hours have been logged yet.
+</div>
+<div class="alert alert-danger mt-3 d-none" id="viewHoursError">
+  Error retrieving volunteer hours. Please try again.
+</div>
+<div class="alert alert-success mt-3 d-none" id="deleteHoursSuccess">
+  Entry deleted successfully.
+</div>
+<div class="alert alert-danger mt-3 d-none" id="deleteHoursError">
+  Error deleting entry. Please try again.
+</div>

_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/_base.scss

@@ -8,6 +8,12 @@
 @use "sass:color";
 
 // Base Styles
+html, body {
+  overflow-x: hidden; // Prevent horizontal scrolling
+  width: 100%;
+  position: relative;
+}
+
 body {
   font-family: $font-secondary;
   color: #333;

_sass/_footer.scss

@@ -9,6 +9,9 @@
 .site-footer {
   background-color: #1a1a1a;
   color: rgb(255 255 255 / 80%);
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 .footer-links {