Ready for production deployment

core/templates/stats.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>DIME Statistics</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        body { font-family: system-ui, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; }
+        .nav { margin-bottom: 20px; }
+        .nav a { background: #e4e4e7; color: black; text-decoration: none; padding: 8px 16px; border-radius: 4px; font-weight: bold; }
+        .filters { margin-bottom: 30px; display: flex; gap: 10px; }
+        .filters a { padding: 6px 12px; border-radius: 4px; text-decoration: none; border: 1px solid #d4d4d8; color: black; }
+        .filters a.active { background: #18181b; color: white; border-color: #18181b; }
+        .chart-container { position: relative; height: 400px; width: 100%; margin-top: 20px; }
+    </style>
+</head>
+<body>
+    <div class="nav">
+        <a href="{% url 'home' %}">← Back to Tracker</a>
+    </div>
+
+    <h1>Spending Statistics</h1>
+
+    <div class="filters">
+        <a href="?filter=week" class="{% if current_filter == 'week' %}active{% endif %}">Last 7 Days</a>
+        <a href="?filter=month" class="{% if current_filter == 'month' %}active{% endif %}">Last 30 Days</a>
+        <a href="?filter=year" class="{% if current_filter == 'year' %}active{% endif %}">Last 365 Days</a>
+        <a href="?filter=all" class="{% if current_filter == 'all' %}active{% endif %}">All Time</a>
+    </div>
+
+    <div class="chart-container">
+        <canvas id="categoryChart"></canvas>
+    </div>
+
+    <script>
+        // Parse the JSON data passed from Django
+        const labels = JSON.parse('{{ labels|safe }}');
+        const data = JSON.parse('{{ data|safe }}');
+
+        const ctx = document.getElementById('categoryChart').getContext('2d');
+        
+        if (data.length === 0) {
+            ctx.font = "16px system-ui";
+            ctx.fillText("No expenses logged for this time period.", 10, 50);
+        } else {
+            new Chart(ctx, {
+                type: 'doughnut',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Amount Spent (kr)',
+                        data: data,
+                        // A simple color palette
+                        backgroundColor: ['#ef4444', '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899', '#14b8a6'],
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: { position: 'right' }
+                    }
+                }
+            });
+        }
+    </script>
+</body>
+</html>