Shrink profile pic

app/routes/main.py

@@ -27,21 +27,11 @@ def dashboard():
     """Render the dashboard shell and default list view."""
     user_tz = timezone(current_user.profile.timezone or 'UTC')
 
-    # Get date range for filters
-    first_reading, last_reading = get_reading_date_range(current_user.id, user_tz)
-    start_date = request.form.get('start_date') or request.args.get('start_date') or (first_reading and first_reading.strftime('%Y-%m-%d'))
-    end_date = request.form.get('end_date') or request.args.get('end_date') or (last_reading and last_reading.strftime('%Y-%m-%d'))
-
     # Calculate weekly averages via SQL
     systolic_avg, diastolic_avg, heart_rate_avg = calculate_weekly_summary_sql(current_user.id)
 
     badges = calculate_progress_badges(current_user.id, user_tz)
 
-    # We will default to showing the list view on initial load
-    page = request.args.get('page', 1, type=int)
-    paginated = fetch_readings_paginated(current_user.id, start_date, end_date, user_tz, page, PAGE_SIZE)
-    annotate_readings(paginated.items, user_tz)
-
     return render_template(
         'dashboard.html',
         profile=current_user.profile,
@@ -49,20 +39,28 @@ def dashboard():
         systolic_avg=systolic_avg,
         diastolic_avg=diastolic_avg,
         heart_rate_avg=heart_rate_avg,
-        start_date=start_date,
-        end_date=end_date,
         delete_form=DeleteForm(),
         active_view='list',
-        # default view context
-        readings=paginated.items,
-        pagination=paginated
     )
 
 @main.route('/dashboard/list', methods=['GET'])
 @login_required
 def dashboard_list():
+    user_tz = timezone(current_user.profile.timezone or 'UTC')
+    page = request.args.get('page', 1, type=int)
+    
+    # List view is no longer constrained by date filter
+    paginated = fetch_readings_paginated(current_user.id, None, None, user_tz, page, PAGE_SIZE)
+    annotate_readings(paginated.items, user_tz)
+    
+    return render_template('partials/dashboard_list.html', readings=paginated.items, pagination=paginated)
+
+@main.route('/dashboard/table', methods=['GET'])
+@login_required
+def dashboard_table():
     user_tz = timezone(current_user.profile.timezone or 'UTC')
     first_reading, last_reading = get_reading_date_range(current_user.id, user_tz)
+    
     start_date = request.args.get('start_date') or (first_reading and first_reading.strftime('%Y-%m-%d'))
     end_date = request.args.get('end_date') or (last_reading and last_reading.strftime('%Y-%m-%d'))
     page = request.args.get('page', 1, type=int)
@@ -70,7 +68,7 @@ def dashboard_list():
     paginated = fetch_readings_paginated(current_user.id, start_date, end_date, user_tz, page, PAGE_SIZE)
     annotate_readings(paginated.items, user_tz)
     
-    return render_template('partials/dashboard_list.html', readings=paginated.items, pagination=paginated)
+    return render_template('partials/dashboard_table.html', readings=paginated.items, pagination=paginated, start_date=start_date, end_date=end_date)
 
 @main.route('/dashboard/weekly', methods=['GET'])
 @login_required
@@ -120,14 +118,26 @@ def dashboard_monthly():
 @login_required
 def dashboard_graph():
     user_tz = timezone(current_user.profile.timezone or 'UTC')
-    now = datetime.now(user_tz)
-    month_start = now.replace(day=1, hour=0, minute=0, second=0, microsecond=0)
-    month_start_utc = month_start.astimezone(utc)
+    first_reading, last_reading = get_reading_date_range(current_user.id, user_tz)
+    
+    start_date = request.args.get('start_date') or (first_reading and first_reading.strftime('%Y-%m-%d'))
+    end_date = request.args.get('end_date') or (last_reading and last_reading.strftime('%Y-%m-%d'))
+    
+    if start_date and end_date:
+        start_dt = user_tz.localize(datetime.strptime(start_date, '%Y-%m-%d')).astimezone(utc)
+        end_dt = user_tz.localize(datetime.strptime(end_date, '%Y-%m-%d')).astimezone(utc) + timedelta(days=1) - timedelta(seconds=1)
+        calendar_readings = fetch_readings_for_range(current_user.id, start_dt, end_dt)
+    else:
+        now = datetime.now(user_tz)
+        month_start = now.replace(day=1, hour=0, minute=0, second=0, microsecond=0)
+        month_start_utc = month_start.astimezone(utc)
+        calendar_readings = fetch_readings_for_range(current_user.id, month_start_utc)
     
-    calendar_readings = fetch_readings_for_range(current_user.id, month_start_utc)
     annotate_readings(calendar_readings, user_tz)
     
     graph_data = prepare_graph_data(calendar_readings)
+    graph_data['start_date'] = start_date
+    graph_data['end_date'] = end_date
     
     return render_template('partials/dashboard_graph.html', **graph_data)
 

app/routes/user.py

@@ -33,7 +33,7 @@ def profile():
             try:
                 image = Image.open(io.BytesIO(file_data))
                 image = image.convert("RGB")  # Ensure it's in RGB format
-                image.thumbnail((300, 300))  # Resize to a maximum of 300x300 pixels
+                image.thumbnail((200, 200))  # Resize to a maximum of 200x200 pixels
 
                 # Save the resized image to a buffer
                 buffer = io.BytesIO()

app/templates/_layout.html

@@ -145,6 +145,7 @@
             // Micro-HTMX implementation
             const htmxTrigger = e.target.closest('[hx-get]');
             if (htmxTrigger) {
+                if (htmxTrigger.tagName === 'FORM') return; // Let submit handler deal with forms
                 e.preventDefault();
                 const url = htmxTrigger.getAttribute('hx-get');
                 const targetSelector = htmxTrigger.getAttribute('hx-target');
@@ -225,6 +226,69 @@
                 }
             }
         });
+
+        // Auto-submit forms when inputs change
+        document.addEventListener('change', (e) => {
+            const htmxForm = e.target.closest('form[hx-get], form[hx-post]');
+            if (htmxForm) {
+                htmxForm.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
+            }
+        });
+
+        // Handle form submissions for Micro-HTMX
+        document.addEventListener('submit', async (e) => {
+            const htmxForm = e.target.closest('form[hx-get], form[hx-post]');
+            if (htmxForm) {
+                e.preventDefault();
+
+                const method = htmxForm.hasAttribute('hx-post') ? 'POST' : 'GET';
+                let url = htmxForm.getAttribute('hx-get') || htmxForm.getAttribute('hx-post');
+                const targetSelector = htmxForm.getAttribute('hx-target');
+
+                if (!url || !targetSelector) return;
+
+                const targetEl = document.querySelector(targetSelector);
+                if (!targetEl) return;
+
+                try {
+                    let fetchOpts = { method };
+                    if (method === 'GET') {
+                        const formData = new FormData(htmxForm);
+                        const params = new URLSearchParams(formData).toString();
+                        if (params) {
+                            url += (url.includes('?') ? '&' : '?') + params;
+                        }
+                    } else {
+                        fetchOpts.body = new FormData(htmxForm);
+                    }
+
+                    const response = await fetch(url, fetchOpts);
+                    if (!response.ok) throw new Error('Fetch failed');
+                    targetEl.innerHTML = await response.text();
+                } catch (err) {
+                    console.error('Micro-HTMX submit error:', err);
+                }
+            }
+        });
+
+        // Handle auto-loading elements
+        const handleAutoLoads = async () => {
+            const elements = document.querySelectorAll('[hx-trigger="load"][hx-get]');
+            for (const el of elements) {
+                const url = el.getAttribute('hx-get');
+                try {
+                    const response = await fetch(url);
+                    if (!response.ok) throw new Error('Auto-fetch failed');
+                    el.innerHTML = await response.text();
+                    el.removeAttribute('hx-trigger'); // ensure it only loads once per page view
+                } catch (err) {
+                    console.error('Micro-HTMX autoload error:', err);
+                }
+            }
+        };
+
+        document.addEventListener('DOMContentLoaded', handleAutoLoads);
+        document.addEventListener('diy-turbo:load', handleAutoLoads);
     </script>
 </body>
 

app/templates/dashboard.html

@@ -40,74 +40,34 @@
         </div>
     </div>
 
-    <div class="relative">
-        <!-- Compact Icon -->
-        <button id="filter-btn"
-            class="bg-primary-600 text-white p-3 rounded-full shadow-lg focus:outline-none hover:bg-primary-700 transition">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
-                stroke="currentColor" class="w-6 h-6">
-                <!-- Chevron down icon (default) -->
-                <path id="filter-icon-closed" class="{{ 'hidden' if request.method == 'POST' else '' }}"
-                    stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
-                <!-- X icon -->
-                <path id="filter-icon-open" class="{{ '' if request.method == 'POST' else 'hidden' }}"
-                    stroke-linecap="round" stroke-linejoin="round" d="M18 15l-6-6-6 6" />
-            </svg>
-        </button>
 
-        <!-- Collapsible Filter Form -->
-        <div id="filter-form"
-            class="{{ '' if request.method == 'POST' else 'hidden' }} transition-all duration-300 w-full md:w-1/3 bg-white p-6 rounded-xl shadow-lg border border-gray-200">
-            <div class="flex justify-between items-center mb-4">
-                <h3 class="text-lg font-bold text-gray-800">Filter Readings</h3>
-            </div>
-            <form method="POST" action="{{ url_for('main.dashboard') }}" class="space-y-4">
-                <!-- Start Date -->
-                <div>
-                    <label for="start_date" class="block text-sm font-medium text-gray-700">Start Date</label>
-                    <input type="date" name="start_date" id="start_date" value="{{ start_date or '' }}"
-                        class="w-full p-3 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500">
-                </div>
-
-                <!-- End Date -->
-                <div>
-                    <label for="end_date" class="block text-sm font-medium text-gray-700">End Date</label>
-                    <input type="date" name="end_date" id="end_date" value="{{ end_date or '' }}"
-                        class="w-full p-3 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500">
-                </div>
-
-                <!-- Apply Button -->
-                <div>
-                    <button type="submit"
-                        class="w-full bg-primary-600 text-white py-2 rounded-xl font-semibold shadow-md hover:bg-primary-700 focus:outline-none">
-                        Apply Filters
-                    </button>
-                </div>
-            </form>
-        </div>
-    </div>
 
 
     <div class="max-w-5xl mx-auto">
         <!-- Tabs -->
-        <div class="flex border-b mb-4" id="dashboard-tabs">
+        <div class="flex border-b mb-4 overflow-x-auto" id="dashboard-tabs">
             <button hx-get="{{ url_for('main.dashboard_list') }}" hx-target="#dashboard-content"
-                class="tab-btn px-4 py-2 text-sm font-medium border-b-2 {{ 'border-primary-600 text-primary-600' if active_view == 'list' else '' }}">List
+                class="tab-btn px-4 py-2 text-sm font-medium border-b-2 whitespace-nowrap {{ 'border-primary-600 text-primary-600' if active_view == 'list' else 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">List
+                View</button>
+            <button hx-get="{{ url_for('main.dashboard_table') }}" hx-target="#dashboard-content"
+                class="tab-btn px-4 py-2 text-sm font-medium border-b-2 whitespace-nowrap {{ 'border-primary-600 text-primary-600' if active_view == 'table' else 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">Table
                 View</button>
             <button hx-get="{{ url_for('main.dashboard_weekly') }}" hx-target="#dashboard-content"
-                class="tab-btn px-4 py-2 text-sm font-medium border-b-2 {{ 'border-primary-600 text-primary-600' if active_view == 'weekly' else '' }}">Weekly
+                class="tab-btn px-4 py-2 text-sm font-medium border-b-2 whitespace-nowrap {{ 'border-primary-600 text-primary-600' if active_view == 'weekly' else 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">Weekly
                 View</button>
             <button hx-get="{{ url_for('main.dashboard_monthly') }}" hx-target="#dashboard-content"
-                class="tab-btn px-4 py-2 text-sm font-medium border-b-2 {{ 'border-primary-600 text-primary-600' if active_view == 'monthly' else '' }}">Monthly
+                class="tab-btn px-4 py-2 text-sm font-medium border-b-2 whitespace-nowrap {{ 'border-primary-600 text-primary-600' if active_view == 'monthly' else 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">Monthly
                 View</button>
             <button hx-get="{{ url_for('main.dashboard_graph') }}" hx-target="#dashboard-content"
-                class="tab-btn px-4 py-2 text-sm font-medium border-b-2 {{ 'border-primary-600 text-primary-600' if active_view == 'graph' else '' }}">Graph
+                class="tab-btn px-4 py-2 text-sm font-medium border-b-2 whitespace-nowrap {{ 'border-primary-600 text-primary-600' if active_view == 'graph' else 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">Graph
                 View</button>
         </div>
 
         <!-- Dashboard Content Target Area for HTMX -->
-        <div id="dashboard-content">
-            {% include 'partials/dashboard_list.html' %}
+        <div id="dashboard-content" hx-get="{{ url_for('main.dashboard_list') }}" hx-trigger="load">
+            <div class="flex justify-center items-center p-12">
+                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
+            </div>
         </div>
     </div>
 

app/templates/partials/dashboard_graph.html

@@ -12,6 +12,25 @@
     }
 </style>
 <div class="space-y-8">
+    <!-- Graph Date Filter -->
+    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 mb-2">
+        <form hx-get="{{ url_for('main.dashboard_graph') }}" hx-target="#dashboard-content"
+            class="flex flex-col sm:flex-row gap-4">
+            <!-- Start Date -->
+            <div class="flex-1">
+                <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
+                <input type="date" name="start_date" id="start_date" value="{{ start_date or '' }}"
+                    class="w-full p-2.5 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 text-gray-700">
+            </div>
+
+            <!-- End Date -->
+            <div class="flex-1">
+                <label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">End Date</label>
+                <input type="date" name="end_date" id="end_date" value="{{ end_date or '' }}"
+                    class="w-full p-2.5 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 text-gray-700">
+            </div>
+        </form>
+    </div>
     <!-- Blood Pressure Graph Card -->
     <div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 transition-all hover:shadow-xl">
         <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">

app/templates/partials/dashboard_table.html

@@ -0,0 +1,172 @@
+<div class="space-y-6">
+    <!-- Table Date Filter -->
+    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 mb-2">
+        <form hx-get="{{ url_for('main.dashboard_table') }}" hx-target="#dashboard-content"
+            class="flex flex-col sm:flex-row gap-4">
+            <!-- Start Date -->
+            <div class="flex-1">
+                <label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">Start Date</label>
+                <input type="date" name="start_date" id="start_date" value="{{ start_date or '' }}"
+                    class="w-full p-2.5 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 text-gray-700">
+            </div>
+
+            <!-- End Date -->
+            <div class="flex-1">
+                <label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">End Date</label>
+                <input type="date" name="end_date" id="end_date" value="{{ end_date or '' }}"
+                    class="w-full p-2.5 border border-gray-300 rounded-xl shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-500 text-gray-700">
+            </div>
+        </form>
+    </div>
+
+    <!-- Data Container -->
+    <div class="bg-transparent md:bg-white md:rounded-2xl md:shadow-sm md:border md:border-gray-100 overflow-hidden">
+
+        <!-- Mobile Card View (Hidden on medium screens and up) -->
+        <div class="md:hidden space-y-4">
+            {% for reading in readings %}
+            <div class="bg-white p-4 rounded-xl shadow-sm border border-gray-100 flex flex-col gap-3">
+                <div class="flex justify-between items-center border-b border-gray-50 pb-2">
+                    <div class="flex items-center gap-2">
+                        <svg class="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                        <span class="text-sm font-bold text-gray-800">{{ reading.local_timestamp.strftime('%Y-%m-%d')
+                            }}</span>
+                    </div>
+                    <span class="text-sm font-medium text-gray-500">{{ reading.local_timestamp.strftime('%I:%M %p')
+                        }}</span>
+                </div>
+
+                <div class="flex justify-between items-center">
+                    <span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Blood Pressure</span>
+                    <div class="flex items-baseline gap-1">
+                        <span
+                            class="font-bold text-lg {{ 'text-red-500' if reading.systolic >= 130 else 'text-gray-900' }}">{{
+                            reading.systolic }}</span>
+                        <span class="font-medium text-gray-400">/</span>
+                        <span
+                            class="font-bold text-lg {{ 'text-red-500' if reading.diastolic >= 80 else 'text-gray-900' }}">{{
+                            reading.diastolic }}</span>
+                        <span class="text-xs text-gray-500 font-medium ml-1">mmHg</span>
+                    </div>
+                </div>
+
+                <div class="flex justify-between items-center">
+                    <span class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Heart Rate</span>
+                    <div class="flex items-baseline">
+                        <span class="font-bold text-lg text-gray-900">{{ reading.heart_rate }}</span>
+                        <span class="text-xs text-gray-500 font-medium ml-1">bpm</span>
+                    </div>
+                </div>
+
+                <div class="flex justify-end pt-3 mt-1 border-t border-gray-50">
+                    <a href="{{ url_for('reading.edit_reading', reading_id=reading.id) }}"
+                        class="inline-flex items-center gap-1 text-primary-600 hover:text-primary-800 text-sm font-bold transition-colors">
+                        Edit
+                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                        </svg>
+                    </a>
+                </div>
+            </div>
+            {% else %}
+            <div
+                class="bg-white p-8 text-center rounded-xl shadow-sm border border-gray-100 flex flex-col items-center gap-3">
+                <svg class="w-12 h-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
+                </svg>
+                <span class="text-sm font-medium text-gray-500">No readings found for this date range.</span>
+            </div>
+            {% endfor %}
+        </div>
+
+        <!-- Desktop Table View (Hidden on small screens) -->
+        <div class="hidden md:block overflow-x-auto">
+            <table class="min-w-full divide-y divide-gray-200">
+                <thead class="bg-gray-50">
+                    <tr>
+                        <th scope="col"
+                            class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                            Date</th>
+                        <th scope="col"
+                            class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                            Time</th>
+                        <th scope="col"
+                            class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                            Systolic</th>
+                        <th scope="col"
+                            class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                            Diastolic</th>
+                        <th scope="col"
+                            class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                            Heart Rate</th>
+                        <th scope="col"
+                            class="px-6 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">
+                            Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="bg-white divide-y divide-gray-200">
+                    {% for reading in readings %}
+                    <tr class="hover:bg-gray-50 transition-colors">
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{
+                            reading.local_timestamp.strftime('%Y-%m-%d') }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{
+                            reading.local_timestamp.strftime('%I:%M %p') }}</td>
+                        <td
+                            class="px-6 py-4 whitespace-nowrap text-sm font-semibold {{ 'text-red-500' if reading.systolic >= 130 else 'text-gray-900' }}">
+                            {{ reading.systolic }}</td>
+                        <td
+                            class="px-6 py-4 whitespace-nowrap text-sm font-semibold {{ 'text-red-500' if reading.diastolic >= 80 else 'text-gray-900' }}">
+                            {{ reading.diastolic }}</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ reading.heart_rate }} bpm</td>
+                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                            <a href="{{ url_for('reading.edit_reading', reading_id=reading.id) }}"
+                                class="text-primary-600 hover:text-primary-900">Edit</a>
+                        </td>
+                    </tr>
+                    {% else %}
+                    <tr>
+                        <td colspan="6" class="px-6 py-12 text-center text-sm text-gray-500">
+                            No readings found for this date range.
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <!-- Pagination Controls -->
+    {% if pagination.pages > 1 %}
+    <div class="flex justify-center items-center gap-2 mt-6">
+        {% if pagination.has_prev %}
+        <button
+            hx-get="{{ url_for('main.dashboard_table', page=pagination.prev_num, start_date=start_date, end_date=end_date) }}"
+            hx-target="#dashboard-content" class="px-3 py-1 rounded bg-gray-200 hover:bg-gray-300 text-sm">&laquo;
+            Prev</button>
+        {% endif %}
+
+        {% for page_num in pagination.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=2) %}
+        {% if page_num %}
+        <button hx-get="{{ url_for('main.dashboard_table', page=page_num, start_date=start_date, end_date=end_date) }}"
+            hx-target="#dashboard-content"
+            class="px-3 py-1 rounded text-sm {% if page_num == pagination.page %}bg-primary-600 text-white{% else %}bg-gray-200 hover:bg-gray-300{% endif %}">
+            {{ page_num }}
+        </button>
+        {% else %}
+        <span class="text-gray-400">…</span>
+        {% endif %}
+        {% endfor %}
+
+        {% if pagination.has_next %}
+        <button
+            hx-get="{{ url_for('main.dashboard_table', page=pagination.next_num, start_date=start_date, end_date=end_date) }}"
+            hx-target="#dashboard-content" class="px-3 py-1 rounded bg-gray-200 hover:bg-gray-300 text-sm">Next
+            &raquo;</button>
+        {% endif %}
+    </div>
+    {% endif %}
+</div>

app/templates/profile.html

@@ -16,7 +16,7 @@
 
         <div class="flex items-center justify-center mb-4">
             <img src="{{ url_for('user.profile_image', user_id=current_user.id) }}" alt="Profile Picture"
-                class="w-44 h-44 rounded-full border object-cover shadow">
+                class="w-32 h-32 rounded-full border object-cover shadow">
         </div>