in your weekly performance, integrate screeshot or so of the dashboard with also 1 week analytics and suggestions / improvements

index.html

@@ -485,29 +485,81 @@ secondary: {
                 </div>
             </div>
         </section>
-
-        <!-- Stats Dashboard Section -->
+        <!-- Enhanced Stats Dashboard Section -->
         <section class="mb-16 glass-panel rounded-2xl p-8">
             <div class="flex justify-between items-center mb-6">
                 <h3 class="text-2xl font-bold">Your Weekly Performance</h3>
                 <div class="flex space-x-2">
-                    <button class="px-3 py-1 text-xs bg-dark-800 hover:bg-dark-700 rounded-lg transition">Week</button>
+                    <button class="px-3 py-1 text-xs bg-primary-500/20 text-primary-500 rounded-lg transition">Week</button>
                     <button class="px-3 py-1 text-xs bg-dark-800 hover:bg-dark-700 rounded-lg transition">Month</button>
                     <button class="px-3 py-1 text-xs bg-dark-800 hover:bg-dark-700 rounded-lg transition">Year</button>
                 </div>
             </div>
-            <div class="bg-dark-800 rounded-xl p-4 mb-6">
-                <img src="https://static.photos/technology/1024x576/44" alt="Stats Dashboard" class="w-full rounded-lg">
-            </div>
-            <div class="text-center">
-                <p class="text-gray-400 mb-4">See exactly how much time each agent saves you daily</p>
-                <button class="px-6 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition">
-                    View Full Dashboard
-                </button>
+            
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <div class="lg:col-span-2 bg-dark-800 rounded-xl p-4">
+                    <img src="https://static.photos/technology/1024x576/44" alt="Weekly Analytics Dashboard" class="w-full rounded-lg mb-4">
+                    <div class="grid grid-cols-3 gap-4">
+                        <div class="bg-dark-700 p-3 rounded-lg">
+                            <p class="text-xs text-gray-400 mb-1">Time Saved</p>
+                            <p class="text-xl font-bold text-primary-500">18.5 hours</p>
+                            <p class="text-xs text-green-400">+2.5h from last week</p>
+                        </div>
+                        <div class="bg-dark-700 p-3 rounded-lg">
+                            <p class="text-xs text-gray-400 mb-1">Tasks Completed</p>
+                            <p class="text-xl font-bold">42</p>
+                            <p class="text-xs text-green-400">100% success rate</p>
+                        </div>
+                        <div class="bg-dark-700 p-3 rounded-lg">
+                            <p class="text-xs text-gray-400 mb-1">Agent Utilization</p>
+                            <p class="text-xl font-bold">84%</p>
+                            <p class="text-xs text-yellow-400">+6% from avg.</p>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="bg-dark-800 rounded-xl p-6">
+                    <h4 class="font-bold mb-4 flex items-center">
+                        <i data-feather="zap" class="text-yellow-500 mr-2"></i>
+                        AI Recommendations
+                    </h4>
+                    <div class="space-y-4">
+                        <div class="flex items-start">
+                            <div class="bg-primary-500/20 p-1.5 rounded-lg mr-3">
+                                <i data-feather="clock" class="text-primary-500 w-4 h-4"></i>
+                            </div>
+                            <div>
+                                <p class="font-medium">Optimize Schedule Assistant</p>
+                                <p class="text-sm text-gray-400">Could save additional 3h/week by adjusting meeting buffers</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-secondary-500/20 p-1.5 rounded-lg mr-3">
+                                <i data-feather="refresh-cw" class="text-secondary-500 w-4 h-4"></i>
+                            </div>
+                            <div>
+                                <p class="font-medium">Automate Follow-ups</p>
+                                <p class="text-sm text-gray-400">2.5h spent on manual follow-ups last week</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-green-400/20 p-1.5 rounded-lg mr-3">
+                                <i data-feather="bar-chart-2" class="text-green-400 w-4 h-4"></i>
+                            </div>
+                            <div>
+                                <p class="font-medium">Data Analysis Report</p>
+                                <p class="text-sm text-gray-400">Your analytics agent is underutilized by 32%</p>
+                            </div>
+                        </div>
+                    </div>
+                    <button class="mt-6 w-full px-4 py-2 bg-primary-500 hover:bg-primary-600 text-dark-900 rounded-lg font-medium transition flex items-center justify-center">
+                        <i data-feather="settings" class="mr-2"></i>
+                        Optimize Now
+                    </button>
+                </div>
             </div>
         </section>
-
-        <!-- Timeline Section -->
+<!-- Timeline Section -->
 <section class="mb-16 glass-panel rounded-2xl p-6">
             <div class="flex justify-between items-center mb-6">
                 <h3 class="text-xl font-bold">Daily Agent Performance Report</h3>