From eea67ac4d25cbe532692e033689422cf520d02ef Mon Sep 17 00:00:00 2001
From: "courtmanr@gmail.com" <courtmanr@gmail.com>
Date: Thu, 24 Apr 2025 17:01:02 +0100
Subject: [PATCH] feat(ui): Display placeholder in PBS tab when not configured

---
 src/public/app.js     | 23 ++++++++++++++++++++++-
 src/public/output.css | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 1 deletion(-)

diff --git a/src/public/app.js b/src/public/app.js
index ff0ad1cd7..3fbd91909 100644
--- a/src/public/app.js
+++ b/src/public/app.js
@@ -1660,7 +1660,28 @@ document.addEventListener('DOMContentLoaded', function() {
         return;
     }
 
-    // Remove initial loading message if it exists
+    // --- NEW: Check if PBS is configured --- //
+    if (!pbsArray || pbsArray.length === 0) {
+        container.innerHTML = ''; // Clear any previous content (like loading message)
+        const placeholder = document.createElement('div');
+        // Use banner/card styling with an icon
+        placeholder.className = 'pbs-not-configured-banner flex items-start p-4 border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-900/30 rounded-lg text-sm text-blue-800 dark:text-blue-300';
+        placeholder.innerHTML = `
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+            </svg>
+            <div>
+                <p class="font-semibold mb-1">Proxmox Backup Server Not Configured</p>
+                <p class="text-xs opacity-90">PBS connection details (e.g., <code>PROXMOX_HOST_2</code>, <code>PROXMOX_TOKEN_ID_2</code>) need to be set in your <code>.env</code> file to enable PBS monitoring.</p>
+            </div>
+        `;
+        container.appendChild(placeholder);
+        console.log("[updatePbsInfo] No PBS data received, showing 'Not Configured' banner.");
+        return; // Stop processing for this tab
+    }
+    // --- END NEW Check --- //
+
+    // Remove initial loading message if it exists AND we have data
     const loadingMessage = document.getElementById('pbs-loading-message');
     if (loadingMessage) {
         loadingMessage.remove();
diff --git a/src/public/output.css b/src/public/output.css
index 3a1ef515e..2f4efa38c 100644
--- a/src/public/output.css
+++ b/src/public/output.css
@@ -689,6 +689,10 @@ video {
   margin-right: 0.5rem;
 }
 
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
 .block {
   display: block;
 }
@@ -873,6 +877,10 @@ video {
   flex-wrap: wrap;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }
@@ -977,6 +985,10 @@ video {
   border-radius: 9999px;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -1028,6 +1040,11 @@ video {
   border-top-width: 2px;
 }
 
+.border-blue-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(191 219 254 / var(--tw-border-opacity));
+}
+
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -1310,6 +1327,11 @@ video {
   color: rgb(29 78 216 / var(--tw-text-opacity));
 }
 
+.text-blue-800 {
+  --tw-text-opacity: 1;
+  color: rgb(30 64 175 / var(--tw-text-opacity));
+}
+
 .text-gray-200 {
   --tw-text-opacity: 1;
   color: rgb(229 231 235 / var(--tw-text-opacity));
@@ -1436,6 +1458,10 @@ video {
   opacity: 0.6;
 }
 
+.opacity-90 {
+  opacity: 0.9;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -1666,6 +1692,11 @@ video {
   border-color: rgb(55 65 81 / var(--tw-divide-opacity));
 }
 
+.dark\:border-blue-800:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(30 64 175 / var(--tw-border-opacity));
+}
+
 .dark\:border-gray-600:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity));
@@ -1680,6 +1711,10 @@ video {
   background-color: rgb(30 58 138 / 0.2);
 }
 
+.dark\:bg-blue-900\/30:is(.dark *) {
+  background-color: rgb(30 58 138 / 0.3);
+}
+
 .dark\:bg-blue-900\/50:is(.dark *) {
   background-color: rgb(30 58 138 / 0.5);
 }