fixed time left display

app/routes/user.py

@@ -41,16 +41,11 @@ def dashboard():
     
     subscription_data = []
     for sub in subscriptions:
-        remaining_time = None
-        if sub.expiry_time > datetime.utcnow():
-            remaining_time = sub.expiry_time - datetime.utcnow()
-            
         subscription_data.append({
             'id': sub.id,
             'status': sub.status.value,
             'start_time': sub.start_time,
             'expiry_time': sub.expiry_time,
-            'remaining_time': str(remaining_time) if remaining_time else None,
             'assigned_ip': sub.assigned_ip
         })
     

app/templates/user/dashboard.html

@@ -27,24 +27,15 @@
                 </div>
                 <div>
                     <p class="text-gray-400">Expires</p>
-                    <p class="font-medium">{{ active_subscription.expiry_time.strftime('%Y-%m-%d %H:%M UTC') }}</p>
+                    <p class="font-medium" id="expiry-time">
+                        {{ active_subscription.expiry_time.strftime('%Y-%m-%d %H:%M UTC') }}
+                    </p>
                 </div>
                 <div>
                     <p class="text-gray-400">Time Remaining</p>
-                    <p class="font-medium">{{ active_subscription.remaining_time }}</p>
+                    <p class="font-medium" id="time-remaining">Calculating...</p>
                 </div>
             </div>
-            
-            <div class="mt-6 flex space-x-4">
-                <button onclick="downloadConfig('{{ active_subscription.id }}')"
-                        class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-white">
-                    Download Config
-                </button>
-                <button onclick="showQRCode('{{ active_subscription.id }}')"
-                        class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded text-white">
-                    Show QR Code
-                </button>
-            </div>
         </div>
         {% else %}
         <div class="bg-dark-lighter rounded-lg p-6 mb-8 text-center">
@@ -72,8 +63,12 @@
                         {% for sub in subscriptions %}
                         <tr class="border-t border-gray-700">
                             <td class="p-2">{{ sub.status }}</td>
-                            <td class="p-2">{{ sub.start_time.strftime('%Y-%m-%d %H:%M UTC') }}</td>
+                            <td class="p-2">
-                            <td class="p-2">{{ sub.expiry_time.strftime('%Y-%m-%d %H:%M UTC') }}</td>
+                                {{ sub.start_time.strftime('%Y-%m-%d %H:%M UTC') }}
+                            </td>
+                            <td class="p-2">
+                                {{ sub.expiry_time.strftime('%Y-%m-%d %H:%M UTC') }}
+                            </td>
                             <td class="p-2 font-mono">{{ sub.assigned_ip }}</td>
                         </tr>
                         {% endfor %}
@@ -85,30 +80,36 @@
 </div>
 
 <script>
-async function downloadConfig(subscriptionId) {
+document.addEventListener('DOMContentLoaded', function() {
-    try {
+    const expiryTimeElement = document.getElementById('expiry-time');
-        const response = await fetch(`/api/subscription/config/${subscriptionId}`);
+    const timeRemainingElement = document.getElementById('time-remaining');
-        if (!response.ok) throw new Error('Failed to fetch config');
 
-        const data = await response.json();
+    if (expiryTimeElement && timeRemainingElement) {
-        const blob = new Blob([data.config], { type: 'text/plain' });
+        const expiryTime = new Date(expiryTimeElement.innerText);
-        const url = URL.createObjectURL(blob);
+        const calculateTimeRemaining = () => {
-        const a = document.createElement('a');
+            const now = new Date();
-        a.href = url;
+            const diff = expiryTime - now;
-        a.download = 'wireguard.conf';
+
-        document.body.appendChild(a);
+            if (diff <= 0) {
-        a.click();
+                timeRemainingElement.innerText = 'Expired';
-        document.body.removeChild(a);
+                return;
-        URL.revokeObjectURL(url);
+            }
-    } catch (error) {
+
-        console.error('Error downloading config:', error);
+            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
-        alert('Failed to download configuration');
+            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+
+            let timeString = '';
+            if (days > 0) timeString += `${days}d `;
+            if (hours > 0) timeString += `${hours}h `;
+            timeString += `${minutes}m`;
+
+            timeRemainingElement.innerText = timeString;
+        };
+
+        calculateTimeRemaining();
+        setInterval(calculateTimeRemaining, 60000);
     }
-}
+});
-
-function showQRCode(subscriptionId) {
-    // TODO: Implement QR code display
-    alert('QR Code feature coming soon');
-}
 </script>
 {% endblock %}