Add 1 files

index.html

@@ -14,49 +14,27 @@
             transform: translateY(-5px);
             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
         }
-        .tooltip {
-            position: relative;
-            display: inline-block;
+        .pulse {
+            animation: pulse 2s infinite;
         }
-        .tooltip .tooltip-text {
-            visibility: hidden;
-            width: 200px;
-            background-color: #555;
-            color: #fff;
-            text-align: center;
-            border-radius: 6px;
-            padding: 5px;
-            position: absolute;
-            z-index: 1;
-            bottom: 125%;
-            left: 50%;
-            margin-left: -100px;
-            opacity: 0;
-            transition: opacity 0.3s;
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
         }
-        .tooltip:hover .tooltip-text {
-            visibility: visible;
-            opacity: 1;
+        .status-badge {
+            transition: all 0.3s ease;
         }
-        .deployment-step {
-            counter-increment: step-counter;
-            position: relative;
-            padding-left: 3.5rem;
+        .not-responding {
+            background-color: #fee2e2 !important;
+            color: #dc2626 !important;
+            border-left: 4px solid #dc2626;
         }
-        .deployment-step::before {
-            content: counter(step-counter);
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 2.5rem;
-            height: 2.5rem;
-            background: linear-gradient(135deg, #6e8efb, #a777e3);
-            color: white;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
+        .connection-test-btn {
+            transition: all 0.3s ease;
+        }
+        .connection-test-btn:hover {
+            transform: scale(1.05);
         }
     </style>
 </head>
@@ -84,11 +62,33 @@
 
     <!-- Main Content -->
     <main class="container mx-auto px-4 py-8">
+        <!-- Status Alert -->
+        <div id="statusAlert" class="hidden bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6 rounded-r">
+            <div class="flex">
+                <div class="flex-shrink-0">
+                    <i class="fas fa-exclamation-triangle text-yellow-400"></i>
+                </div>
+                <div class="ml-3">
+                    <p class="text-sm text-yellow-700">
+                        <span class="font-semibold">Connection Issues Detected</span> Some AI modules are not responding properly. 
+                        <button id="refreshAllBtn" class="ml-2 text-yellow-700 underline font-medium">Refresh All Connections</button>
+                    </p>
+                </div>
+            </div>
+        </div>
+
         <!-- Integrations Section -->
         <section class="mb-12 bg-white rounded-xl shadow-md overflow-hidden">
             <div class="gradient-bg p-6 text-white">
-                <h2 class="text-2xl font-bold">AI Module Integrations</h2>
-                <p class="opacity-90">Connect with your favorite tools and services</p>
+                <div class="flex justify-between items-center">
+                    <div>
+                        <h2 class="text-2xl font-bold">AI Module Integrations</h2>
+                        <p class="opacity-90">Connect with your favorite tools and services</p>
+                    </div>
+                    <button id="testAllConnections" class="bg-white text-purple-600 hover:bg-purple-50 px-4 py-2 rounded-lg font-medium flex items-center">
+                        <i class="fas fa-sync-alt mr-2"></i> Test All Connections
+                    </button>
+                </div>
             </div>
             
             <div class="p-6">
@@ -99,14 +99,14 @@
                             <tr>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">AI Module</th>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Integration Tools</th>
-                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Primary Use Cases</th>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Response Time</th>
                                 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                             </tr>
                         </thead>
-                        <tbody class="bg-white divide-y divide-gray-200">
+                        <tbody class="bg-white divide-y divide-gray-200" id="integrationTableBody">
                             <!-- Voice AI -->
-                            <tr>
+                            <tr id="voiceAI" class="integration-row">
                                 <td class="px-6 py-4 whitespace-nowrap">
                                     <div class="flex items-center">
                                         <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center">
@@ -114,29 +114,35 @@
                                         </div>
                                         <div class="ml-4">
                                             <div class="text-sm font-medium text-gray-900">Voice AI</div>
+                                            <div class="text-xs text-gray-500">Call handling, voicemail</div>
                                         </div>
                                     </div>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex space-x-2">
+                                    <div class="flex flex-wrap gap-2">
                                         <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">Twilio</span>
                                         <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs font-medium">Plivo</span>
                                     </div>
                                 </td>
-                                <td class="px-6 py-4">
-                                    <div class="text-sm text-gray-500">Call handling, voicemail, IVR systems</div>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                                        <i class="fas fa-check-circle mr-1"></i> Connected
+                                    </span>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Connected</span>
+                                    <span class="text-sm text-gray-700">320ms</span>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    <button class="connection-test-btn bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1 rounded text-xs font-medium mr-2">
+                                        <i class="fas fa-bolt mr-1"></i> Test
+                                    </button>
                                     <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button>
                                     <button class="text-gray-600 hover:text-gray-900">Disconnect</button>
                                 </td>
                             </tr>
                             
                             <!-- Conversation AI -->
-                            <tr>
+                            <tr id="conversationAI" class="integration-row not-responding">
                                 <td class="px-6 py-4 whitespace-nowrap">
                                     <div class="flex items-center">
                                         <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center">
@@ -144,29 +150,35 @@
                                         </div>
                                         <div class="ml-4">
                                             <div class="text-sm font-medium text-gray-900">Conversation AI</div>
+                                            <div class="text-xs text-gray-500">Website/live chat</div>
                                         </div>
                                     </div>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex space-x-2">
+                                    <div class="flex flex-wrap gap-2">
                                         <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium">Lovable.dev</span>
                                         <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs font-medium">Dialogflow</span>
                                     </div>
                                 </td>
-                                <td class="px-6 py-4">
-                                    <div class="text-sm text-gray-500">Website/live chat, messaging automation</div>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 pulse">
+                                        <i class="fas fa-exclamation-triangle mr-1"></i> Not Responding
+                                    </span>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Connected</span>
+                                    <span class="text-sm text-gray-700">Timeout</span>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    <button class="connection-test-btn bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1 rounded text-xs font-medium mr-2">
+                                        <i class="fas fa-bolt mr-1"></i> Test
+                                    </button>
                                     <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button>
                                     <button class="text-gray-600 hover:text-gray-900">Disconnect</button>
                                 </td>
                             </tr>
                             
                             <!-- Reviews AI -->
-                            <tr>
+                            <tr id="reviewsAI" class="integration-row">
                                 <td class="px-6 py-4 whitespace-nowrap">
                                     <div class="flex items-center">
                                         <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-full flex items-center justify-center">
@@ -174,29 +186,35 @@
                                         </div>
                                         <div class="ml-4">
                                             <div class="text-sm font-medium text-gray-900">Reviews AI</div>
+                                            <div class="text-xs text-gray-500">Review generation</div>
                                         </div>
                                     </div>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex space-x-2">
+                                    <div class="flex flex-wrap gap-2">
                                         <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs font-medium">Google API</span>
                                         <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs font-medium">Yelp API</span>
                                     </div>
                                 </td>
-                                <td class="px-6 py-4">
-                                    <div class="text-sm text-gray-500">Review generation, sentiment analysis</div>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                                        <i class="fas fa-check-circle mr-1"></i> Connected
+                                    </span>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
+                                    <span class="text-sm text-gray-700">420ms</span>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                                    <button class="text-blue-600 hover:text-blue-900 mr-3">Connect</button>
-                                    <button class="text-gray-600 hover:text-gray-900" disabled>Disconnect</button>
+                                    <button class="connection-test-btn bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1 rounded text-xs font-medium mr-2">
+                                        <i class="fas fa-bolt mr-1"></i> Test
+                                    </button>
+                                    <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button>
+                                    <button class="text-gray-600 hover:text-gray-900">Disconnect</button>
                                 </td>
                             </tr>
                             
                             <!-- Funnel AI -->
-                            <tr>
+                            <tr id="funnelAI" class="integration-row not-responding">
                                 <td class="px-6 py-4 whitespace-nowrap">
                                     <div class="flex items-center">
                                         <div class="flex-shrink-0 h-10 w-10 bg-yellow-100 rounded-full flex items-center justify-center">
@@ -204,29 +222,35 @@
                                         </div>
                                         <div class="ml-4">
                                             <div class="text-sm font-medium text-gray-900">Funnel AI</div>
+                                            <div class="text-xs text-gray-500">Landing page automation</div>
                                         </div>
                                     </div>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex space-x-2">
+                                    <div class="flex flex-wrap gap-2">
                                         <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">GoHighLevel</span>
                                         <span class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-xs font-medium">WordPress</span>
                                     </div>
                                 </td>
-                                <td class="px-6 py-4">
-                                    <div class="text-sm text-gray-500">Landing page automation, funnel creation</div>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 pulse">
+                                        <i class="fas fa-exclamation-triangle mr-1"></i> Not Responding
+                                    </span>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Connected</span>
+                                    <span class="text-sm text-gray-700">Timeout</span>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    <button class="connection-test-btn bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1 rounded text-xs font-medium mr-2">
+                                        <i class="fas fa-bolt mr-1"></i> Test
+                                    </button>
                                     <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button>
                                     <button class="text-gray-600 hover:text-gray-900">Disconnect</button>
                                 </td>
                             </tr>
                             
                             <!-- Content AI -->
-                            <tr>
+                            <tr id="contentAI" class="integration-row">
                                 <td class="px-6 py-4 whitespace-nowrap">
                                     <div class="flex items-center">
                                         <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center">
@@ -234,29 +258,35 @@
                                         </div>
                                         <div class="ml-4">
                                             <div class="text-sm font-medium text-gray-900">Content AI</div>
+                                            <div class="text-xs text-gray-500">Blog/social media</div>
                                         </div>
                                     </div>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex space-x-2">
+                                    <div class="flex flex-wrap gap-2">
                                         <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium">OpenAI GPT</span>
                                         <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs font-medium">Jasper</span>
                                     </div>
                                 </td>
-                                <td class="px-6 py-4">
-                                    <div class="text-sm text-gray-500">Blog/social media content generation</div>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                                        <i class="fas fa-check-circle mr-1"></i> Connected
+                                    </span>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Connected</span>
+                                    <span class="text-sm text-gray-700">580ms</span>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    <button class="connection-test-btn bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1 rounded text-xs font-medium mr-2">
+                                        <i class="fas fa-bolt mr-1"></i> Test
+                                    </button>
                                     <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button>
                                     <button class="text-gray-600 hover:text-gray-900">Disconnect</button>
                                 </td>
                             </tr>
                             
                             <!-- Workflow AI -->
-                            <tr>
+                            <tr id="workflowAI" class="integration-row">
                                 <td class="px-6 py-4 whitespace-nowrap">
                                     <div class="flex items-center">
                                         <div class="flex-shrink-0 h-10 w-10 bg-red-100 rounded-full flex items-center justify-center">
@@ -264,22 +294,28 @@
                                         </div>
                                         <div class="ml-4">
                                             <div class="text-sm font-medium text-gray-900">Workflow AI</div>
+                                            <div class="text-xs text-gray-500">CRM/email automation</div>
                                         </div>
                                     </div>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <div class="flex space-x-2">
+                                    <div class="flex flex-wrap gap-2">
                                         <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">Zapier</span>
                                         <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs font-medium">Make</span>
                                     </div>
                                 </td>
-                                <td class="px-6 py-4">
-                                    <div class="text-sm text-gray-500">CRM/email automation, task workflows</div>
+                                <td class="px-6 py-4 whitespace-nowrap">
+                                    <span class="status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
+                                        <i class="fas fa-check-circle mr-1"></i> Connected
+                                    </span>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap">
-                                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Connected</span>
+                                    <span class="text-sm text-gray-700">210ms</span>
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                                    <button class="connection-test-btn bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1 rounded text-xs font-medium mr-2">
+                                        <i class="fas fa-bolt mr-1"></i> Test
+                                    </button>
                                     <button class="text-blue-600 hover:text-blue-900 mr-3">Configure</button>
                                     <button class="text-gray-600 hover:text-gray-900">Disconnect</button>
                                 </td>
@@ -288,239 +324,40 @@
                     </table>
                 </div>
                 
-                <!-- Add New Integration -->
-                <div class="mt-6 border-t pt-6">
-                    <h3 class="text-lg font-medium text-gray-900 mb-4">Add New Integration</h3>
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                        <select class="border rounded-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-purple-500">
-                            <option disabled selected>Select AI Module</option>
-                            <option>Voice AI</option>
-                            <option>Conversation AI</option>
-                            <option>Reviews AI</option>
-                            <option>Funnel AI</option>
-                            <option>Content AI</option>
-                            <option>Workflow AI</option>
-                        </select>
-                        
-                        <select class="border rounded-lg px-4 py-2 focus:outline-none focus:ring-1 focus:ring-purple-500">
-                            <option disabled selected>Select Integration Tool</option>
-                            <option>Twilio</option>
-                            <option>Plivo</option>
-                            <option>Lovable.dev</option>
-                            <option>Dialogflow</option>
-                            <option>Google API</option>
-                            <option>Yelp API</option>
-                            <option>GoHighLevel</option>
-                            <option>WordPress</option>
-                            <option>OpenAI GPT</option>
-                            <option>Jasper</option>
-                            <option>Zapier</option>
-                            <option>Make (Integromat)</option>
-                        </select>
-                        
-                        <button class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg font-medium transition duration-300">
-                            Connect Service
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </section>
-
-        <!-- Deployment Steps Section -->
-        <section class="bg-white rounded-xl shadow-md overflow-hidden">
-            <div class="gradient-bg p-6 text-white">
-                <h2 class="text-2xl font-bold">Deployment Guide</h2>
-                <p class="opacity-90">Step-by-step instructions to deploy your AI Employee Suite</p>
-            </div>
-            
-            <div class="p-6">
-                <ol class="space-y-8 list-decimal list-inside">
-                    <!-- Step 1 -->
-                    <li class="deployment-step">
-                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Host the Code</h3>
-                        <div class="ml-2">
-                            <p class="text-gray-600 mb-4">Choose a serverless platform to host your AI Employee Suite:</p>
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
-                                <div class="bg-gray-100 p-4 rounded-lg">
-                                    <div class="flex items-center mb-2">
-                                        <i class="fab fa-aws text-orange-500 text-xl mr-2"></i>
-                                        <h4 class="font-medium">AWS Lambda</h4>
-                                    </div>
-                                    <p class="text-sm text-gray-600">Ideal for scalable, event-driven execution with tight AWS integration.</p>
-                                    <button class="mt-2 text-blue-600 text-sm font-medium">View Setup Guide</button>
-                                </div>
-                                <div class="bg-gray-100 p-4 rounded-lg">
-                                    <div class="flex items-center mb-2">
-                                        <i class="fab fa-google text-blue-500 text-xl mr-2"></i>
-                                        <h4 class="font-medium">Google Cloud Functions</h4>
-                                    </div>
-                                    <p class="text-sm text-gray-600">Great for projects already using Google Cloud services.</p>
-                                    <button class="mt-2 text-blue-600 text-sm font-medium">View Setup Guide</button>
-                                </div>
-                            </div>
-                            <div class="bg-gray-800 text-green-400 p-4 rounded-lg overflow-x-auto">
-                                <code class="text-sm">
-                                    # Sample deployment command<br>
-                                    $ gcloud functions deploy ai-employee-suite \<br>
-                                    &nbsp;&nbsp;--runtime python39 \<br>
-                                    &nbsp;&nbsp;--trigger-http \<br>
-                                    &nbsp;&nbsp;--allow-unauthenticated
-                                </code>
-                            </div>
+                <!-- Connection Troubleshooting -->
+                <div class="mt-8 bg-gray-50 p-6 rounded-lg border border-gray-200">
+                    <h3 class="text-lg font-medium text-gray-900 mb-4 flex items-center">
+                        <i class="fas fa-tools text-yellow-500 mr-2"></i> Connection Troubleshooting
+                    </h3>
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                        <div>
+                            <h4 class="font-medium text-gray-700 mb-2">Common Issues</h4>
+                            <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
+                                <li>API key expired</li>
+                                <li>Service rate limits</li>
+                                <li>Network connectivity</li>
+                                <li>Incorrect configuration</li>
+                            </ul>
                         </div>
-                    </li>
-                    
-                    <!-- Step 2 -->
-                    <li class="deployment-step">
-                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Connect APIs</h3>
-                        <div class="ml-2">
-                            <p class="text-gray-600 mb-4">Integrate with essential services for full functionality:</p>
-                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
-                                <div class="bg-gray-100 p-4 rounded-lg">
-                                    <div class="flex items-center mb-2">
-                                        <i class="fas fa-credit-card text-purple-500 text-xl mr-2"></i>
-                                        <h4 class="font-medium">Stripe</h4>
-                                    </div>
-                                    <p class="text-sm text-gray-600">For payment processing and monetization.</p>
-                                    <div class="mt-2 flex items-center">
-                                        <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium">Connected</span>
-                                        <button class="ml-2 text-blue-600 text-xs font-medium">Configure</button>
-                                    </div>
-                                </div>
-                                <div class="bg-gray-100 p-4 rounded-lg">
-                                    <div class="flex items-center mb-2">
-                                        <i class="fas fa-level-up-alt text-blue-500 text-xl mr-2"></i>
-                                        <h4 class="font-medium">GoHighLevel</h4>
-                                    </div>
-                                    <p class="text-sm text-gray-600">For funnel automation and CRM features.</p>
-                                    <div class="mt-2 flex items-center">
-                                        <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium">Connected</span>
-                                        <button class="ml-2 text-blue-600 text-xs font-medium">Configure</button>
-                                    </div>
-                                </div>
-                                <div class="bg-gray-100 p-4 rounded-lg">
-                                    <div class="flex items-center mb-2">
-                                        <i class="fas fa-phone text-green-500 text-xl mr-2"></i>
-                                        <h4 class="font-medium">Twilio</h4>
-                                    </div>
-                                    <p class="text-sm text-gray-600">For Voice AI call handling and SMS.</p>
-                                    <div class="mt-2 flex items-center">
-                                        <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs font-medium">Connected</span>
-                                        <button class="ml-2 text-blue-600 text-xs font-medium">Configure</button>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-4">
-                                <div class="flex">
-                                    <div class="flex-shrink-0">
-                                        <i class="fas fa-exclamation-circle text-yellow-400"></i>
-                                    </div>
-                                    <div class="ml-3">
-                                        <p class="text-sm text-yellow-700">
-                                            Ensure all API keys are stored securely using environment variables or a secrets manager.
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
+                        <div>
+                            <h4 class="font-medium text-gray-700 mb-2">Quick Fixes</h4>
+                            <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
+                                <li>Refresh API tokens</li>
+                                <li>Check service status</li>
+                                <li>Verify network settings</li>
+                                <li>Review documentation</li>
+                            </ul>
                         </div>
-                    </li>
-                    
-                    <!-- Step 3 -->
-                    <li class="deployment-step">
-                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Embed in Platforms</h3>
-                        <div class="ml-2">
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                <div>
-                                    <h4 class="font-medium text-gray-700 mb-2">Website Chatbot</h4>
-                                    <p class="text-gray-600 text-sm mb-3">Add the Lovable.dev chatbot to your website:</p>
-                                    <div class="bg-gray-800 text-green-400 p-4 rounded-lg overflow-x-auto">
-                                        <code class="text-sm">
-                                            &lt;!-- Add to your website's &lt;head&gt; --&gt;<br>
-                                            &lt;script src="https://cdn.lovable.dev/chatbot.js"&gt;&lt;/script&gt;<br>
-                                            &lt;script&gt;<br>
-                                            &nbsp;&nbsp;window.lovableSettings = {<br>
-                                            &nbsp;&nbsp;&nbsp;&nbsp;apiKey: 'YOUR_API_KEY',<br>
-                                            &nbsp;&nbsp;&nbsp;&nbsp;position: 'bottom-right'<br>
-                                            &nbsp;&nbsp;};<br>
-                                            &lt;/script&gt;
-                                        </code>
-                                    </div>
-                                    <button class="mt-3 text-sm text-blue-600 font-medium">Copy Embed Code</button>
-                                </div>
-                                <div>
-                                    <h4 class="font-medium text-gray-700 mb-2">Webhook Setup</h4>
-                                    <p class="text-gray-600 text-sm mb-3">Configure webhooks to trigger workflows:</p>
-                                    <div class="bg-gray-100 p-4 rounded-lg">
-                                        <div class="flex items-center mb-2">
-                                            <i class="fab fa-slack text-purple-500 text-xl mr-2"></i>
-                                            <h4 class="font-medium">Sample Webhook URL</h4>
-                                        </div>
-                                        <div class="bg-white p-2 rounded border text-sm text-gray-700 mb-2 overflow-x-auto">
-                                            https://api.yourservice.com/webhook/ai-employee?token=SECURE_TOKEN
-                                        </div>
-                                        <p class="text-xs text-gray-500">Use this URL in Zapier/Make to trigger workflows</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    
-                    <!-- Step 4 -->
-                    <li class="deployment-step">
-                        <h3 class="text-xl font-semibold text-gray-800 mb-2">Testing & Monitoring</h3>
-                        <div class="ml-2">
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div class="bg-gray-100 p-4 rounded-lg">
-                                    <h4 class="font-medium text-gray-700 mb-2">Test All Modules</h4>
-                                    <ul class="list-disc pl-5 text-sm text-gray-600 space-y-1">
-                                        <li>Verify voice call quality</li>
-                                        <li>Test chatbot responses</li>
-                                        <li>Check review generation</li>
-                                        <li>Validate funnel creation</li>
-                                    </ul>
-                                    <button class="mt-3 bg-purple-600 hover:bg-purple-700 text-white py-1 px-3 rounded text-sm font-medium">
-                                        Run Test Suite
-                                    </button>
-                                </div>
-                                <div class="bg-gray-100 p-4 rounded-lg">
-                                    <h4 class="font-medium text-gray-700 mb-2">Monitoring Setup</h4>
-                                    <div class="flex items-center space-x-3">
-                                        <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs font-medium">New Relic</span>
-                                        <span class="bg-orange-100 text-orange-800 px-2 py-1 rounded text-xs font-medium">Datadog</span>
-                                        <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded text-xs font-medium">Sentry</span>
-                                    </div>
-                                    <p class="text-xs text-gray-500 mt-2">Recommended for performance tracking and error monitoring</p>
-                                    <button class="mt-3 text-sm text-blue-600 font-medium">Configure Monitoring</button>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ol>
-                
-                <!-- Deployment Completion -->
-                <div class="mt-8 border-t pt-6">
-                    <div class="bg-green-50 border-l-4 border-green-400 p-4">
-                        <div class="flex">
-                            <div class="flex-shrink-0">
-                                <i class="fas fa-check-circle text-green-400"></i>
-                            </div>
-                            <div class="ml-3">
-                                <p class="text-sm text-green-700">
-                                    <span class="font-bold">Congratulations!</span> Your AI Employee Suite is now ready for deployment. 
-                                    Follow these final steps to go live.
-                                </p>
-                            </div>
+                        <div>
+                            <h4 class="font-medium text-gray-700 mb-2">Need Help?</h4>
+                            <button class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg font-medium w-full mb-2">
+                                <i class="fas fa-question-circle mr-2"></i> Support Center
+                            </button>
+                            <button class="bg-white border border-purple-600 text-purple-600 hover:bg-purple-50 py-2 px-4 rounded-lg font-medium w-full">
+                                <i class="fas fa-book mr-2"></i> Documentation
+                            </button>
                         </div>
                     </div>
-                    
-                    <div class="mt-4 flex justify-end space-x-3">
-                        <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg font-medium">
-                            Save for Later
-                        </button>
-                        <button class="gradient-bg hover:opacity-90 text-white py-2 px-4 rounded-lg font-medium">
-                            Complete Deployment
-                        </button>
-                    </div>
                 </div>
             </div>
         </section>
@@ -548,34 +385,120 @@
     </footer>
 
     <script>
-        // Simple function to handle the "Copy Embed Code" button
-        document.querySelectorAll('button').forEach(button => {
-            if (button.textContent.includes('Copy Embed Code')) {
-                button.addEventListener('click', function() {
-                    const codeBlock = this.previousElementSibling.querySelector('code');
-                    navigator.clipboard.writeText(codeBlock.textContent);
-                    
-                    // Change button text temporarily
-                    const originalText = this.textContent;
-                    this.textContent = 'Copied!';
-                    this.classList.add('text-green-600');
-                    
-                    setTimeout(() => {
-                        this.textContent = originalText;
-                        this.classList.remove('text-green-600');
-                    }, 2000);
-                });
+        // Show status alert if any modules are not responding
+        document.addEventListener('DOMContentLoaded', function() {
+            const notRespondingModules = document.querySelectorAll('.not-responding');
+            if (notRespondingModules.length > 0) {
+                document.getElementById('statusAlert').classList.remove('hidden');
             }
         });
-        
-        // Handle test suite button
-        const testSuiteButton = document.querySelector('button:contains("Run Test Suite")');
-        if (testSuiteButton) {
-            testSuiteButton.addEventListener('click', function() {
-                alert('Running comprehensive test suite... Check console for results.');
-                console.log('AI Employee Suite Test Results:\n- Voice AI: ✅\n- Conversation AI: ✅\n- Reviews AI: ✅\n- Funnel AI: ✅\n- Content AI: ✅\n- Workflow AI: ✅');
+
+        // Test connection for individual module
+        document.querySelectorAll('.connection-test-btn').forEach(btn => {
+            btn.addEventListener('click', function() {
+                const row = this.closest('.integration-row');
+                const statusBadge = row.querySelector('.status-badge');
+                const responseTime = row.querySelector('td:nth-child(4) span');
+                
+                // Show testing state
+                statusBadge.innerHTML = '<i class="fas fa-sync-alt fa-spin mr-1"></i> Testing...';
+                statusBadge.className = 'status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800';
+                
+                // Simulate API test
+                setTimeout(() => {
+                    if (row.classList.contains('not-responding')) {
+                        // 30% chance to fix the connection
+                        if (Math.random() < 0.3) {
+                            row.classList.remove('not-responding');
+                            statusBadge.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Connected';
+                            statusBadge.className = 'status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800';
+                            responseTime.textContent = (Math.floor(Math.random() * 500) + 100) + 'ms';
+                            
+                            // Update status alert if all fixed
+                            if (document.querySelectorAll('.not-responding').length === 0) {
+                                document.getElementById('statusAlert').classList.add('hidden');
+                            }
+                        } else {
+                            statusBadge.innerHTML = '<i class="fas fa-exclamation-triangle mr-1"></i> Not Responding';
+                            statusBadge.className = 'status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 pulse';
+                            responseTime.textContent = 'Timeout';
+                        }
+                    } else {
+                        // For working connections, just update response time
+                        statusBadge.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Connected';
+                        statusBadge.className = 'status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800';
+                        responseTime.textContent = (Math.floor(Math.random() * 500) + 100) + 'ms';
+                    }
+                }, 1000);
             });
-        }
+        });
+
+        // Test all connections
+        document.getElementById('testAllConnections').addEventListener('click', function() {
+            const btn = this;
+            const originalText = btn.innerHTML;
+            
+            // Show loading state
+            btn.innerHTML = '<i class="fas fa-sync-alt fa-spin mr-2"></i> Testing All...';
+            btn.disabled = true;
+            
+            // Test each connection
+            const testButtons = document.querySelectorAll('.connection-test-btn');
+            let testsCompleted = 0;
+            
+            testButtons.forEach(testBtn => {
+                testBtn.click();
+                testsCompleted++;
+                
+                if (testsCompleted === testButtons.length) {
+                    setTimeout(() => {
+                        btn.innerHTML = originalText;
+                        btn.disabled = false;
+                        
+                        // Check if any modules are still not responding
+                        const notRespondingModules = document.querySelectorAll('.not-responding');
+                        if (notRespondingModules.length > 0) {
+                            document.getElementById('statusAlert').classList.remove('hidden');
+                        } else {
+                            document.getElementById('statusAlert').classList.add('hidden');
+                        }
+                    }, 1500);
+                }
+            });
+        });
+
+        // Refresh all connections
+        document.getElementById('refreshAllBtn').addEventListener('click', function() {
+            const notRespondingModules = document.querySelectorAll('.not-responding');
+            
+            notRespondingModules.forEach(module => {
+                const statusBadge = module.querySelector('.status-badge');
+                const responseTime = module.querySelector('td:nth-child(4) span');
+                
+                // Show refreshing state
+                statusBadge.innerHTML = '<i class="fas fa-sync-alt fa-spin mr-1"></i> Refreshing...';
+                statusBadge.className = 'status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800';
+                
+                // Simulate refresh with 70% success rate
+                setTimeout(() => {
+                    if (Math.random() < 0.7) {
+                        module.classList.remove('not-responding');
+                        statusBadge.innerHTML = '<i class="fas fa-check-circle mr-1"></i> Connected';
+                        statusBadge.className = 'status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800';
+                        responseTime.textContent = (Math.floor(Math.random() * 500) + 100) + 'ms';
+                        
+                        // Update status alert if all fixed
+                        if (document.querySelectorAll('.not-responding').length === 0) {
+                            document.getElementById('statusAlert').classList.add('hidden');
+                        }
+                    } else {
+                        statusBadge.innerHTML = '<i class="fas fa-exclamation-triangle mr-1"></i> Not Responding';
+                        statusBadge.className = 'status-badge px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 pulse';
+                        responseTime.textContent = 'Timeout';
+                    }
+                }, 1500);
+            });
+        });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=abdelhak66/customer-support" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
 </html>