@bitpoolos/edge-bacnet 1.6.1 → 1.6.3

package/bacnet_read.html

@@ -62,6 +62,7 @@
             progressBarValue: ref(),
             rightClickedDevice: ref(),
             rightClickedPoint: ref(),
+            rightClickedMstpFolder: ref(),
             showDeviceNameDialog: ref(false),
             showPointNameDialog: ref(false),
             deviceDisplayNameValue: ref(),
@@ -288,7 +289,13 @@
                 newReadParent = JSON.parse(JSON.stringify(parentDevice));
               }
               newReadParent.children[0].children = [];
-              newReadParent.children[0].children.push(slotProps.node);
+
+              // Create a copy of the point with preserved display name
+              let pointCopy = JSON.parse(JSON.stringify(slotProps.node));
+              // Ensure display name is preserved from the original point
+              pointCopy.label = slotProps.node.label;
+              newReadParent.children[0].children.push(pointCopy);
+
               while (newReadParent.children.length > 1) {
                 newReadParent.children.forEach(function (child, index) {
                   if (child.label.includes("MSTP")) {
@@ -307,7 +314,10 @@
                 (ele) => ele.pointName == slotProps.node.pointName
               );
               if (pointIndex == -1) {
-                this.readDevices[foundDeviceIndex].children[0].children.push(slotProps.node);
+                // Create a copy of the point with preserved display name
+                let pointCopy = JSON.parse(JSON.stringify(slotProps.node));
+                pointCopy.label = slotProps.node.label;
+                this.readDevices[foundDeviceIndex].children[0].children.push(pointCopy);
               }
             }
 
@@ -321,6 +331,10 @@
             }
 
             let point = this.pointList[key][slotProps.node.pointName];
+            // Preserve any existing display name when adding to pointsToRead
+            if (slotProps.node.label !== slotProps.node.pointName) {
+              point.displayName = slotProps.node.label;
+            }
             this.pointsToRead[key][point.objectName] = point;
 
             //force a deploy state
@@ -566,6 +580,27 @@
               pointMenu.classList.remove("pointAddedToRead");
             }
           },
+          // NEW: Handle right-click on MSTP network folders
+          onMstpFolderRightClick(slotProps, event) {
+            let app = this;
+            app.rightClickedMstpFolder = slotProps;
+            event.preventDefault();
+            event.stopPropagation();
+
+            // Hide other context menus first
+            const menu = document.querySelector(".context-menu");
+            const pointMenu = document.querySelector(".point-context-menu");
+            if (menu) menu.style.display = "none";
+            if (pointMenu) pointMenu.style.display = "none";
+
+            const mstpFolderMenu = document.querySelector(".mstp-folder-context-menu");
+
+            if (mstpFolderMenu) {
+              mstpFolderMenu.style.setProperty("--mouse-x", event.clientX + "px");
+              mstpFolderMenu.style.setProperty("--mouse-y", event.clientY + "px");
+              mstpFolderMenu.style.display = "block";
+            }
+          },
           handleContextMenuClick(type) {
             let app = this;
             switch (type) {
@@ -589,6 +624,17 @@
                 break;
             }
           },
+          // NEW: Handle context menu clicks for MSTP folders
+          handleMstpFolderContextMenuClick(type) {
+            let app = this;
+            switch (type) {
+              case "updateAllDevices":
+                app.updateAllMstpDevices(app.rightClickedMstpFolder);
+                break;
+              default:
+                break;
+            }
+          },
           handlePointContextMenuClick(type) {
             let app = this;
             switch (type) {
@@ -603,18 +649,52 @@
                 break;
             }
           },
+          // NEW: Update all devices within an MSTP network folder
+          updateAllMstpDevices(slotProps) {
+            let app = this;
+
+            if (!slotProps || !slotProps.node || !slotProps.node.children) {
+              return;
+            }
+
+            const mstpDevices = slotProps.node.children;
+            let updatedCount = 0;
+
+            // Iterate through all MSTP devices in the folder
+            mstpDevices.forEach(function (mstpDevice) {
+              // Find the device in the device list
+              let device = app.getDeviceFromDeviceList(mstpDevice.ipAddr, mstpDevice.deviceId);
+              if (device) {
+                app.nodeService.updatePointsForDevice(device).then(function (result) {
+                  updatedCount++;
+                }).catch(function (error) {
+                  // Handle error silently
+                });
+              }
+            });
+
+            // Show user feedback
+            if (mstpDevices.length > 0) {
+              app.$toast?.add({
+                severity: 'info',
+                summary: 'Update Started',
+                detail: `Updating points for ${mstpDevices.length} devices in ${slotProps.node.label}`,
+                life: 3000
+              });
+            }
+          },
           purgeDevice(slotProps) {
             let app = this;
             let device = app.getDeviceFromDeviceList(slotProps.node.ipAddr, slotProps.node.deviceId);
             if (device) {
-              app.nodeService.purgeDevice(device).then(function (result) {});
+              app.nodeService.purgeDevice(device).then(function (result) { });
             }
           },
           updatePointsForDevice(slotProps) {
             let app = this;
             let device = app.getDeviceFromDeviceList(slotProps.node.ipAddr, slotProps.node.deviceId);
             if (device) {
-              app.nodeService.updatePointsForDevice(device).then(function (result) {});
+              app.nodeService.updatePointsForDevice(device).then(function (result) { });
             }
           },
           updatePoint(slotProps) {
@@ -625,7 +705,7 @@
             });
             const deviceKey = `${app.getDeviceAddress(device.address)}-${device.deviceId}`;
             if (device) {
-              app.nodeService.updatePoint(deviceKey, pointKey).then(function (result) {});
+              app.nodeService.updatePoint(deviceKey, pointKey).then(function (result) { });
             }
           },
           setDeviceName() {
@@ -660,13 +740,95 @@
 
               app.nodeService.setPointDisplayName(deviceKey, pointName, pointDisplayName).then(function (result) {
                 if (result) {
-                  slotProps.node.label = pointDisplayName;
+                  // Update the display name across all UI representations
+                  app.syncPointDisplayNameAcrossUI(deviceKey, pointName, pointDisplayName);
+                  app.updatePointsToReadDisplayName(deviceKey, pointName, pointDisplayName);
                 }
               });
             }
 
             app.showPointNameDialog = false;
           },
+          // NEW: Centralized method to sync display names across all UI trees
+          syncPointDisplayNameAcrossUI(deviceKey, pointName, newDisplayName) {
+            let app = this;
+
+            // Update in main devices tree
+            app.updatePointDisplayNameInDevicesTree(deviceKey, pointName, newDisplayName);
+
+            // Update in read devices tree
+            app.updatePointDisplayNameInReadDevicesTree(deviceKey, pointName, newDisplayName);
+
+            // Force UI update
+            app.$forceUpdate();
+          },
+          // NEW: Update display name in main devices tree
+          updatePointDisplayNameInDevicesTree(deviceKey, pointName, newDisplayName) {
+            let app = this;
+            let [ipAddress, deviceId] = deviceKey.split('-');
+
+            // Find the device in main tree
+            let deviceIndex = app.devices ? app.devices.findIndex(device =>
+              device.ipAddr === ipAddress && device.deviceId.toString() === deviceId) : -1;
+
+            if (deviceIndex !== -1) {
+              // Update direct device points
+              let pointIndex = app.devices[deviceIndex].children[0].children.findIndex(point =>
+                point.pointName === pointName);
+              if (pointIndex !== -1) {
+                app.devices[deviceIndex].children[0].children[pointIndex].label = newDisplayName;
+              }
+
+              // Update MSTP device points if applicable
+              app.devices[deviceIndex].children.forEach(child => {
+                if (child.label && child.label.includes("MSTP") && child.children) {
+                  child.children.forEach(mstpDevice => {
+                    if (mstpDevice.deviceId.toString() === deviceId) {
+                      let mstpPointIndex = mstpDevice.children[0].children.findIndex(point =>
+                        point.pointName === pointName);
+                      if (mstpPointIndex !== -1) {
+                        mstpDevice.children[0].children[mstpPointIndex].label = newDisplayName;
+                      }
+                    }
+                  });
+                }
+              });
+            }
+          },
+          // NEW: Update display name in read devices tree
+          updatePointDisplayNameInReadDevicesTree(deviceKey, pointName, newDisplayName) {
+            let app = this;
+            let [ipAddress, deviceId] = deviceKey.split('-');
+
+            if (!app.readDevices) return;
+
+            // Find the device in read devices tree
+            let readDeviceIndex = app.readDevices.findIndex(device =>
+              device.deviceId.toString() === deviceId);
+
+            if (readDeviceIndex !== -1) {
+              let pointIndex = app.readDevices[readDeviceIndex].children[0].children.findIndex(point =>
+                point.pointName === pointName);
+              if (pointIndex !== -1) {
+                app.readDevices[readDeviceIndex].children[0].children[pointIndex].label = newDisplayName;
+              }
+            }
+          },
+          // NEW: Update display name in pointsToRead data structure
+          updatePointsToReadDisplayName(deviceKey, pointName, newDisplayName) {
+            let app = this;
+
+            if (app.pointsToRead && app.pointsToRead[deviceKey]) {
+              // Find the point by objectName (since pointsToRead uses objectName as key)
+              for (let objectName in app.pointsToRead[deviceKey]) {
+                let point = app.pointsToRead[deviceKey][objectName];
+                if (point && point.objectName === pointName) {
+                  point.displayName = newDisplayName;
+                  break;
+                }
+              }
+            }
+          },
           getDeviceFromDeviceList(ip, id) {
             let app = this;
             let device = app.deviceList.find((ele) => {
@@ -896,7 +1058,30 @@
             app.$forceUpdate();
           },
           refreshReadListTree() {
-            this.addToReadDevices(this.pointsToRead);
+            // Enhanced refresh that maintains display names
+            let app = this;
+
+            // First apply any saved display names to the current pointsToRead
+            app.applyStoredDisplayNames();
+
+            // Then rebuild the read list tree
+            app.addToReadDevices(app.pointsToRead);
+          },
+          // NEW: Apply stored display names from backend to current data
+          applyStoredDisplayNames() {
+            let app = this;
+
+            if (!app.pointsToRead) return;
+
+            // Send current pointsToRead to backend to apply any stored display names
+            let msg = { applyDisplayNames: true };
+            // This will be handled by the backend node to apply stored display names
+            app.nodeService.applyDisplayNames(app.pointsToRead).then(function (result) {
+              if (result) {
+                // Refresh the main tree with updated display names
+                app.getData();
+              }
+            });
           },
           calculateMstpCount(slotProps) {
             let count = 0;
@@ -912,6 +1097,7 @@
             let count = 0;
             return count;
           },
+
         },
         components: {
           "p-tree": primevue.tree,
@@ -970,6 +1156,13 @@
         pointMenu.style.display = "none";
       });
 
+      var mstpFolderMenu = document.querySelector(".mstp-folder-context-menu");
+      window.addEventListener("click", (event) => {
+        if (menu) menu.style.display = "none";
+        if (pointMenu) pointMenu.style.display = "none";
+        if (mstpFolderMenu) mstpFolderMenu.style.display = "none";
+      });
+
       function handleCheckboxClick() {
         if (this.id == "node-input-object_property_simplePayload") {
           document.getElementById("node-input-object_property_fullObject").checked = false;
@@ -1113,6 +1306,18 @@
     </ul>
     <!-- End Point Context Menu -->
 
+    <!-- Start MSTP Folder Context Menu -->
+    <ul
+      class="red-ui-menu red-ui-menu-dropdown red-ui-menu-dropdown-direction-right red-ui-menu-dropdown-noicons red-ui-menu-dropdown-submenus mstp-folder-context-menu">
+      <li class="context-menu-item" @click="handleMstpFolderContextMenuClick('updateAllDevices')">
+        <a class="red-ui-menu-label">
+          <i class="pi pi-refresh context-menu-icon"></i>
+          <span class="context-menu-item-text">Update All Devices</span>
+        </a>
+      </li>
+    </ul>
+    <!-- End MSTP Folder Context Menu -->
+
     <!--
                 *
                 *
@@ -1194,6 +1399,7 @@
             filterMode="lenient"
             filterPlaceholder="No results found."
             v-if="hasData()">
+
             <template #device="slotProps">
               <div @contextmenu="onDeviceRightClick(slotProps, $event)" class="p-treenode-label">
                 <div v-if="isDeviceActive(slotProps)" class="deviceLabelParent">
@@ -1233,6 +1439,20 @@
               </div>
             </template>
 
+            
+            <template #mstpfolder="slotProps">
+              <div @contextmenu="onMstpFolderRightClick(slotProps, $event)" class="p-treenode-label">
+                <div class="deviceLabelParent">
+                  <b class="mstpLabel">
+                    <span>{{slotProps.node.label}}</span>
+                    <span class="mstpDeviceCount" >
+                      &nbsp; {{slotProps.node.children ? slotProps.node.children.length : 0}} &nbsp;
+                    </span>
+                  </b>
+                </div>
+              </div>
+            </template>
+
             <template #point="slotProps" v-model:class="pointContent">
               <div @contextmenu="onPointRightClick(slotProps, $event)">
                 <b class="pointLabel">{{slotProps.node.label}}</b>
@@ -1253,6 +1473,7 @@
                 </button>
               </div>
             </template>
+
           </p-tree>
           <div v-else style="text-align: center; padding-top: 20px;">
             <a>Building Tree...</a>
@@ -1492,4 +1713,4 @@
     <li><a href="https://wiki.bitpool.com/">wiki.bitpool.com</a> - find more documentation.</li>
     <li><a href="https://bacnet.org/">BACnet</a> - find more about the protocol.</li>
   </ul>
-</script>
+</script>

package/bacnet_read.js

@@ -99,7 +99,19 @@ module.exports = function (RED) {
           useDeviceName = node.useDeviceName;
         }
 
-        let readConfig = new ReadCommandConfig(node.pointsToRead, node.object_props, node.roundDecimal);
+        // Ensure pointsToRead has the latest display names before processing
+        let pointsToReadWithDisplayNames = JSON.parse(JSON.stringify(node.pointsToRead));
+
+        // Apply any stored display names from the backend data model
+        for (let deviceKey in pointsToReadWithDisplayNames) {
+          for (let pointKey in pointsToReadWithDisplayNames[deviceKey]) {
+            let point = pointsToReadWithDisplayNames[deviceKey][pointKey];
+            // The display name should already be preserved in the point object
+            // from the setPointDisplayName operations and addPointClicked enhancements
+          }
+        }
+
+        let readConfig = new ReadCommandConfig(pointsToReadWithDisplayNames, node.object_props, node.roundDecimal);
 
         let output = {
           type: "Read",

package/common.js

@@ -65,7 +65,8 @@ class BacnetClientConfig {
     retries,
     cacheFileEnabled,
     sanitise_device_schedule,
-    portRangeMatrix
+    portRangeMatrix,
+    enable_device_discovery
   ) {
     this.apduTimeout = apduTimeout;
     this.localIpAdrress = localIpAdrress;
@@ -84,6 +85,7 @@ class BacnetClientConfig {
     this.cacheFileEnabled = cacheFileEnabled;
     this.sanitise_device_schedule = sanitise_device_schedule;
     this.portRangeMatrix = this.generatePortRangeArray(portRangeMatrix);
+    this.enable_device_discovery = enable_device_discovery;
   }
 
   generatePortRangeArray(rangeMatrix) {
@@ -255,7 +257,7 @@ async function Store_Config(data) {
       JSON.parse(tempContent);
     } catch (verifyError) {
       console.error("Temporary file validation failed:", verifyError);
-      await fs2.unlink(tempFile).catch(() => {});
+      await fs2.unlink(tempFile).catch(() => { });
       return false;
     }
 
@@ -275,8 +277,8 @@ async function Store_Config(data) {
 
     // Cleanup temporary file if it exists
     try {
-      await fs2.unlink(tempFile).catch(() => {});
-    } catch (cleanupError) {}
+      await fs2.unlink(tempFile).catch(() => { });
+    } catch (cleanupError) { }
 
     // If main file is corrupted and backup exists, restore from backup
     try {
@@ -396,7 +398,7 @@ async function Store_Config_Server(data) {
         //console.log("Store_Config_Server writeFile error: ", err);
       }
     });
-  } catch (err) {}
+  } catch (err) { }
 }
 
 // READ CONFIG SYNC FUNCTION - BACNET SERVER ======================================

package/inspector.html

@@ -133,9 +133,9 @@
         <div class="center">
           <p class="headertext">{{siteName}} - Point Status Display</p>
         </div>
-        <p-datatable :value="displayData" paginator :rows="12" filterDisplay="menu" :filters="filters"
-          v-model:filters="filters" :sortMode="'multiple'" @filter="onFilter" scrollable scrollHeight="800px"
-          class="datatable fixed-height-table">
+        <p-datatable :value="displayData" paginator scrollable scrollHeight="800px" :rows="12" filterDisplay="menu"
+          :filters="filters" v-model:filters="filters" :sortMode="'multiple'" @filter="onFilter"
+          class="datatable fixed-height-table" :loading="loading">
           <template #header>
             <div class="tableHeaderDiv">
               <div style="margin-right: 5px">
@@ -177,8 +177,20 @@
               </div>
             </div>
           </template>
+          <template #loading>
+            <div class="loading-overlay">
+              <div class="loading-spinner">
+                <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
+                <p>Loading data...</p>
+              </div>
+            </div>
+          </template>
           <p-column v-for="col in visibleColumns" :key="col.field" :field="col.field" :header="col.header" sortable
-            filter></p-column>
+            filter>
+            <template #body="slotProps" v-if="col.field === 'objectType'">
+              {{ getObjectTypeString(slotProps.data.objectType) }}
+            </template>
+          </p-column>
           <template #paginatorstart>
 
           </template>
@@ -188,6 +200,7 @@
             </span>
           </template>
         </p-datatable>
+
       </div>
     </div>
   </div>
@@ -199,7 +212,7 @@
       data() {
         return {
           tableData: null,
-          loading: false,
+          loading: true,
           totalRecords: 0,
           first: 0,
           lazyParams: {},
@@ -263,6 +276,7 @@
         this.observeHeaderHeight();
 
         this.selectedColumns = JSON.parse(JSON.stringify(this.allColumns));
+        this.loading = true;
 
         fetch("/getModelStats")
           .then((response) => {
@@ -288,19 +302,22 @@
             // Calculate percentages
             const total = tableData.length || 1; // Avoid division by zero
             app.statPercentages = {
-              readCount: Math.round((data.statCounts.readCount / total) * 100),
-              ok: Math.round((data.statCounts.statBlock.ok / total) * 100),
-              error: Math.round((data.statCounts.statBlock.error / total) * 100),
-              missing: Math.round((data.statCounts.statBlock.missing / total) * 100),
-              warnings: Math.round((data.statCounts.statBlock.warnings / total) * 100),
-              deviceIdChange: Math.round((data.statCounts.statBlock.deviceIdChange / total) * 100),
-              deviceIdConflict: Math.round((data.statCounts.statBlock.deviceIdConflict / total) * 100),
-              unmapped: Math.round((data.statCounts.statBlock.unmapped / total) * 100)
+              readCount: Math.round((data.statCounts.readCount / total) * 10000) / 100,
+              ok: Math.round((data.statCounts.statBlock.ok / total) * 10000) / 100,
+              error: Math.round((data.statCounts.statBlock.error / total) * 10000) / 100,
+              missing: Math.round((data.statCounts.statBlock.missing / total) * 10000) / 100,
+              warnings: Math.round((data.statCounts.statBlock.warnings / total) * 10000) / 100,
+              deviceIdChange: Math.round((data.statCounts.statBlock.deviceIdChange / total) * 10000) / 100,
+              deviceIdConflict: Math.round((data.statCounts.statBlock.deviceIdConflict / total) * 10000) / 100,
+              unmapped: Math.round((data.statCounts.statBlock.unmapped / total) * 10000) / 100
             };
           })
           .catch((error) => {
             // Handle any errors
             console.error("Error:", error);
+          })
+          .finally(() => {
+            app.loading = false;
           });
       },
       computed: {
@@ -318,6 +335,36 @@
         },
       },
       methods: {
+        getObjectTypeString(objectType) {
+          switch (objectType) {
+            case 0:
+              return "Analog Input";
+            case 1:
+              return "Analog Output";
+            case 2:
+              return "Analog Value";
+            case 3:
+              return "Binary Input";
+            case 4:
+              return "Binary Output";
+            case 5:
+              return "Binary Value";
+            case 8:
+              return "Device";
+            case 10:
+              return "File";
+            case 13:
+              return "Multistate Input";
+            case 14:
+              return "Multistate Output";
+            case 19:
+              return "Multistate Value";
+            case 40:
+              return "Character String";
+            default:
+              return "";
+          }
+        },
         statusItemClicked(e) {
           // Get the filter category from the clicked item's text content
           const clickedItem = e.currentTarget;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitpoolos/edge-bacnet",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "A bacnet gateway for node-red",
   "dependencies": {
     "@plus4nodered/ts-node-bacnet": "^1.0.0-beta.2",

package/resources/downloadAsHtml.js

@@ -146,14 +146,14 @@ async function processPrimeVueHtml(appData) {
         // Calculate percentages
         const total = this.tableData.length || 1; // Avoid division by zero
         this.statPercentages = {
-          readCount: Math.round((this.statCounts.readCount / total) * 100),
-          ok: Math.round((this.statCounts.statBlock.ok / total) * 100),
-          error: Math.round((this.statCounts.statBlock.error / total) * 100),
-          missing: Math.round((this.statCounts.statBlock.missing / total) * 100),
-          warnings: Math.round((this.statCounts.statBlock.warnings / total) * 100),
-          deviceIdChange: Math.round((this.statCounts.statBlock.deviceIdChange / total) * 100),
-          deviceIdConflict: Math.round((this.statCounts.statBlock.deviceIdConflict / total) * 100 || 0),
-          unmapped: Math.round((this.statCounts.statBlock.unmapped / total) * 100)
+          readCount: Math.round((this.statCounts.readCount / total) * 10000) / 100,
+          ok: Math.round((this.statCounts.statBlock.ok / total) * 10000) / 100,
+          error: Math.round((this.statCounts.statBlock.error / total) * 10000) / 100,
+          missing: Math.round((this.statCounts.statBlock.missing / total) * 10000) / 100,
+          warnings: Math.round((this.statCounts.statBlock.warnings / total) * 10000) / 100,
+          deviceIdChange: Math.round((this.statCounts.statBlock.deviceIdChange / total) * 10000) / 100,
+          deviceIdConflict: Math.round((this.statCounts.statBlock.deviceIdConflict / total) * 10000) / 100,
+          unmapped: Math.round((this.statCounts.statBlock.unmapped / total) * 10000) / 100
         };
       },
       computed: {

package/resources/inspectorStyles.css

@@ -183,32 +183,15 @@ body {
 }
 
 
-/* changes start */
-
-/* Add these rules to forcefully control table height */
-.fixed-height-table {
-  height: 800px !important; /* Fixed height matching scrollHeight */
-}
-
-.fixed-height-table .p-datatable-wrapper {
-  height: calc(800px - 92px) !important; /* Subtract header and paginator height */
-  min-height: calc(800px - 92px) !important;
-}
-
 .fixed-height-table .p-datatable-table {
-  min-height: 800px !important; /* Force table to maintain minimum height */
-}
-
-/* Make sure the table body expands to fill available space */
-.fixed-height-table .p-datatable-tbody {
-  min-height: 760px !important; /* Approximate calculation for body only */
+  height: 70vh !important;
 }
 
-/* Add an empty row to maintain height when filtered results are few */
 .p-datatable-emptymessage td {
   height: 760px !important;
 }
 
+
 .row-missing {
   background-color: #00adef;
 }
@@ -234,7 +217,7 @@ body {
   width: -webkit-fill-available;
   margin: 5px;
   left: 0px;
-  height: 1000px !important;
+  /* height: 1000px !important; */
 }
 
 .datatable-card {
@@ -242,7 +225,7 @@ body {
   padding-bottom: 1rem !important;
   padding-left: 2rem;
   padding-right: 2rem;
-  height: 1000px !important;
+  /* height: 1000px !important; */
 }
 
 .p-multiselect-overlay {
@@ -500,4 +483,33 @@ body {
 /* Ensure table takes minimum space when empty */
 .p-datatable-empty-message {
   height: 576px !important;
+}
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.7);
+  z-index: 1000;
+}
+
+.loading-spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.loading-spinner p {
+  margin: 0;
+  color: #495057;
+  font-weight: 500;
+}
+
+.p-datatable .p-datatable-loading-overlay {
+  position: relative;
 }