2025-08-26 14:13:09 -06:00
|
|
|
{{ define "content" }}
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<title>{{.Title}}</title>
|
|
|
|
|
<link
|
|
|
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
|
|
|
|
rel="stylesheet"
|
|
|
|
|
/>
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
|
<script
|
|
|
|
|
type="text/javascript"
|
|
|
|
|
src="https://www.gstatic.com/charts/loader.js"
|
|
|
|
|
></script>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="bg-gray-50">
|
|
|
|
|
<!-- Full Width Container -->
|
|
|
|
|
<div class="min-h-screen w-full flex flex-col">
|
|
|
|
|
<!-- Top Navigation Bar -->
|
|
|
|
|
<div class="bg-white border-b border-gray-200 w-full">
|
|
|
|
|
<div class="px-8 py-6">
|
|
|
|
|
<div class="flex items-center justify-between">
|
|
|
|
|
<div class="flex items-center gap-3">
|
|
|
|
|
<div class="w-8 h-8 bg-blue-600 flex items-center justify-center">
|
|
|
|
|
<i class="fas fa-chart-bar text-white text-sm"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-xl font-semibold text-gray-900">
|
|
|
|
|
Dashboard Overview
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex items-center gap-4">
|
|
|
|
|
<button
|
|
|
|
|
class="px-6 py-2.5 bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-colors"
|
|
|
|
|
>
|
|
|
|
|
<i class="fas fa-download mr-2"></i>Export Data
|
|
|
|
|
</button>
|
2025-08-28 23:27:24 -06:00
|
|
|
<button
|
|
|
|
|
class="px-6 py-2.5 bg-green-600 text-white text-sm font-medium hover:bg-green-700 transition-colors"
|
|
|
|
|
onclick="window.location.href='/addresses/upload-csv'"
|
|
|
|
|
>
|
|
|
|
|
<i class="fas fa-upload mr-2"></i>Import Data
|
|
|
|
|
</button>
|
2025-08-26 14:13:09 -06:00
|
|
|
<button
|
|
|
|
|
class="px-6 py-2.5 border border-gray-300 text-gray-700 text-sm font-medium hover:bg-gray-50 transition-colors"
|
|
|
|
|
>
|
|
|
|
|
<i class="fas fa-filter mr-2"></i>Filter
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Main Dashboard Content -->
|
|
|
|
|
<div class="w-full">
|
|
|
|
|
<!-- Stats Grid - Full Width -->
|
|
|
|
|
<div
|
|
|
|
|
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 bg-white border-b border-gray-200"
|
|
|
|
|
>
|
|
|
|
|
<!-- Active Volunteers -->
|
|
|
|
|
<div
|
|
|
|
|
class="border-r border-gray-200 p-8 hover:bg-gray-50 transition-colors cursor-pointer"
|
|
|
|
|
onclick="focusMap()"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<div
|
|
|
|
|
class="w-12 h-12 bg-blue-50 flex items-center justify-center"
|
|
|
|
|
>
|
|
|
|
|
<i class="fas fa-users text-blue-600 text-lg"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ml-4">
|
|
|
|
|
<p class="text-sm font-medium text-gray-600 mb-1">
|
|
|
|
|
Active Volunteers
|
|
|
|
|
</p>
|
|
|
|
|
<p class="text-2xl font-bold text-gray-900">
|
|
|
|
|
{{.VolunteerCount}}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Addresses Visited -->
|
|
|
|
|
<div
|
|
|
|
|
class="border-r border-gray-200 p-8 hover:bg-gray-50 transition-colors cursor-pointer"
|
|
|
|
|
onclick="updateChart('visitors')"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<div
|
|
|
|
|
class="w-12 h-12 bg-blue-50 flex items-center justify-center"
|
|
|
|
|
>
|
|
|
|
|
<i class="fas fa-map-marker-alt text-blue-600 text-lg"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ml-4">
|
|
|
|
|
<p class="text-sm font-medium text-gray-600 mb-1">
|
|
|
|
|
Addresses Visited
|
|
|
|
|
</p>
|
|
|
|
|
<p class="text-2xl font-bold text-gray-900">
|
|
|
|
|
{{.ValidatedCount}}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Total Donations -->
|
|
|
|
|
<div
|
|
|
|
|
class="border-r border-gray-200 p-8 hover:bg-gray-50 transition-colors cursor-pointer"
|
|
|
|
|
onclick="updateChart('revenue')"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<div
|
|
|
|
|
class="w-12 h-12 bg-blue-50 flex items-center justify-center"
|
|
|
|
|
>
|
|
|
|
|
<i class="fas fa-dollar-sign text-blue-600 text-lg"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ml-4">
|
|
|
|
|
<p class="text-sm font-medium text-gray-600 mb-1">Donation</p>
|
|
|
|
|
<p class="text-2xl font-bold text-gray-900">
|
|
|
|
|
${{.TotalDonations}}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Houses Left -->
|
|
|
|
|
<div
|
|
|
|
|
class="p-8 hover:bg-gray-50 transition-colors cursor-pointer"
|
|
|
|
|
onclick="updateChart('conversion')"
|
|
|
|
|
>
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<div
|
|
|
|
|
class="w-12 h-12 bg-blue-50 flex items-center justify-center"
|
|
|
|
|
>
|
|
|
|
|
<i class="fas fa-percentage text-blue-600 text-lg"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ml-4">
|
|
|
|
|
<p class="text-sm font-medium text-gray-600 mb-1">
|
|
|
|
|
Houses Left
|
|
|
|
|
</p>
|
|
|
|
|
<p class="text-2xl font-bold text-gray-900">
|
|
|
|
|
{{.HousesLeftPercent}}%
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Map Section - Full Width -->
|
|
|
|
|
<div class="bg-white w-full">
|
|
|
|
|
<div class="px-8 py-6">
|
|
|
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-6">
|
|
|
|
|
Location Analytics
|
|
|
|
|
</h3>
|
|
|
|
|
<div id="map" class="w-full h-[850px] border border-gray-200"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
let map;
|
|
|
|
|
|
|
|
|
|
function focusMap() {
|
|
|
|
|
// Center map example
|
|
|
|
|
map.setCenter({ lat: 43.0896, lng: -79.0849 }); // Niagara Falls
|
|
|
|
|
map.setZoom(12);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function initMap() {
|
|
|
|
|
const niagaraFalls = { lat: 43.0896, lng: -79.0849 };
|
|
|
|
|
|
|
|
|
|
map = new google.maps.Map(document.getElementById("map"), {
|
|
|
|
|
zoom: 12,
|
|
|
|
|
center: niagaraFalls,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
new google.maps.Marker({
|
|
|
|
|
position: niagaraFalls,
|
|
|
|
|
map,
|
|
|
|
|
title: "Niagara Falls",
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Google Charts
|
|
|
|
|
google.charts.load("current", { packages: ["corechart", "line"] });
|
|
|
|
|
google.charts.setOnLoadCallback(drawAnalyticsChart);
|
|
|
|
|
|
|
|
|
|
function drawAnalyticsChart() {
|
|
|
|
|
var data = new google.visualization.DataTable();
|
|
|
|
|
data.addColumn("string", "Time");
|
|
|
|
|
data.addColumn("number", "Visitors");
|
|
|
|
|
data.addColumn("number", "Revenue");
|
|
|
|
|
|
|
|
|
|
data.addRows([
|
|
|
|
|
["Jan", 4200, 32000],
|
|
|
|
|
["Feb", 4800, 38000],
|
|
|
|
|
["Mar", 5200, 42000],
|
|
|
|
|
["Apr", 4900, 39000],
|
|
|
|
|
["May", 5800, 45000],
|
|
|
|
|
["Jun", 6200, 48000],
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
var options = {
|
|
|
|
|
title: "Performance Over Time",
|
|
|
|
|
backgroundColor: "transparent",
|
|
|
|
|
hAxis: { title: "Month" },
|
|
|
|
|
vAxis: { title: "Value" },
|
|
|
|
|
colors: ["#3B82F6", "#10B981"],
|
|
|
|
|
chartArea: {
|
|
|
|
|
left: 60,
|
|
|
|
|
top: 40,
|
|
|
|
|
width: "90%",
|
|
|
|
|
height: "70%",
|
|
|
|
|
},
|
|
|
|
|
legend: { position: "top", alignment: "center" },
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var chart = new google.visualization.LineChart(
|
|
|
|
|
document.getElementById("analytics_chart")
|
|
|
|
|
);
|
|
|
|
|
chart.draw(data, options);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateChart(type) {
|
|
|
|
|
drawAnalyticsChart();
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<script
|
|
|
|
|
async
|
|
|
|
|
defer
|
|
|
|
|
src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=initMap"
|
|
|
|
|
></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
{{ end }}
|
