perf: remove redundant COUNT query and use bulk insert for CSV imports

Dockerfile

@@ -7,6 +7,7 @@ WORKDIR /app
 # Copy only the necessary files for TailwindCSS build
 COPY package.json package-lock.json ./
 COPY ./app/templates ./app/templates
+COPY ./app/static/js ./app/static/js
 COPY tailwind.config.js ./
 
 # Install Node.js dependencies
@@ -39,6 +40,7 @@ COPY . .
 
 # Copy the built TailwindCSS assets from the first stage
 COPY --from=tailwind-builder /app/app/static/css/tailwind.css ./app/static/css/tailwind.css
+COPY --from=tailwind-builder /app/app/static/js/diy-turbo.min.js ./app/static/js/diy-turbo.min.js
 
 # Run tests during the build process
 RUN pytest --maxfail=5 --disable-warnings -v || (echo "Tests failed. Exiting." && exit 1)

app/__init__.py

@@ -5,6 +5,7 @@ from flask_migrate import Migrate
 from flask_bcrypt import Bcrypt
 from flask_login import LoginManager
 from flask_compress import Compress
+from flask_minify import Minify
 
 # Initialize Flask extensions
 db = SQLAlchemy()
@@ -12,6 +13,7 @@ migrate = Migrate()
 bcrypt = Bcrypt()
 login_manager = LoginManager()
 compress = Compress()
+minify = Minify(html=True, js=True, cssless=True, fail_safe=True)
 
 login_manager.login_view = 'auth.login'
 login_manager.login_message_category = 'info'
@@ -29,6 +31,8 @@ def create_app():
     bcrypt.init_app(app)
     login_manager.init_app(app)
     compress.init_app(app)
+    minify.init_app(app)
+
 
     # Import models here to avoid circular imports
     from app.models import User  # Import the User model

app/routes/data.py

@@ -17,16 +17,17 @@ def manage_data():
             try:
                 csv_data = csv.reader(StringIO(file.read().decode('utf-8')))
                 next(csv_data)  # Skip the header row
+                readings_to_add = []
                 for row in csv_data:
                     timestamp, systolic, diastolic, heart_rate = row
-                    reading = Reading(
+                    readings_to_add.append(Reading(
                         user_id=current_user.id,
                         timestamp=datetime.strptime(timestamp, '%Y-%m-%d %H:%M:%S'),
                         systolic=int(systolic),
                         diastolic=int(diastolic),
                         heart_rate=int(heart_rate),
-                    )
+                    ))
-                    db.session.add(reading)
+                db.session.bulk_save_objects(readings_to_add)
                 db.session.commit()
                 flash('Data imported successfully!', 'success')
             except Exception as e:

app/routes/main.py

@@ -27,20 +27,10 @@ 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',
@@ -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)
+    first_reading, last_reading = get_reading_date_range(current_user.id, user_tz)
-    month_start = now.replace(day=1, hour=0, minute=0, second=0, microsecond=0)
+    
-    month_start_utc = month_start.astimezone(utc)
+    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)
 
@@ -278,12 +288,9 @@ def prepare_graph_data(readings):
 
 def calculate_progress_badges(user_id, user_tz):
     """Generate badges based on user activity and milestones using optimized queries."""
-    total_readings = Reading.query.filter_by(user_id=user_id).count()
+    # Fetch only timestamps (index-only scan on the composite index)
-    if total_readings == 0:
-        return []
-
-    # Fetch only timestamps (highly optimized compared to fetching full objects)
     timestamps = db.session.query(Reading.timestamp).filter(Reading.user_id == user_id).order_by(Reading.timestamp.desc()).all()
+    total_readings = len(timestamps)
     return _compute_badges(total_readings, timestamps, user_tz)
 
 def _compute_badges(total_readings, timestamps, user_tz, now_local=None):

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/static/js/diy-turbo.min.js

@@ -0,0 +1 @@
+document.addEventListener("click",async t=>{const e=t.target.closest("a");if(!e)return;const o=e.getAttribute("href");if(o&&!o.startsWith("#")&&!o.startsWith("javascript:")&&e.origin===window.location.origin&&!("_blank"===e.target||e.hasAttribute("download")||t.ctrlKey||t.shiftKey||t.metaKey||t.altKey||"false"===e.getAttribute("data-turbo"))){t.preventDefault(),document.body.style.cursor="wait";try{const t=await fetch(o);if(!t.ok)throw new Error("Fetch failed");const e=await t.text(),r=(new DOMParser).parseFromString(e,"text/html");document.title=r.title,document.body.innerHTML=r.body.innerHTML,document.body.className=r.body.className,document.body.style.cursor="default",window.history.pushState({},"",o),window.scrollTo(0,0),document.dispatchEvent(new Event("diy-turbo:load"))}catch(t){console.error("DIY Turbo navigation error:",t),window.location.href=o}}}),window.addEventListener("popstate",async()=>{document.body.style.cursor="wait";try{const t=await fetch(window.location.href);if(!t.ok)throw new Error("Fetch failed");const e=await t.text(),o=(new DOMParser).parseFromString(e,"text/html");document.title=o.title,document.body.innerHTML=o.body.innerHTML,document.body.className=o.body.className,document.body.style.cursor="default",document.dispatchEvent(new Event("diy-turbo:load"))}catch(t){console.error("DIY Turbo popstate error:",t),window.location.reload()}});

app/templates/_layout.html

@@ -7,7 +7,7 @@
     <title>{% block title %}BP Tracker{% endblock %}</title>
     <link rel="icon" type="image/svg+xml" sizes="any" href="{{ url_for('static', filename='images/favicon.svg') }}">
     <link href="/static/css/tailwind.css" rel="stylesheet">
-    <script src="{{ url_for('static', filename='js/diy-turbo.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/diy-turbo.min.js') }}"></script>
 </head>
 
 <body class="bg-gray-50 text-gray-800 font-sans antialiased">
@@ -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">
+        <div id="dashboard-content" hx-get="{{ url_for('main.dashboard_list') }}" hx-trigger="load">
-            {% include 'partials/dashboard_list.html' %}
+            <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>
 
 

package-lock.json

@@ -8,10 +8,14 @@
       "name": "bloodpressure",
       "version": "1.0.0",
       "license": "ISC",
+      "dependencies": {
+        "tailwindcss": "^3.0.0"
+      },
       "devDependencies": {
         "autoprefixer": "^10.4.20",
         "postcss": "^8.4.49",
-        "tailwindcss": "^3.4.17"
+        "tailwindcss": "^3.4.17",
+        "terser": "^5.46.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -75,6 +79,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.11",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
+      "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
@@ -136,6 +150,18 @@
         "node": ">=14"
       }
     },
+    "node_modules/acorn": {
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
@@ -293,6 +319,12 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -1175,6 +1207,15 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1184,6 +1225,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -1351,6 +1402,30 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/terser": {
+      "version": "5.46.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.46.0.tgz",
+      "integrity": "sha512-jTwoImyr/QbOWFFso3YoU3ik0jBBDJ6JTOQiy/J2YxVJdZCc+5u7skhNwiOR3FQIygFqVUPHl7qbbxtjW2K3Qg==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.15.0",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npx tailwindcss -o ./app/static/css/tailwind.css --minify",
+    "build": "npx tailwindcss -o ./app/static/css/tailwind.css --minify && npx terser ./app/static/js/diy-turbo.js -o ./app/static/js/diy-turbo.min.js -c -m",
     "serve": "npx tailwindcss -o ./app/static/css/tailwind.css --minify --watch"
   },
   "author": "",
@@ -15,6 +15,7 @@
   "devDependencies": {
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.17"
+    "tailwindcss": "^3.4.17",
+    "terser": "^5.46.0"
   }
 }

requirements.txt

@@ -37,3 +37,5 @@ typing-extensions==4.12.2
 werkzeug==3.1.3
 wtforms==3.2.1
 zipp==3.21.0
+Flask-Minify==0.43
+Brotli==1.2.0