Adicione outras informações alem do total de tokens, Avg/Day, Projected EOM

index.html

@@ -39,8 +39,7 @@
             <div class="relative h-80">
                 <canvas id="tokenChart"></canvas>
             </div>
-            
-            <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div class="mt-6 grid grid-cols-1 md:grid-cols-5 gap-4">
                 <div class="bg-gray-50 p-4 rounded-lg">
                     <div class="text-gray-500 text-sm">Total Tokens</div>
                     <div class="text-2xl font-bold text-gray-800">12,458</div>
@@ -53,8 +52,16 @@
                     <div class="text-gray-500 text-sm">Projected EOM</div>
                     <div class="text-2xl font-bold text-gray-800">15,745</div>
                 </div>
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <div class="text-gray-500 text-sm">Max Day</div>
+                    <div class="text-2xl font-bold text-gray-800">872</div>
+                </div>
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <div class="text-gray-500 text-sm">Abstinence Days</div>
+                    <div class="text-2xl font-bold text-gray-800">21</div>
+                </div>
             </div>
-        </div>
+</div>
     </main>
 
     <script src="script.js"></script>

script.js

@@ -5,13 +5,31 @@ document.addEventListener('DOMContentLoaded', function() {
     const daysArray = Array.from({length: daysInMonth}, (_, i) => i + 1);
     // Generate data with usage until day 10 then flat
     let tokenData = [];
+    let dailyData = [];
     let lastValue = 0;
+    let maxDayValue = 0;
+    let abstinenceDays = 0;
+    
     for (let i = 0; i < daysInMonth; i++) {
+        let dailyUsage = 0;
         if (i < 10) {
-            lastValue += Math.floor(Math.random() * 600) + 100; // Random increment 100-700
+            dailyUsage = Math.floor(Math.random() * 600) + 100; // Random increment 100-700
+            lastValue += dailyUsage;
+        } else {
+            abstinenceDays++;
         }
+        
+        if (dailyUsage > maxDayValue) {
+            maxDayValue = dailyUsage;
+        }
+        
         tokenData.push(lastValue);
+        dailyData.push(dailyUsage);
     }
+
+    // Update stats in the UI
+    document.querySelector('div:nth-child(4) div.text-2xl').textContent = maxDayValue.toLocaleString();
+    document.querySelector('div:nth-child(5) div.text-2xl').textContent = abstinenceDays;
 // Chart setup
     const ctx = document.getElementById('tokenChart').getContext('2d');
     const chart = new Chart(ctx, {