redesign, added user system, added api endpoints

core/templates/edit.html

@@ -1,13 +1,11 @@
+{% load static %}
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <title>Edit Transaction</title>
-    <style>
-        body { font-family: system-ui, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; }
-        .card { background: #f4f4f5; padding: 20px; border-radius: 8px; }
-        button { background: #3b82f6; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; }
-        .cancel { background: #e4e4e7; color: black; text-decoration: none; padding: 8px 16px; border-radius: 4px; display: inline-block; margin-left: 10px; }
-    </style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Edit Transaction - JAST</title>
+    <link rel="stylesheet" href="{% static 'css/style.css' %}">
 </head>
 <body>
     <h2>Editing: {{ transaction.title }}</h2>

core/templates/home.html

@@ -1,25 +1,30 @@
+{% load static %}
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <title>DIME Tracker</title>
-    <style>
-        body { font-family: system-ui, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; }
-        .card { background: #f4f4f5; padding: 20px; border-radius: 8px; margin-bottom: 30px; }
-        table { width: 100%; border-collapse: collapse; }
-        th, td { padding: 12px; border-bottom: 1px solid #e4e4e7; text-align: left; }
-        .income { color: #16a34a; font-weight: bold; }
-        .expense { color: #dc2626; }
-        button { background: #18181b; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; }
-        .btn-edit { background: #3b82f6; color: white; text-decoration: none; padding: 6px 12px; border-radius: 4px; font-size: 14px; margin-right: 5px; }
-        .btn-delete { background: #ef4444; color: white; padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
-    </style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JAST</title>
+    <link rel="stylesheet" href="{% static 'css/style.css' %}">
 </head>
 <body>
-    <h1>Just another spending tracker</h1>
-    <div style="margin-bottom: 20px;">
-    <h2>Total Balance: {{ total_balance|floatformat:2 }} kr</h2>
-    <a href="{% url 'stats' %}" style="background: #e4e4e7; color: black; text-decoration: none; padding: 8px 16px; border-radius: 4px; font-weight: bold;">View Statistics 📊</a>
+
+    <nav class="navbar">
+        <a href="{% url 'home' %}" class="navbar-brand">JAST</a>
+        <div class="navbar-actions">
+            <a href="{% url 'stats' %}" class="btn btn-stats">View Statistics 📊</a>
+            <form action="{% url 'logout' %}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure you want to log out?');">
+                {% csrf_token %}
+                <button type="submit" class="btn btn-logout">Logout</button>
+            </form>
+        </div>
+    </nav>
+
+    <div class="header-section">
+        <h1>Hello, {% if user.first_name %}{{ user.first_name }} {{ user.last_name }}{% else %}{{ user.username }}{% endif %}!</h1>
+        <p class="balance-text">Total Balance: <strong>{{ total_balance|floatformat:2 }} kr</strong></p>
     </div>
+
     <div class="card">
         <h3>Add Transaction</h3>
         <form method="POST">
@@ -30,32 +35,37 @@
     </div>
 
     <table>
-        <tr>
-            <th>Date</th>
-            <th>Title</th>
-            <th>Category</th>
-            <th>Amount</th>
-            <th>Actions</th>
-        </tr>
-        {% for t in transactions %}
-        <tr>
-            <td>{{ t.date }}</td>
-            <td>{{ t.title }}</td>
-            <td>{{ t.category.name|default:"-" }}</td>
-            <td class="{% if t.is_income %}income{% else %}expense{% endif %}">
-                {{ t.amount }} kr
-            </td>
-            <td>
-                <a href="{% url 'edit_transaction' t.pk %}" class="btn-edit">Edit</a>
-                <form action="{% url 'delete_transaction' t.pk %}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure you want to delete this transaction?');">
-                    {% csrf_token %}
-                    <button type="submit" class="btn-delete">Delete</button>
-                </form>
-            </td>
-        </tr>
-        {% empty %}
-        <tr><td colspan="5">No transactions yet. Start spending!</td></tr>
-        {% endfor %}
+        <thead>
+            <tr>
+                <th>Date</th>
+                <th>Title</th>
+                <th>Category</th>
+                <th>Amount</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for t in transactions %}
+            <tr>
+                <td>{{ t.date }}</td>
+                <td>{{ t.title }}</td>
+                <td>{{ t.category.name|default:"-" }}</td>
+                <td class="{% if t.is_income %}income{% else %}expense{% endif %}">
+                    {{ t.amount }} kr
+                </td>
+                <td>
+                    <a href="{% url 'edit_transaction' t.pk %}" class="btn-edit">Edit</a>
+                    <form action="{% url 'delete_transaction' t.pk %}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure you want to delete this transaction?');">
+                        {% csrf_token %}
+                        <button type="submit" class="btn-delete">Delete</button>
+                    </form>
+                </td>
+            </tr>
+            {% empty %}
+            <tr><td colspan="5">No transactions yet. Start spending!</td></tr>
+            {% endfor %}
+        </tbody>
     </table>
+
 </body>
 </html>

core/templates/registration/login.html

@@ -0,0 +1,23 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - JAST</title>
+    <link rel="stylesheet" href="{% static 'css/style.css' %}">
+</head>
+<body>
+    <div class="auth-container">
+        <h2>Login to JAST</h2>
+        <div class="card">
+            <form method="post">
+                {% csrf_token %}
+                {{ form.as_p }}
+                <button type="submit">Login</button>
+            </form>
+        </div>
+        <p>Don't have an account? <a href="{% url 'register' %}">Register here</a></p>
+    </div>
+</body>
+</html>

core/templates/registration/register.html

@@ -0,0 +1,23 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register - JAST</title>
+    <link rel="stylesheet" href="{% static 'css/style.css' %}">
+</head>
+<body>
+    <div class="auth-container">
+        <h2>Register for JAST</h2>
+        <div class="card">
+            <form method="post">
+                {% csrf_token %}
+                {{ form.as_p }}
+                <button type="submit">Sign Up</button>
+            </form>
+        </div>
+        <p>Already have an account? <a href="{% url 'login' %}">Log in here</a></p>
+    </div>
+</body>
+</html>

core/templates/stats.html

@@ -1,25 +1,30 @@
+{% load static %}
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <title>DIME Statistics</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>JAST 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>
+    <link rel="stylesheet" href="{% static 'css/style.css' %}">
 </head>
 <body>
-    <div class="nav">
-        <a href="{% url 'home' %}">← Back to Tracker</a>
-    </div>
+
+    <!-- Top Navbar -->
+    <nav class="navbar">
+        <a href="{% url 'home' %}" class="navbar-brand">JAST</a>
+        <div class="navbar-actions">
+            <a href="{% url 'home' %}" class="btn btn-nav">← Back to Dashboard</a>
+            <form action="{% url 'logout' %}" method="POST" style="display:inline;" onsubmit="return confirm('Are you sure you want to log out?');">
+                {% csrf_token %}
+                <button type="submit" class="btn btn-logout">Logout</button>
+            </form>
+        </div>
+    </nav>
 
     <h1>Spending Statistics</h1>
 
+    <!-- Time Period Filters -->
     <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>
@@ -27,19 +32,20 @@
         <a href="?filter=all" class="{% if current_filter == 'all' %}active{% endif %}">All Time</a>
     </div>
 
+    <!-- Chart Canvas -->
     <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.font = "16px system-ui, sans-serif";
+            ctx.fillStyle = "#a89984"; // Gruvbox muted text
             ctx.fillText("No expenses logged for this time period.", 10, 50);
         } else {
             new Chart(ctx, {
@@ -49,16 +55,33 @@
                     datasets: [{
                         label: 'Amount Spent (kr)',
                         data: data,
-                        // A simple color palette
-                        backgroundColor: ['#ef4444', '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ec4899', '#14b8a6'],
-                        borderWidth: 1
+                        backgroundColor: [
+                            '#fabd2f', // Gruvbox Yellow
+                            '#fe8019', // Gruvbox Orange
+                            '#fb4934', // Gruvbox Red
+                            '#b8bb26', // Gruvbox Green
+                            '#83a598', // Gruvbox Blue
+                            '#d3869b', // Gruvbox Purple
+                            '#8ec07c'  // Gruvbox Aqua
+                        ],
+                        borderColor: '#3c3836', // Card background color for clean slice gaps
+                        borderWidth: 2
                     }]
                 },
                 options: {
                     responsive: true,
                     maintainAspectRatio: false,
                     plugins: {
-                        legend: { position: 'right' }
+                        legend: { 
+                            position: 'right',
+                            labels: {
+                                color: '#ebdbb2', // Gruvbox primary text
+                                font: {
+                                    family: 'system-ui, -apple-system, sans-serif',
+                                    size: 13
+                                }
+                            }
+                        }
                     }
                 }
             });