Add table view

app/routes/main.py

@@ -55,6 +55,21 @@ def dashboard_list():
     
     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)
+    
+    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_table.html', readings=paginated.items, pagination=paginated, start_date=start_date, end_date=end_date)
+
 @main.route('/dashboard/weekly', methods=['GET'])
 @login_required
 def dashboard_weekly():

app/templates/dashboard.html

@@ -45,18 +45,21 @@
 
     <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>
 

app/templates/partials/dashboard_table.html

@@ -0,0 +1,117 @@
+<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 md:flex-row gap-4 items-end">
+            <!-- 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>
+
+            <!-- Apply Button -->
+            <div>
+                <button type="submit"
+                    class="w-full md:w-auto bg-primary-600 text-white px-6 py-2.5 rounded-xl font-semibold shadow-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-colors">
+                    Apply Filter
+                </button>
+            </div>
+        </form>
+    </div>
+
+    <!-- Data Table -->
+    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+        <div class="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>