HydroFlux 0.1.3

Hydroflux/app/src/main/AndroidManifest.xml

@@ -8,6 +8,7 @@
     <!-- Health Connect Permissions -->
     <uses-permission android:name="android.permission.health.READ_STEPS"/>
     <uses-permission android:name="android.permission.health.READ_SLEEP"/>
+    <uses-permission android:name="android.permission.health.READ_DISTANCE"/>
     <uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />
 
     <!-- Required to interact with Health Connect on Android 11+ -->

Hydroflux/app/src/main/assets/js/modules/views/WaterView.js

@@ -48,6 +48,60 @@ export class WaterView {
                         </div>
                     </div>
 
+                    <!-- Last 30 Days History Chart -->
+                    <div class="px-6 mt-6 mb-4">
+                         <h3 class="font-bold text-gray-800 text-lg mb-4">Last 30 Days</h3>
+                         <div class="bg-white rounded-2xl p-4 shadow-sm border border-blue-50 overflow-x-auto">
+                            <div class="flex items-end gap-2 h-40 min-w-max px-2">
+                                ${(() => {
+                // 1. Generate last 30 days keys
+                const now = new Date();
+                const days = [];
+                for (let i = 29; i >= 0; i--) {
+                    const d = new Date(now);
+                    d.setDate(d.getDate() - i);
+                    d.setHours(0, 0, 0, 0);
+                    days.push(d.getTime());
+                }
+
+                // 2. Aggregate history
+                const dailyTotals = {}; // timestamp -> ml
+                this.history.forEach(h => {
+                    const d = new Date(h.timestamp);
+                    d.setHours(0, 0, 0, 0);
+                    const key = d.getTime();
+                    dailyTotals[key] = (dailyTotals[key] || 0) + h.amount;
+                });
+
+                // 3. Render Bars
+                // Max value for scaling
+                const maxVal = Math.max(3000, ...Object.values(dailyTotals)); // Min scale 3000ml
+
+                return days.map((ts, index) => {
+                    const date = new Date(ts);
+                    const total = dailyTotals[ts] || 0;
+                    const heightPct = Math.min((total / maxVal) * 100, 100);
+                    const isToday = index === 29;
+                    const label = date.getDate(); // Just day number
+
+                    return `
+                                            <div class="flex flex-col items-center gap-1 group relative">
+                                                <!-- Tooltip -->
+                                                <div class="absolute bottom-full mb-1 bg-gray-800 text-white text-[10px] px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-10">
+                                                    ${(total / 1000).toFixed(1)}L
+                                                </div>
+                                                <div class="w-6 bg-blue-100 rounded-t-md relative hover:bg-blue-200 transition-colors" style="height: ${Math.max(heightPct, 4)}%">
+                                                    ${isToday ? '<div class="absolute inset-0 bg-blue-500 opacity-50 rounded-t-md"></div>' : ''}
+                                                </div>
+                                                <span class="text-[10px] text-gray-400 ${isToday ? 'font-bold text-blue-500' : ''}">${label}</span>
+                                            </div>
+                                        `;
+                }).join('');
+            })()}
+                            </div>
+                         </div>
+                    </div>
+
                     <!-- History Section -->
                     <div class="px-6 mt-4">
                         <h3 class="font-bold text-gray-800 text-lg mb-4">Today's History</h3>