Volunteer Hour Tracking

[AlphaGameDeveloper]

This pull request introduces a new Volunteer Hours Tracking Tool, along with several supporting updates across the codebase. The changes include adding a new page for the tool, implementing the necessary JavaScript functionality, defining styles, and updating configuration and layout files to support the feature.

Volunteer Hours Tracking Tool Implementation:

• New Page for Volunteer Hours Tracking: Added pages/hourTool.html to provide a user interface for logging hours, registering volunteers, viewing volunteer logs, and accessing volunteer statistics. The page includes dynamic content and tab navigation.
• JavaScript Functionality: Created assets/js/volunteer-hours.js to handle the tool's functionality, including API interactions, form submissions, data validation, and dynamic updates for user and hour logs.

Styling Updates:

• Volunteer Hours Styles: Added _sass/_volunteer-hours.scss to define styles for the tool, including responsive design and hover effects for cards and tabs.
• Main Stylesheet Update: Imported the new volunteer-hours styles into assets/css/main.scss.

Configuration and Layout Updates:

• Backend URL Override: Added force_backend_url in _config.yml for easier local testing. Updated _layouts/default.html to use this configuration if present. [1] [2]

[Copilot]

Pull Request Overview

This pull request introduces a comprehensive Volunteer Hours Tracking Tool for managing volunteer time logging, registration, and reporting. The implementation adds a new web-based interface with tabbed navigation for different functions and includes backend configuration updates for easier local development.

• New volunteer hours tracking page with tabbed interface for logging hours, registering volunteers, viewing logs, and displaying statistics
• JavaScript functionality for API interactions, form validation, and dynamic content updates
• Styling and responsive design for the volunteer hours interface
• Backend URL configuration override for local testing

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
pages/hourTool.html	New HTML page providing the user interface for the volunteer hours tracking tool with four main tabs
assets/js/volunteer-hours.js	JavaScript implementation handling API calls, form submissions, data validation, and UI updates
_sass/_volunteer-hours.scss	Stylesheet defining the visual styling and responsive design for the volunteer hours interface
assets/css/main.scss	Updated to import the new volunteer-hours stylesheet
_layouts/default.html	Modified to support force_backend_url configuration for easier local development
_config.yml	Added commented force_backend_url configuration option for local testing

[Copilot]

The HTML comment block contains API documentation that should be moved to a separate documentation file or removed from the production HTML file, as it adds unnecessary content to the rendered page.

Suggested change

	<!--
	### 6. Get Volunteer Summary for a Single User
	**GET** `/api/volunteer_hours/view/<id>`
	- **Description:** Retrieve all information for a single user, including total hours, name, email, and a list of their volunteer history.
	- **Response:**
	- `200 OK` with a JSON object containing user info, total hours, and a `history` array of all their volunteer logs.
	- `404 Not Found` if the user does not exist.
	**Example Response:**
	```json
	{
	"id": 1,
	"name": "Alice",
	"email": "alice@example.com",
	"total_hours": 12.5,
	"history": [
	{
	"id": 10,
	"date": "2025-08-01",
	"hours": 2.5,
	"notes": "Helped with setup!",
	"created_at": "2025-08-01 12:34:56"
	},
	{
	"id": 7,
	"date": "2025-07-15",
	"hours": 3.0,
	"notes": "Food pantry",
	"created_at": "2025-07-15 09:12:34"
	}
	]
	}
	```
	-->

[Copilot]

The user-stats tab-pane div is not properly nested within the tab-content div that ends at line 179. This will cause the tab content to be incorrectly positioned outside the main tab container.

[Copilot]

The error handling assumes the response contains JSON, but HTTP error responses may not always have a JSON body, which could cause the promise to reject with a SyntaxError when parsing non-JSON content.

Suggested change

	.then(response => {
	if (!response.ok) {
	return response.json().then(errorData => {
	throw new Error(errorData.error || `Failed request - ${response.statusText}`);
	}).catch(e => {
	// If response.json() fails, just use the status text
	if (e instanceof SyntaxError) {
	throw new Error(`Failed request: ${response.statusText}`);
	}
	throw e;
	});
	.then(async response => {
	if (!response.ok) {
	// Try to parse error response as JSON, fallback to text or statusText
	let errorMessage = `Failed request: ${response.statusText}`;
	let bodyText = await response.text();
	try {
	const errorData = JSON.parse(bodyText);
	errorMessage = errorData.error || errorMessage;
	} catch (e) {
	if (bodyText) {
	errorMessage = bodyText;
	}
	}
	throw new Error(errorMessage);

[Copilot]

The variable name changed from site.environment to jekyll.environment, but Jekyll uses site.environment to access the environment variable. This will cause the condition to always evaluate to the production URL.

Suggested change

	window.backendBaseURL = "{% if jekyll.environment == 'development' %}http://localhost:8000/api{% else %}https://stanthonyyouth.alphagame.dev/api{% endif %}";
	window.backendBaseURL = "{% if site.environment == 'development' %}http://localhost:8000/api{% else %}https://stanthonyyouth.alphagame.dev/api{% endif %}";